### 前言
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 替換。
###
- 前言
- [Web Chart系列之一]Web端圖形繪制SVG,VML, HTML5 Canvas 技術比較
- [Web Chart系列之二] 各種實現js 圖表的library匯總與比較
- [Web Chart系列之三] 圖形布局-Layout
- [Web Chart系列之四] 圖形布局-Layout 之js設計實現
- [Web Chart系列之一(續)]Web端圖形繪制SVG,VML, HTML5 Canvas 簡單實例
- [Web Chart系列之五] 1. 實戰draw2d 之總體介紹
- [Web Chart系列之五] 2. 實戰draw2d 之Label 放大，縮小的問題(raphael的text類似問題)
- [Web Chart系列之五] 3. 實戰draw2d 之圖形填充色(純色 or 漸變)
- [Web Chart系列之五] 4. 實戰draw2d(Raphael)之取消Chrome中Label Text 全部選中
- [Web Chart系列之六] canvas Chart 導出圖文件
- [Web Chart系列之七] 物理動畫效果(如撕扯效果)
- [Web Chart系列之五] 5. 實戰draw2d之figure tooltip 實現
- Web圖形開發方案選型，SVG/VML/Flash/Applet優劣比較
- [Web Chart系列之五] 6. 實戰draw2d之ConnectionRouter