HTML5绘制设备面板

客户提到设备面板的需求,qunee并没有Equipment这样的图元,但借助父子关系和跟随关系设置,可以实现类似功能,并完成下面的例子

设备面板

EasyUI + Qunee 组件同步示例

HTML第三方组件种类繁多,小到按钮,工具栏,大到树图,表格,布局框架,以及各种图表,每种组件都有其优势,比如EasyUI的树和表格,Bootstrap的表单,Qunee的拓扑图等,一个应用需要整合多种组件,本文将以一个示例来介绍EasyUI与Qunee组件的同步使用

Qunee + EasyUI 同步示例

结合OpenLayers实现地图背景的拓扑图

地图应用分三种级别:示意地图(Map Chart),地图(Map),地理信息系统(GIS),第一种通常使用相对坐标系,后两种则为真实的地理坐标,其中第二种以谷歌地图为代表,日常生活中普遍使用,后一种则为专业的GIS,专业领域做拓扑分析、流域分析时用到,示意地图我们已经有很多例子,比如美国大选示例中国地图示例等,今天介绍第二种地图的应用,结合OpenLayers和谷歌地图实现地图的拓扑图应用:demo.qunee.com/map/map.html

OpenLayers + Qunee

Hello World WebGL示例

原文:http://www.sw-engineering-candies.com/snippets/webgl/hello-world

这不是一个平常看到的Hello World示例,因为他不只是简单的打印”Hello World”,这个WebGL示例包含了很多引用代码,但这对于WebGL来说是很典型的,写一个最简单的WebGL应用无法体现WebGL的价值

你会注意到很多代码需要本地WebGL,如果你使用three.js这样的类库,引用代码会减少到最少,在这些文章中你会看到three.js示例:Experimental Visualization of Artificial Neural Network with WebGL or Extremely Fast and Simple WebGL Motion Detector to Rotate 3D Graphic

前提条件&预期结果

目前支持WebGL得浏览器还很少(参见:Can I use WebGL? ),下面的例子在Chrome 16 – 23 for win32以及firefox for android 17下做了测试,如果你的浏览器不支持webGL,你会看到下面的警告

Your browser doesn’t appear to support the HTML5 <canvas>element.

运行效果:

WebGL - hello world

HTML组件的交互事件设计

传统的HTML事件监听方式

通常使用on***对HTML元素添加事件监听,比如

button.onclick = function(evt){
  console.log(evt);
}

很自然的,用户在使用Qunee组件时也会想到这种用法,试图直接在Node上添加onclick监听,结果出现问题,正确的写法应该是这样

graph.onclick = function(evt){
  var element = evt.getData();
  Q.log(element);
}

Qunee拖拽事件过程

Qunee for HTML5 v1.2版本发布

Qunee for HTML5 v1.2版本正式发布了,此次更新增加了染色、分组图元、导出预览等重要新功能,增加了四个示例,敬请升级,在线演示:http://demo.qunee.com

Qunee 1.2

拓扑图编辑器(1)

多位客户提到编辑器的需求,譬如拖拽创建节点,文本编辑,连线编辑,尺寸编辑等等,编辑是一个系列话题,将陆续作介绍,本章介绍拖拽创建节点与简单的连线编辑交互

拖拽创建节点

拖拽创建节点,以前要实现拖拽,需要监听全局mousemove事件,复制拖拽元素,实现drop效果,现在HTML5提供了新的拖拽事件,处理起来变得很容易

创建连线交互

Qunee中的基本图形与箭头

图形组件的基础是图形,图形的基础是2D,如形状,路径片段,渐变填充,边框等,SVG中每个图形要素都有对应的标签元素,Canvas中则提供了一些绘制函数,路径和形状的管理需要自己实现,Qunee组件中提供了丰富的基本图形
Qunee默认图形的效果

图形与箭头