多比矢量图形开发教程（四）-图元

多比图元

图元继承结构

    多比图形控件的自带有20多个图元，例如长方形，正方形， 椭圆， 图片和google地图等。我们也可以自定义更多图元， 以便于复用。

我们首先看一看多比控件自带的图元，以及他们之间的继承关系。

 

命名空间	名称	父类
BaseShapes	Shape	所有图元的父类，相当于Java中的Object
StandardShapes	Rectangle	BaseShapes.Shape
StandardShapes	Square	StandardShapes.Rectangle
StandardShapes	Text	StandardShapes.Rectangle
StandardShapes	Circle	BaseShapes.Shape
StandardShapes	DoubleCircle	StandardShapes.Circle
StandardShapes	Connector	BaseShapes.Shape
StandardShapes	Line	StandardShapes.Connector
StandardShapes	Curve	StandardShapes.Line
StandardShapes	Image	StandardShapes.Rectangle
StandardShapes	Group	StandardShapes.Rectangle
StandardShapes	RightAngledTriangle	StandardShapes.Rectangle
StandardShapes	RoundRectangle	StandardShapes.Rectangle
StandardShapes	Ellipse	StandardShapes.Rectangle
Connectors	OneDimensionalLine	StandardShapes.Line
Connectors	SingleArrow	Connectors.OneDimensionalLine
Connectors	DoubleArrow	Connectors.SingleArrow
Connectors	BaseTopConnector	StandardShapes.Curve
Connectors	SideSideConnector	StandardShapes.Curve
Callouts	Callout	StandardShapes.Connector
Callouts	Note	StandardShapes.Text
Callouts	BigNote	Callouts.Note
GoogleMaps	Map	StandardShapes.Image
GoogleMaps	Satellite	GoogleMaps.Map

 

图元样式

我们经常关心的图元的样式，在默认的情况下，我们支持以下几种样式的类型。

样式变量：默认值	说明
x: 100,	x坐标
y: 100,	y坐标
r: 0,	旋转的角度
width:100,	图形的宽度
height:80,	图形的高度
lineColor: "1F07F5"，	线条颜色
lineAlpha: 100，	线条的透明度，默认为不透明
fillColor: "B3B3F2",	填充的颜色
fillAlpha: 80,	填充的透明图，默认为80%透明
lineWidth: 2,	线条宽度

 

每一种图元都有默认的样式， 如果你不定义新的样式，那么生成图形的时候就会采用默认的样式。下面是一个具体的例子。

//使用画图空间产生一个图形,所有的样式采用默认值

var shape = sa.createShape("StandardShapes.Rectangle", { });

//使用画图空间产生一个图形,高度为200， 宽度为200， 颜色为FF0000

var shape = sa.createShape("StandardShapes.Rectangle", { height: 200, width: 200，lineColor: "FF0000" });

修改图形的样式

经常会遇到的一种情况是， 我们会根据实时的数据，改变图形的样式，例如大小，坐标位置， 旋转角度等等。

我们以一个改变坐标位置为例，说一说如何

定义新图元

由于多比的良好继承关系，我们很容易定义新的图元。 一个常用的需求是， 我们有一张位图，我们希望把它定义为图元。请看下面的例子。

 

 

 

以下的例子说明了如何继承一个Image的图元。

//我们先声明一个命名空间。

Planner = {};

//我们淋浴器的图元，他继承至StandardShapes.Image

//因为我们淋浴器的图元的行为和StandardShapes.Image一样。

Planner.Bath = StandardShapes.Image.extend({

    //需要覆盖他的图片默认尺寸

    width: 190/2,

    height:  58/2,

    //覆盖url

    url:"images/stenciles/planner/2d/bath.png"

});

用同样的方法，我们还可以定义其他的图元。图元定义完成以后，我们需要把它加到设计器的图元面板中。 我们在5.1中将会详细讨论。

标签:  工作流设计器,  web矢量绘图,  svg矢量绘图,  vml设计器,  webgis地理信息