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

前言

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

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

位于包： draw2d.layout.connection 下。

常见的有：

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

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

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

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

 

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

 

实例

画两个椭圆， 用线把两个椭圆连接起来：

 

var oval2 =  new draw2d.shape.basic.Oval(100,80);

var port2 = new draw2d.HybridPort();

oval2.addPort(port2);

canvas.addFigure(oval2,200,200);



var router = new draw2d.layout.connection.SplineConnectionRouter();

//var router = new draw2d.layout.connection.DirectRouter();

var conn = new draw2d.Connection(router) 

conn.setSource(port1);

conn.setTarget(port2);

canvas.addFigure(conn);

 

这里使用SplineConnectionRouter这种连线连接。

在Firefox 和 Chrome 中是正常的。

但是到IE 下，却会报错

 

错误查找与解决

出错点就是在 SplineConnectionRouter定义的地方。

 

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 替换。