[Web Chart系列之五] 6. 实战draw2d之ConnectionRouter
发布日期:2021-07-01 05:38:24
浏览次数:2
分类:技术文章
本文共 2278 字,大约阅读时间需要 7 分钟。
前言
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 替换。
转载地址:https://oscar.blog.csdn.net/article/details/10608707 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
能坚持,总会有不一样的收获!
[***.219.124.196]2024年04月13日 05时51分15秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
内存对齐详解
2019-05-01
秋招总结(一)-C++归纳
2019-05-01
秋招总结(三)-操作系统归纳
2019-05-01
LINUX CP命令详解
2019-05-01
source insight快捷键及使用技巧
2019-05-01
映 射 ALT 键
2019-05-01
vim使用快捷键F4生成文件头注释、F5生成main函数模板、F6生成.h文件框架模板
2019-05-01
OV5620的视频驱动
2019-05-01
C++中两个类交叉定义或递归定义的解决办法
2019-05-01
记一次Hive 行转列 引起的GC overhead limit exceeded
2019-05-01
OpenGL ES八 - 交叉存取顶点数据
2019-05-01
crontab定时任务写法
2019-05-01
nginx: [emerg] unknown directive "if($remote_addr" in /usr/local/tools/nginx/conf/nginx.conf:57
2019-05-01
module pip has no attribute main问题解决
2019-05-01
LeetCode 134.Gas Station (加油站)
2019-05-01
Python之命名元组 (namedtuple)
2019-05-01
使用libpcap过滤arp
2019-05-01
[转帖]Robots.txt指南
2019-05-01
正则表达式简介(微软)--6.优先权顺序
2019-05-01