Qunee for HTML5 V1.6正式发布，修复了一些 BUG，增加了滚动条支持，改进了编辑器，增加了JSON 导入导出、告警冒泡、连线流动，UI 定制等扩展示例，欢迎访问并联系升级 导航面板 增加了滚动条导航模式，加上之前的导航按钮模式，以及去除导航面板的情况，出现了三种导航模式，并在Graph中提供了navigationType属性进行切换，以适用于不同的应用场景，默认使用滚动条模式 以下代码用于设置拓扑图使用导航按钮 graph.navigationType = Q.Consts.NAVIGATION_BUTTON; 滚动条模式 - Q.Consts.NAVIGATION_SCROLLBAR 滚动条模式符合传统的导航模 …
阅读更多前面介绍了上海地铁图的绘制，最近有客户提出了新的需求：双车道，并显示路网状态信息。经过一番研究，在原地铁图基础上做了扩展实现 交通图介绍 路况状态在GIS系统中广泛应用，谷歌地图，百度地图都有实时路况的功能，太复杂并非好事，就像地铁图，按真实经纬度呈现反而不够直观，交通图、路网也是如此，去掉无关信息，将有限的数据（路，收费站，路况）展现出来，成为一种解决方案 百度地图中的路况信息 双车道的绘制 来看具体实现，原来的地铁图是一条线表示，改用双线绘制，可表现来往的方向，canvas并没有双线线形，需要自己实现 三种连接点类型 双线的算法类似2d中的stroke算法，stroke拐点有三种方式：尖的、圆角、斜面，考虑到路网拐角不会太尖， …
阅读更多web应用越变的庞大，模块化越显得重要，尤其Nodejs的流行，Javascript不限用于浏览器，还用于后台或其他场景时，没有Class，没有Package的Javascript语言变得难以管理，于是出现CommonJS项目，提出了一些规范模块化的写法，在Nodejs中普遍应用，同样浏览器端也出现了类似的解决方案，并结合浏览器异步加载的特性，有RequireJS提出的AMD（Asynchronous Module Definition）规范，以及SeaJS提出的CMD（Common Module Definition）规范，两者都实现Javascript了模块化定义的APIs，各有异同，下面将分别使用两种方案，实现Qunee组件的 …
阅读更多HTML第三方组件种类繁多，小到按钮，工具栏，大到树图，表格，布局框架，以及各种图表，每种组件都有其优势，比如EasyUI的树和表格，Bootstrap的表单，Qunee的拓扑图等，一个应用需要整合多种组件，本文将以一个示例来介绍EasyUI与Qunee组件的同步使用 引入相关js和css文件 本例用到jquery, bootstrap, easyui和qunee，分别引入相关文件 <script type="text/javascript" src="http://demo.qunee.com/js/jquery/jquery.min.js"></script> …
阅读更多传统的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部分应该 …
阅读更多原文：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 …
阅读更多图形组件的基础是图形，图形的基础是2D，如形状，路径片段，渐变填充，边框等，SVG中每个图形要素都有对应的标签元素，Canvas中则提供了一些绘制函数，路径和形状的管理需要自己实现，Qunee组件中提供了丰富的基本图形 基本图形 Qunee组件中内置提供了丰富的基本图形，可通过Q.Shapes类来获取与使用 使用基本图形 Qunee中的基本图形可以在Q.Shapes中获取，传入图形名称和大小信息，返回图形路径 var shape = Q.Shapes.getShape(Q.Consts.SHAPE_ARROW_4, 100, 100); 得到图形对象后，可以设置给节点对象，显示在画布中 var shape = …
阅读更多客户常常提到思维导图，喜欢它的结构展示方式，和交互的友好，从图论的角度看，思维导图本质上是一种树，有一个根节点（主题）出发，联想到其他话题，于是分支开花，再分支，有时候也会构成网络结构，由子分支联想到另一个已有分支，但通常不破坏原有结构，常见的思维导图如下 XMind制作的思维导图 制作思维导图应用 Qunee组件本身支持树形布局，所以对于思维导图的大体结构是可以呈现的，到细节的地方就比较多了，包括线条的走向，节点的样式，布局交互，自动吸附，双击编辑等等，本示例没办法面面俱到，所以参照XMind的效果，只实现了部分功能，供用户参考和扩展 连线定制 默认连线为直线，通过定制EdgeUI可以实现曲线效果 function …
阅读更多