首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

[Web Chart系列之5] 6. 实战draw2d之ConnectionRouter

2013-09-06 
[Web Chart系列之五] 6. 实战draw2d之ConnectionRouter前言ConnectionRouter 的作用是定义连线的展示样式.

[Web Chart系列之五] 6. 实战draw2d之ConnectionRouter

前言

ConnectionRouter 的作用是定义连线的展示样式.

是直线连接还是曲线连接(好像也是基于Bezier曲线)

位于包: draw2d.layout.connection 下。

常见的有:

1. DirectRouter  -- 用直线连接两个节点

2. ManhattanConnectionRouter -- 使用 曼哈顿距离算法, 效果看上去是直角折线连接的。

3. SplineConnectionRouter 从ManhattanConnectionRouter继承过来, 不过是曲线的效果

4. ManhattanBridgedConnectionRouter -- 当两个线相交时自动产生一个 桥出来。


本篇介绍的重点是解决一个IE下的问题。


实例

画两个椭圆, 用线把两个椭圆连接起来:

draw2d.layout.connection.SplineConnectionRouter = draw2d.layout.connection.ManhattanConnectionRouter.extend({    NAME: "draw2d.layout.connection.SplineConnectionRouter",    init: function () {        this.spline = new draw2d.util.spline.CubicSpline();    //this.spline = new draw2d.util.spline.BezierSpline();    //this.spline = new draw2d.util.spline.CatmullRomSpline();            this.MINDIST = 50, this.cheapRouter = null;    },    route: function (conn) {        var i = 0;        var fromPt = conn.getStartPoint();        var fromDir = this.getStartDirection(conn);        var toPt = conn.getEndPoint();        var toDir = this.getEndDirection(conn);        this._route(conn, toPt, toDir, fromPt, fromDir);        var ps = conn.getPoints();        conn.oldPoint = null;        conn.lineSegments = new draw2d.util.ArrayList();        conn.basePoints = new draw2d.util.ArrayList();        var splinePoints = this.spline.generate(ps, 8);        splinePoints.each(function (i, e) {            conn.addPoint(e);        });        var ps = conn.getPoints();        length = ps.getSize();        var p = ps.get(0);        var path = ["M", p.x, " ", p.y];        for (i = 1; i < length; i++) {            p = ps.get(i);            path.push("L", p.x, " ", p.y);        }        conn.svgPathString = path.join("");    }

length = ps.getSize(); 这个地方出错, 看上去是 ps对象 没有这个方法。

不知道draw2d的新版是否解决了这个问题。

 临时解决就是判断浏览器, 如果是IE则用 DirectRouter 替换。



热点排行