最近又有客户提到地铁图，高速路线图的需求，本质上只是基本的线条和点，重点是要有坐标数据，我从北京地铁官网找到了路线的xml数据，于是就做了个简单的示例，以供参考
在线演示：
http://map.qunee.com/beijing_subway.html
数据来源为：http://www.bjsubway.com/subwaymap/station_map.html
因为代码非常简单，只有一百来行，所以这里就不多赘述，直接访问在线示例，查看源码即可
经过漫长的小幅升级，Qunee for HTML5最新版本来到了V2.6，主要修复了一些bug，另外增加了一些示例
欢迎升级或者申请试用: http://www.qunee.com
1、修复的bug
修复了IE下创建连线交互参考线绘制存在的问题
修复了IE下画布获取焦点时滚动条会跳动的问题
修复IE, Edge下框选group时出现的异常
修复了起始和结束节点重合时，导致连线捆绑曲线出现异常的问题
修复svg图标的节点,连线端点不到图片边缘的问题
解决Chrome最小字体限制
…
2、增加缩略图示例
3、增加放大镜示例
http://demo.qunee.com/#Magnifying Glass
4、增加延迟加载的示例
http://demo.qunee.com/#Expanded TreeLayout
5、增加新的地图示例
http://map.qunee.com/tv_tower/
graph editor项目一直在修改中，在线示例也一直保持更新，最近我们对项目目录做了梳理，并整理了更多demo，更新了说明文档，提交到了github，以方便用户提取，对于github访问有困难的用户可以通过邮件（support#qunee.com）向我们索取项目代码
项目地址：https://github.com/samsha/graph.editor
更新说明
1、去除了bower包管理，改成直接引用相关的类库文件
由于graph.editor用到的第三方类库不多，依赖性也不高，包管理的必要性不大，所以直接将相关类库文件放在libs/目录中，不需要bower install，直接拿过来就可以运行示例，省去了install的麻烦
2、增加了更多的demo
graph.editor目前还不是一个完整的产品，很多特性都需要用户自己扩展来满足，提供更多示例参考有助于用户学习使用
3、更新了外观样式，增加了属性面板编辑等更多特性
Qunee makes some integration to Mouse, Key and TouchEvent. In order to facilitate the operation, it retains some original events and expands some other events.
KeyEvent
- onkeydown – keydown event
MouseEvent or TouchEvent
There are some integration made to the original MouseEvent or TouchEvent, some of which are unique to desktop browsers, like #onmousewheel; while some others of which are unique to mobile devices, like #onpinch.
- onclick – click event
- ondblclick – dblclick event
- onstart – mousedown event or touchdown event
- onrelease – mouseup event or touchup event
- startdrag – dragstart event
- ondrag – dragmove event
- enddrag – dragend event
- onlongpress – lonpress event, mousedown or touchdown for a certain time
- onmousewheel – mouse wheel, unique to desktop browsers
- startpinch – pinchstart event, unique to mobile devices
- onpinch – pinchmove event, unique to mobile devices
- endpinch – pinchend event, unique to mobile devices
- onmousemove – mousemove event
New Types of Events Added by V2.5
- onmousedown – mousedown event
- onmouseup – mouseup event
- onstart2 – rbuttondown
- onrelease2 – rbuttonup
- startdrag2 – rbutton dragstart event
- ondrag2 – rbutton dragmove event
- enddrag2 – rbutton dragend event
- onevent – all events
- accept – used for judging the response event
Interaction Events Expansion
The interaction events listed above are not all original MouseEvent or KeyEvent, but after encapsulation or improvement. For example, original mouseclick event makes no distinction between click and dblclick and may be triggered during the mousemove event. Graph components avoid all these problems.
Click and dblclick event – click, dblclick
Dblclick event will not trigger click event. System will cancel the event if mouseclick slide exceeds a certain distance, which is also applicable to mobile devices.
Longpree event – longpress
Mouseclick or touchdown lasts a certain time will both trigger the longpress event.
Example:
graph.onclick = function(evt){
Q.log(‘click’);
}
graph.ondblclick = function(evt){
Q.log(‘double click’);
}
graph.onlongpress = function(evt){
Q.log(‘long press’);
}
|
Onstart and onrelease events
Qunee expands a set of start and release events to denote the start and end of lbutton click or touch interaction events, which are easily to be confused with mousedown and mouseup events. Usually, these two sets of events appear simultaneously. However, they are not exactly the same. We prefer to recommend the former one. Reasons are as follows:
1、start / release is applicable to both mouse and touch interaction
After blocking some acquiescent touch interaction events, mouseup and mousedown events will typically not be triggered during touch interaction. Only during touchstart, touchend or multi-touch event, touchstart and touchend event may be triggered several times. Under such circumstance, it is inconvenient to use the original touchevent directly. However, start / release event can avoid these problems effectively. Start event is triggered when touch starts and release event when all touch points are released.
2、start / release can distinguish left and right button
On desktop browser, start and release event are of significance. These two events can be triggered only when left button is clicked. If the right button is clicked, start2 and release2 event will be triggered. And the original mousedown event can be triggered whenever the left, middle or right button is clicked;
3、start / release event appear in a pair
The mousedown and mouseup event may not appear in a pair even monitored on the same <div>. If the event is intercepted or stops spreading, it may occurs that only mousedown event appears while mouseup event not. At this time, the start and release event can be more secure.
DragEvent
Three steps for drag event operation: start, drag, release, specific incorporations of different devices are as follows:
Desktop browser: mousedown–>mousemove–>mouseup
Mobile device: touchdown–>touchmove–>touchup or out of screen
Five events triggered during the whole drag event: onstart, startdrag, ondrag, enddrag, onrelease
V2.5 adds right button drag event to achieve the right button sselection function. There are five things will be triggered during the right button drag event: onstart2, startdrag2, ondrag2, enddrag2, onrelease2.
Interaction Response Interception
V2.5 adds two functions as follows:
- onevent – all events
onevent function can respond to all types of events and deal with them uniformly within itself.
graph.addCustomInteraction({
onevent: function (type, evt, graph) {
Q.log(type)
}
})
|
- accept – used for judging the response event
This function is used for judging the response event. If we hope some specific interactive monitor to respond under a certain circumstance, we can control such logic to activate or cancel rbutton selection function through accept function, like rbutton selection interaction of Graph works acquiescently when graph.enableRectangleSelectionByRightButton !== false.
Example for rbutton selection event:
var RectangleSelectionInteractionByRightButton = {
accept: function(type, evt, graph){
return graph.enableRectangleSelectionByRightButton !== false;
},
startdrag2: function(evt, graph){
//...
},
ondrag2: function(evt, graph){
//...
},
enddrag2 : function(evt, graph) {
//...
},
}
|
Multi-touch event
As for mobile devices backing multi-touch operation, Graph components support multi-touch operation, like zooming the page through pinch event or translation through swipe event.
Parameters in the subjects of pinch event
graph.onpinch = function(evt, graph){
evt.dScale;//change value of scaling
evt.center;//scaling center
}
|
Reference code for pinch event to zoom pages
onpinch: function(evt, graph){
this._start = true;
var dScale = evt.dScale;
if(dScale && dScale != 1){
var p = graph.globalToLocal(evt.center);
graph.zoomAt(dScale, p.x, p.y);
}
}
|
List of Interaction Events
Use the table below as a reference, know more about the purpose or application of the encapsulation of interaction events by Graph events, comprehend the peculiar characteristics of different desktop platforms and mobile devices relatively, and find out the unique attribute of different event subjects.
Qunee for HTMl5 V2.5 beta2 is launched. This version makes a great change on the kernel, adopts new 2D render engines, adds paint delay function, and improves the browsing experience of canvas by a large margin. It also reconstructs the process of MouseEvent, KeyEvent, and TouchEvent interaction, adds right button selection function, improves multi-touch interaction, as well as adds more interception of customized events.
1. New render engine and transformation matrix, adding paint delay function, shortening interaction response time, which are more salient on pad devices
Q.Graph#pauseRendering: function(pause, force){}
Q.Graph#delayedRendering
Below is the contrast effect of opening or closing the rendering delay function as a large amount of graphics primitives ( 50 thousand) are under zooming interaction. When rendering delay function is closed, graph.delayedRendering = false, the interface freezes a little bit.
When the rendering delay function is opened, graph.delayedRendering = true, the interface will respond promptly. But the interface will display blank if it is zoomed down.
2. Adding new interaction monitor events and achieving right button selection function
New types of events in V2.5
onmousedown – mousedown event
onmouseup – mouseup event
onstart2 – right button(rbutton) down event
onrelease2 – rbuttonup event
startdrag2 – rbutton dragstart event
ondrag2 – rbutton dragmove event
enddrag2 – rbutton dragend event
onevent – all events
accept – used for judging response event
adding right button selection interaction device
Q.RectangleSelectionInteractionByRightButton
Whether start the rbutton selection interaction or not
Q.Graph#enableRectangleSelectionByRightButton
The effect of rbutton selection interaction
3. Adding limited bound attribute of canvas to achieve the function of canvas visualisation in designated area
Q.Graph#limitedBounds
4. Renovating ScrollBar.js’s bug, synchronising the change of canvas viewpoint and the state of scroll bar
5. Adding examples of pictures as canvas’s background
6. Demo adds i18n supported by both Chinese and English
7. Renovating some bugs and improving detailed experiences
Qunee for HTMl5 V2.5 beta2版本正式发布,此次版本内核改动较大,采用了新的2D渲染引擎,增加了延迟绘制功能,大幅改善画布的浏览体验,此外重构了鼠标键盘以及触控交互监听处理,增加右键框选功能,改善了多点触控交互,增加了更多定制事件监听
1. 新的渲染引擎和变换矩阵,增加延迟绘制,缩短交互响应时间，平板设备上效果更加明显
Q.Graph#pauseRendering: function(pause, force){}
Q.Graph#delayedRendering
下面是大数据量（五万图元）缩放交互时，关闭和开启延迟渲染的对比效果
关闭延迟渲染，graph.delayedRendering = false，界面略有卡顿
启用延迟渲染, graph.delayedRendering = true，界面及时响应，但是缩小时，画布会出现空白
2. 增加新的交互监听事件,实现右键框选功能
V2.5增加的事件类型
onmousedown – 鼠标点击事件
onmouseup – 鼠标释放事件
onstart2 – 右键按下
onrelease2 – 右键释放
startdrag2 – 右键拖拽开始事件
ondrag2 – 右键拖拽事件
enddrag2 – 右键拖拽结束事件
onevent – 所有事件
accept – 用于判断是否响应事件
增加右键框选交互器
Q.RectangleSelectionInteractionByRightButton
是否启用右键框选交互
Q.Graph#enableRectangleSelectionByRightButton
右键框选效果
3. 增加画布限制范围属性,可以实现画布在指定范围内显示的功能
Q.Graph#limitedBounds
4. 修复了ScrollBar.js的bug,画布视口变化时,同步滚动条状态
5. 增加了图片做画布背景的示例
6. demo增加i18n中英文支持
7. 修复一些bug，改善细节体验
交互事件列表
参看下面的表格，了解Graph组件中对交互事件封装的目的与用途，掌握不同桌面平台与手持设备上的各自特点，了解不同事件对象提供的特殊属性