多比图形控件教程6


3.4 定义一个矢量图元

在上一小节中,我们讲了如何定义一个图片作为图元,这种方式非常的简单,但是在图元被拉大以后, 由于位图的原因,图形可能不那么清楚了。 如果我们希望图元可以被无限级的放大,我们可以采用矢量图的方式。

矢量图是根据几何特性来绘制图形,矢量可以是一个点、一条线、圆等等的几何形状。它的特点是放大后图像不会失真,和分辨率无关,文件占用空间较小。

那么如何定义一个下面类似的《三相绕组》图形呢? 注意图中的图形,都是由同一个图元,设置不同的长宽得来的。

每一个图元,都有一个draw函数,我们只需要覆盖这个draw函数就可以了。具体的代码见下面。

//定义一个电阻的矢量图元

DianluShapes.Dianzhu = StandardShapes.Rectangle.extend({

    //重载draw函数,让

    draw: function () {

        this.logDebug("draw(), r=%s"this.r);

        this.setupGraphics();

        var changdu = 20;

        //画左边的接线点

        this.canvas.drawLine(this.id, -this.width / 2, 0, -changdu / 2, 0);

        //画中间的电阻

        this.canvas.drawRect(this.id, -changdu / 2, -this.height / 2, changdu, this.height);

        //画右边边的接线点

        this.canvas.drawLine(this.id, changdu / 2, 0, this.width / 2, 0);

    }

});

上一篇 下一篇

评论



分享