[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 替换。
[Web Chart系列之五] 6. 实战draw2d之ConnectionRouter相关推荐
- [Web Chart系列之五] 5. 实战draw2d之figure tooltip 实现
写在前面 申明一下,关于系列五的前4篇的介绍都是基于 draw2d 的版本version 2.3.0 上的开发. 截至目前(2013/05), draw2d的最新版本已经是version 2.6.1 ...
- [Web Chart系列之五] 4. 实战draw2d(Raphael)之取消Chrome中Label Text 全部选中
情况描述 这里使用的是Rectangle , 里面加入一个Label 或多个Label 的组合图形. 在Chrome里拖拽图形的时候,偶尔会把所有Rectangle包含的Label 全部以深蓝色底色. ...
- [Web Chart系列之五] 1. 实战draw2d 之总体介绍
draw2d 是什么? 首先需要明确的是这里指的draw2d是个什么东东? 用draw2d这个关键字,询问一下谷哥和度娘基本上会找到两个东西 一个是集成在eclipse(也可以单独使用) 里面使用SW ...
- [Web Chart系列之五] 3. 实战draw2d 之图形填充色(纯色 or 渐变)
颜色渐变 draw2d 目前没有提供直接对Figure 设置渐变效果的API. 但是raphael 有提供, 这样的话基本上在draw2d实现渐变成为可能. 颜色渐变功能来源 raphael 提供的图 ...
- [Web Chart系列之五] 2. 实战draw2d 之Label 放大,缩小的问题(raphael的text类似问题)
问题描述 在draw2d中使用Canvas 的setZoom function来扩大,缩小画布进而放大,缩小画布上的图形大小.(Zoom in/Zoom Out功能). 图形类型Circle, Rec ...
- [Web Chart系列之五] 图形布局-Circle Layout 之实现
前言 关于Circle Layout 的基本介绍, 可以参考: [Web Chart系列之三] 图形布局-Layout 布局的现实使用状况 这里使用这种布局来布局特定对象的关联. 这里的这些对象类似于 ...
- [Web Chart系列之一(续)]Web端图形绘制SVG,VML, HTML5 Canvas 简单实例
前言 本篇是继 [Web Chart系列之一]Web端图形绘制SVG,VML, HTML5 Canvas 技术比较 的补充和实例说明各种技术的使用方式. VML 的用法和实例 引入命名空间之后,就可以 ...
- [Web Chart系列之三] 图形布局-Layout
前言 从上一篇: [Web Chart系列之二] 各种实现js 图表的library汇总与比较 的介绍, 目前提供提供绘制矢量图的library 还是很多的. 如果只是需要绘制一些柱状图, 饼图, ...
- go语言web开发系列之五:gin用zap+file-rotatelogs实现日志记录及按日期切分日志
一,安装需要用到的库: 1,安装zap日志库: liuhongdi@ku:/data/liuhongdi/zaplog$ go get -u go.uber.org/zap 2,安装go-file-r ...
最新文章
- 在阿里云上创建一个个人网盘(owncloud)
- redux异步action_Redux数据状态管理
- 转: 网卡名字eth0,eth1的修改方法
- java 字符串过长_idea java常量字符串过长解决办法
- [ARM异常]-异常进入和异常退出时的arm core的硬件自动的行为
- Android什么是函数,什么是函数响应式编程(JavaAndroid版本)
- Python 3.6学习笔记(一)
- Vue之前端页面使用json编辑框
- 设计模式的功力长了!
- unicode html转义字符,HTML转义字符 Unicode和CSS伪类介绍(示例代码)
- 内核同步机制-优化屏障和内存屏障
- 什么是PM2 ---- (零秒重启)
- Communication System dp 动态规划 || 贪心
- 【Win10】使用“Windows照片查看器”查看照片
- Typora如何设置字体的颜色
- 用C#编写Visionpro相关窗体应用(.NET Framework)
- 解决谷歌的but your computer or network may be sending automated queries
- redis incr和incrBy的使用
- 【MODIS合集】MRT批处理MODIS数据
- 乡村爱情故事8 下载地址