多位客户提到编辑器的需求，譬如拖拽创建节点，文本编辑，连线编辑，尺寸编辑等等，编辑是一个系列话题，将陆续作介绍，本章介绍拖拽创建节点与简单的连线编辑交互 拖拽创建节点 拖拽创建节点，以前要实现拖拽，需要监听全局mousemove事件，复制拖拽元素，实现drop效果，现在HTML5提供了新的拖拽事件，处理起来变得很容易 创建画布面板canvas，并在左侧创建一个工具箱toolbox，设置canvas监听drop和dragover事件，工具箱中的图片监听dragstart事件，并设置为可拖拽 <div id="canvas" ondrop="drop(event)" …
阅读更多传统的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部分应该 …
阅读更多Qunee for HTML5 v1.2版本正式发布了，此次更新增加了染色、分组图元、导出预览等重要新功能，增加了四个示例，敬请升级，在线演示：http://demo.qunee.com, 官方网站：http://qunee.com Qunee for HTML5是一套基于HTML5的拓扑图图组件 使用HTML5 Canvas技术，绘制清新、流畅的网络图，可用于社交网络图、拓扑图、流程图、地图等需求， JS组件封装，藏繁琐于简洁，轻松构建优雅的互联网应用与企业应用，让数据的在线可视化变得容易 v1.2更新 增加Q.Group图元 改进连线样式 增加图片颜色渲染，支持多种混合模式 画布导出预览，支持指定范围和缩放比例输出
阅读更多基于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 …
阅读更多图形组件的基础是图形，图形的基础是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 …
阅读更多地图是一种普遍应用，按准确度分精确地图（GIS）和示意地图（MapChart），前者支持各种地图投影与坐标系，譬如ArcGIS，后者使用相对坐标系，或者支持简单的WGS84经纬网坐标系，比如ILOG Elixir地图组件，示意地图再按图片类型分，可分为：栅格地图与矢量地图，Qunee组件适合制作矢量示意地图。 中国地图示例 数据格式 数据格式为JSON，里面包含三种类型：paths、points、labels，分别对应地图区块，地图点图元，文本标签 { paths:{ "0": { "path": "M 377.651,468.883 C 378.90893,469.42985 …
阅读更多