发表于 & 归档在 HTML5.

graph editor项目一直在修改中,在线示例也一直保持更新,最近我们对项目目录做了梳理,并整理了更多demo,更新了说明文档,提交到了github,以方便用户提取,对于github访问有困难的用户可以通过邮件(support#qunee.com)向我们索取项目代码

项目地址:https://github.com/samsha/graph.editor

更新说明

1、去除了bower包管理,改成直接引用相关的类库文件

由于graph.editor用到的第三方类库不多,依赖性也不高,包管理的必要性不大,所以直接将相关类库文件放在libs/目录中,不需要bower install,直接拿过来就可以运行示例,省去了install的麻烦

Screen Shot 2016-05-03 at 12.26.00 PM

2、增加了更多的demo

graph.editor目前还不是一个完整的产品,很多特性都需要用户自己扩展来满足,提供更多示例参考有助于用户学习使用

demos

3、更新了外观样式,增加了属性面板编辑等更多特性

layout_demo

发表于 & 归档在 HTML5.

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:

 1start / 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.

2start / 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;

3start / 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.

 

发表于 & 归档在 HTML5.

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.

without_delayed

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.

delayed_rendering

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

发表于 & 归档在 HTML5, 拓扑图.

Qunee for HTMl5 V2.5 beta2版本正式发布,此次版本内核改动较大,采用了新的2D渲染引擎,增加了延迟绘制功能,大幅改善画布的浏览体验,此外重构了鼠标键盘以及触控交互监听处理,增加右键框选功能,改善了多点触控交互,增加了更多定制事件监听

1. 新的渲染引擎和变换矩阵,增加延迟绘制,缩短交互响应时间,平板设备上效果更加明显

Q.Graph#pauseRendering: function(pause, force){}
Q.Graph#delayedRendering

下面是大数据量(五万图元)缩放交互时,关闭和开启延迟渲染的对比效果

关闭延迟渲染,graph.delayedRendering = false,界面略有卡顿

without_delayed

 

启用延迟渲染, graph.delayedRendering = true,界面及时响应,但是缩小时,画布会出现空白

delayed_rendering

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,改善细节体验

发表于 & 归档在 HTML5, 拓扑图.

经过半年的迭代更新,在多个2.3.*版本之后,Qunee for HTML5 V2.4beta版本正式发布,此次更新修复了一些bug,增加了新的示例,欢迎访问和升级

在线示例:http://demo.qunee.com/

官网:http://www.qunee.com

修改内容

1、改进了图片边缘算法,让线条端点更加贴近图片边缘

node_edge

2、改进GIF图片内存占有量,对于大的gif图片,内存占用量大大降低

 

3、修改了画布结构和鼠标键盘监听机制,避免了监听器导致的内存无法被释放问题

 

4、此外增加了五十多个新的API,图片翻转与镜像等,提供更多扩展和定制的可能

 

新增示例

1、OTDR光缆检测面板示例

 

在线访问地址:http://demo.qunee.com/#OTDR Demo

OTDR 光缆监测面板

2、电路图以及网格刻度背景示例

 

在线访问地址:http://demo.qunee.com/#Grid Background

网格刻度背景,电路图扩展

3、地图中,节点辐射范围的定制

在线访问地址:http://demo.qunee.com/#China Map

辐射范围

发表于 & 归档在 地图.

制图行业,地图的美观是重要的指标,不是GIS系统直接配色设置格式就可以出图的,往往还需要细节调整,甚至出版社更多时候用的是corel draw这样的图形格式,完全没有传统地图坐标的概念,同样的SVG作为一种标准矢量图形格式,也是地图最常见的输出格式,Qunee示例中就有将SVG地图转换成Qunee地图的例子,但由于SVG是一种非常复杂的图形格式,将SVG百分百还原成基于Canvas技术的Qunee目前还没有通用的解决办法,通常都需要定制解析,下面是一张韩国地图的例子,自己解析SVG的path元素,转换成Qunee的Path对象,最终得到与SVG原图一样的效果,可作为参考

韩国地图-qunee