多比图元
图元继承结构
多比图形控件的自带有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中将会详细讨论。