Qunee for HTML5 v1.3 已发布，增加总线型布局，提供文本图元，增强了编辑功能，欢迎联系升级 在线演示：http://demo.qunee.com v1.3更新内容 鱼骨型总线 可设定连线走向，实现不同的总线型效果 Q.Text图元类型 提供大小调整和对齐方式功能，实现更丰富的文字呈现效果 编辑功能 节点大小调整与旋转 多行文字编辑 路径编辑 拖拽创建节点、连线 其他功能 打印预览 左上角为原点的坐标系支持
阅读更多传统的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组件中Graph对象是View，Node，Edge则是Model，原则上Model部分应该 …
阅读更多基于HTML5的网络拓扑图(1)
什么是网络拓扑 网络拓扑，指构成网络的成员间特定的排列方式。分为物理的，即真实的、或者逻辑的，即虚拟的两种。如果两个网络的连接结构相同，我们就説它们的网络拓扑相同，尽管它们各自内部的物理接线、节点间距离可能会有不同。 - 维基百科 网络拓扑图的绘制 很多人用visio绘制网络拓扑图，非常精美，但只能静态示意，也有些传统的拓扑图中间件，基于Java、flex或者Silverlight技术，能够动态显示，只是界面略显沉重，于是有人尝试纯Web技术的图形组件，其中有不少佼佼者如：mxgraph, yfiles…… 都是老外开发的产品，类库巨大，售价昂贵，技术支持是个问题，那么有没有一种轻巧、干净、国产的 …
阅读更多原文：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 …
阅读更多客户常常提到思维导图，喜欢它的结构展示方式，和交互的友好，从图论的角度看，思维导图本质上是一种树，有一个根节点（主题）出发，联想到其他话题，于是分支开花，再分支，有时候也会构成网络结构，由子分支联想到另一个已有分支，但通常不破坏原有结构，常见的思维导图如下 XMind制作的思维导图 制作思维导图应用 Qunee组件本身支持树形布局，所以对于思维导图的大体结构是可以呈现的，到细节的地方就比较多了，包括线条的走向，节点的样式，布局交互，自动吸附，双击编辑等等，本示例没办法面面俱到，所以参照XMind的效果，只实现了部分功能，供用户参考和扩展 连线定制 默认连线为直线，通过定制EdgeUI可以实现曲线效果 function …
阅读更多地图是一种普遍应用，按准确度分精确地图（GIS）和示意地图（MapChart），前者支持各种地图投影与坐标系，譬如ArcGIS，后者使用相对坐标系，或者支持简单的WGS84经纬网坐标系，比如ILOG Elixir地图组件，示意地图再按图片类型分，可分为：栅格地图与矢量地图，Qunee组件适合制作矢量示意地图。 中国地图示例 数据格式 数据格式为JSON，里面包含三种类型：paths、points、labels，分别对应地图区块，地图点图元，文本标签 { paths:{ "0": { "path": "M 377.651,468.883 C 378.90893,469.42985 …
阅读更多某市政项目用到地铁图展示，展示地铁站点以及相关信息流，使用Qunee组件可以很好的解决这类需求，做出优美的展现，下面以上海2012地铁图为例，效果如下： 示例讲解 首先需要解决数据问题，可以从维基百科或者上海地铁官网中获取，不过也免不了人工，要达到良好的显示效果，需要不只要记录站点的位置，还需要设置文本标签的理想位置，有时为了避免文字叠加，需要设置旋转角度……总之事在人为，想想办法，最终解决了数据问题，再加上Qunee图形组件的强大展示效果，做出来可以交互的在线地铁图 数据格式 采用JSON格式数据，分三种类型：文本标签、站点、地铁线 总的结构如下： { "labels" : [ ... …
阅读更多js运行效率在提升 编程语言的效率是前提，js自然比不上native的C语言效率，所以Canvas效率无疑比不上原生的2D图形绘制，但是js效率的提升是有目共睹的，以js与as为例，基本操作（运算操作，集合操作，Map操作）已经超越ActionScript，尤其是Google Chrome浏览器与as拉开了不小的距离，甚至某些方面超过java. Canvas绘制效率不低 Canvas没有dom操作，只是简单的2D绘制，所以效率不低，Chrome浏览器下，每秒可绘制五万个基本图形元素（圆形，矩形或者线条），如果有阴影效果会慢很多，总的来说上万元素的绘制还是很轻松的 适合简单应用 因为简单，做一些像素处理，2D绘制，小游戏啥的还是很方便 …
阅读更多