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);

最终形成的效果