前言

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系列之五] 6. 实战draw2d之ConnectionRouter的更多相关文章

  1. nginx高性能WEB服务器系列之五--实战项目线上nginx多站点配置

    nginx系列友情链接:nginx高性能WEB服务器系列之一简介及安装https://www.cnblogs.com/maxtgood/p/9597596.htmlnginx高性能WEB服务器系列之二 ...

  2. [Web Chart系列之六] canvas Chart 导出图文件

    前言 博主正在参加CSDN2013年度博客之星评选,如果这篇文章对您有用,请投他一票: 投票地址:http://vote.blog.csdn.net/blogstaritem/blogstar2013 ...

  3. nginx高性能WEB服务器系列之九--nginx运维故障日常解决方案

    nginx系列友情链接:nginx高性能WEB服务器系列之一简介及安装https://www.cnblogs.com/maxtgood/p/9597596.htmlnginx高性能WEB服务器系列之二 ...

  4. nginx高性能WEB服务器系列之八--nginx日志分析与切割

    nginx系列友情链接:nginx高性能WEB服务器系列之一简介及安装https://www.cnblogs.com/maxtgood/p/9597596.htmlnginx高性能WEB服务器系列之二 ...

  5. nginx高性能WEB服务器系列之七--nginx反向代理

    nginx系列友情链接:nginx高性能WEB服务器系列之一简介及安装https://www.cnblogs.com/maxtgood/p/9597596.htmlnginx高性能WEB服务器系列之二 ...

  6. nginx高性能WEB服务器系列之六--nginx负载均衡配置+健康检查

    nginx系列友情链接:nginx高性能WEB服务器系列之一简介及安装https://www.cnblogs.com/maxtgood/p/9597596.htmlnginx高性能WEB服务器系列之二 ...

  7. nginx高性能WEB服务器系列之四配置文件详解

    nginx系列友情链接:nginx高性能WEB服务器系列之一简介及安装https://www.cnblogs.com/maxtgood/p/9597596.htmlnginx高性能WEB服务器系列之二 ...

  8. nginx高性能WEB服务器系列之三版本升级

    nginx系列友情链接:nginx高性能WEB服务器系列之一简介及安装https://www.cnblogs.com/maxtgood/p/9597596.htmlnginx高性能WEB服务器系列之二 ...

  9. nginx高性能WEB服务器系列之二命令管理

    nginx系列友情链接:nginx高性能WEB服务器系列之一简介及安装https://www.cnblogs.com/maxtgood/p/9597596.htmlnginx高性能WEB服务器系列之二 ...

随机推荐

  1. badi增强

    对于根据事务代码查找对应的BADI,网上介绍的方法很多,但总结下来无非就两种方法,在此把它记录下来,方便以后自己查阅了. (1)通过SE24,输入CL_EXITHANDLER,然后在方法GET_INS ...

  2. 怎样使用jsp实现header和footer与网页内容的分离

    好多显示层框架都自带这样的功能JSF,Wicket,页面布局取决于项目使用的显示层框架. 前台即客户端的布局,通常用在无需跳转的页面.比如同样是用户管理页面,增删改查的操作都希望停留在同一个页面.这时 ...

  3. Linux Shell常用技巧(一) RE

    一.    特殊文件: /dev/null和/dev/tty Linux系统提供了两个对Shell编程非常有用的特殊文件,/dev/null和/dev/tty.其中/dev/null将会丢掉所有写入它 ...

  4. BZOJ 2096([Poi2010]Pilots-单调队列-差值)

    2096: [Poi2010]Pilots Time Limit: 30 Sec   Memory Limit: 162 MB Submit: 190   Solved: 97 [ Submit][ ...

  5. spring异常记录-----java.lang.NoClassDefFoundError: org/apache/commons/lang3/StringUtils

    今天在练习怎样SSH中进行单元測试的时候出现下列异常: SEVERE: Exception starting filter Struts2 java.lang.NoClassDefFoundError ...

  6. niu人

    金步国简历 金步国简历 基本资料 姓名 金步国 性别 男 年龄 30 籍贯 江苏 淮安 院校 同济大学 专业 土木工程 学历 本科肄业 工作经验 5年 期望地点 长江以南 期望薪水 18000/月 个 ...

  7. Android WebView挂马漏洞--各大厂商纷纷落马

    本文章由Jack_Jia编写,转载请注明出处.   文章链接: http://blog.csdn.net/jiazhijun/article/details/11131891 作者:Jack_Jia ...

  8. [半原创]指纹识别+谷歌图片识别技术之C++代码

    原地址:http://blog.csdn.net/guoming0000/article/details/8138223 以前看到一个http://topic.csdn.net/u/20120417/ ...

  9. 常见问题(FAQ) | VPNCUP

    常见问题(FAQ) | VPNCUP 常见问题(FAQ) 关于FAQ 新手开始 登录验证问题 为什么刚注册后,登录VPN服务器提示错误? 免费注册的用户有哪些限制? 为什么连接免费VPN后20分钟自动 ...

  10. HDU4719-Oh My Holy FFF(DP线段树优化)

    Oh My Holy FFF Time Limit: 5000/2500 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others) T ...