TWaver最强大的ShapeNode功能

ShapeNode

TWaver提供了一个特殊的节点twaver.ShapeNode。这是一个节点扩展,与普通节点(Node)之间主要区别是:普通节点主要通过图片来表示一个物体,而形状节点通过一个任意形状来表示一个物体。形状节点由一系列点组成,这些点连接成一个形状。通过千变万化的形状,可以用来表示很多特殊的数据,比如一个国家或者地区、一个总线等等。

说这个你可能不太懂，但是说起SVG你是不是就懂了，它可以通过一系列的点，绘制成一个图形。ShapeNode的功能类是于svg，通过它，你自己自定义一个属于自己的地图，或者攻略图等。

特殊方法

为了方便节点的操作，在相对于普通节点上提供了常用的方法：

• addPoint() 添加点
• firePointsChange() 派发点的更改事件
• getLineLength() 获取ShapeNode的周长
• getPoints() 获取所有点的集合
• getSegments() 获取所有连线段的集合
• removeAt() 移除参数指定的某个点
• removePoint() 移除指定的点
• setPoint() 设置指定序号上的点
• setPoints() 设置多边形上点的集合
• setSegments() 设置多边形网元上所有连线段的集合

写个代码

多边形网元和折线都是通过一系列的点来绘制的网元，但是不同的是折线它是一条Link，必须有起始和结束节点，而且必须是一条连续的路径。而多边形网元的点之间可以move to，这样可以是一条不连续的路径。

我们可以指定片段的绘制方式(segments),使ShapeNode表现更丰富的效果，如曲线(QuadTo)，间断(moveTo)等。绘制方式有三种，移动到(moveTo)、直线(lineTo)和曲线(quadto)。

var shapeNode1 = new twaver.ShapeNode({
    name: 'ShapeNode1',
});
shapeNode1.s('vector.fill.color', '#61b6d8');
shapeNode1.s('vector.gradient', 'radial.center');
shapeNode1.addPoint({
        x: 30,
        y: 10
});
shapeNode1.addPoint({
        x: 80,
        y: 10
});
shapeNode1.addPoint({
        x: 100,
        y: 90
});
shapeNode1.addPoint({
        x: 10,
        y: 90
});
shapeNode1.addPoint({
        x: 30,
        y: 10
});
box.add(shapeNode1);
var shapeNode2 = new twaver.ShapeNode();
shapeNode2.setName('shapeNode2');
shapeNode2.addPoint({
        x: 130,
        y: 110
});
shapeNode2.addPoint({
        x: 180,
        y: 110
});
shapeNode2.addPoint({
        x: 200,
        y: 190
});
shapeNode2.addPoint({
        x: 110,
        y: 190
});
shapeNode2.addPoint({
        x: 130,
        y: 110
});
shapeNode2.s('vector.fill.color', '#ec6c00');
shapeNode2.s('vector.gradient', 'radial.east');
var segments = new twaver.List();
segments.add("moveto");
segments.add("quadto");
segments.add("quadto");
shapeNode2.setSegments(segments);
box.add(shapeNode2);
var link = new twaver.Link(shapeNode1, shapeNode2);
box.add(link);

最终形成的效果