graph editor项目一直在修改中，在线示例也一直保持更新，最近我们对项目目录做了梳理，并整理了更多demo，更新了说明文档，提交到了github，以方便用户提取，对于github访问有困难的用户可以通过邮件（support#qunee.com）向我们索取项目代码
项目地址：https://github.com/samsha/graph.editor
更新说明
由于graph.editor用到的第三方类库不多，依赖性也不高，包管理的必要性不大，所以直接将相关类库文件放在libs/目录中，不需要bower install，直接拿过来就可以运行示例，省去了install的麻烦
graph.editor目前还不是一个完整的产品，很多特性都需要用户自己扩展来满足，提供更多示例参考有助于用户学习使用
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
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.
New Types of Events Added by V2.5
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 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)
}
})
|
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渲染引擎,增加了延迟绘制功能,大幅改善画布的浏览体验,此外重构了鼠标键盘以及触控交互监听处理,增加右键框选功能,改善了多点触控交互,增加了更多定制事件监听
Q.Graph#pauseRendering: function(pause, force){}
Q.Graph#delayedRendering
下面是大数据量（五万图元）缩放交互时，关闭和开启延迟渲染的对比效果
关闭延迟渲染，graph.delayedRendering = false，界面略有卡顿
启用延迟渲染, graph.delayedRendering = true，界面及时响应，但是缩小时，画布会出现空白
V2.5增加的事件类型
onmousedown – 鼠标点击事件
onmouseup – 鼠标释放事件
onstart2 – 右键按下
onrelease2 – 右键释放
startdrag2 – 右键拖拽开始事件
ondrag2 – 右键拖拽事件
enddrag2 – 右键拖拽结束事件
onevent – 所有事件
accept – 用于判断是否响应事件
增加右键框选交互器
Q.RectangleSelectionInteractionByRightButton
是否启用右键框选交互
Q.Graph#enableRectangleSelectionByRightButton
右键框选效果
Q.Graph#limitedBounds
参看下面的表格，了解Graph组件中对交互事件封装的目的与用途，掌握不同桌面平台与手持设备上的各自特点，了解不同事件对象提供的特殊属性
经过半年的迭代更新，在多个2.3.＊版本之后，Qunee for HTML5 V2.4beta版本正式发布，此次更新修复了一些bug，增加了新的示例，欢迎访问和升级
在线访问地址：http://demo.qunee.com/#OTDR Demo
在线访问地址：http://demo.qunee.com/#Grid Background
在线访问地址：http://demo.qunee.com/#China Map
制图行业，地图的美观是重要的指标，不是GIS系统直接配色设置格式就可以出图的，往往还需要细节调整，甚至出版社更多时候用的是corel draw这样的图形格式，完全没有传统地图坐标的概念，同样的SVG作为一种标准矢量图形格式，也是地图最常见的输出格式，Qunee示例中就有将SVG地图转换成Qunee地图的例子，但由于SVG是一种非常复杂的图形格式，将SVG百分百还原成基于Canvas技术的Qunee目前还没有通用的解决办法，通常都需要定制解析，下面是一张韩国地图的例子，自己解析SVG的path元素，转换成Qunee的Path对象，最终得到与SVG原图一样的效果，可作为参考
