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> …
阅读更多结合OpenLayers实现地图背景的拓扑图
地图应用分三种级别：示意地图（Map Chart），地图（Map），地理信息系统（GIS），第一种通常使用相对坐标系，后两种则为真实的地理坐标，其中第二种以谷歌地图为代表，日常生活中普遍使用，后一种则为专业的GIS，专业领域做拓扑分析、流域分析时用到，示意地图我们已经有很多例子，比如[美国大选示例](http://demo.qunee.com/#U.S. Presidential Election 2012)、[中国地图示例](http://demo.qunee.com/#China Map)等，今天介绍第二种地图的应用，结合OpenLayers和谷歌地图实现地图的拓扑图应用：demo.qunee.com/map/map.html …
阅读更多Qunee for HTML5 v1.3 已发布，增加总线型布局，提供文本图元，增强了编辑功能，欢迎联系升级 在线演示：http://demo.qunee.com v1.3更新内容 鱼骨型总线 可设定连线走向，实现不同的总线型效果 Q.Text图元类型 提供大小调整和对齐方式功能，实现更丰富的文字呈现效果 编辑功能 节点大小调整与旋转 多行文字编辑 路径编辑 拖拽创建节点、连线 其他功能 打印预览 左上角为原点的坐标系支持
阅读更多总线型拓扑图
总线布局是拓扑图中的一种典型结构，总线（Bus），是计算机各种功能部件之间传送信息的公共通信干线，总线和与之连接的设备一起组成一种拓扑结构，这种图称为总线型拓扑图 总线拓扑图示例 Qunee中定义了Bus类型图元，可以通过路径描述一条总线，与总线相连的节点连线，成正交线性布局 示例 var graph = new Q.Graph(canvas); graph.zoomToOverview(); var idIndex = 0; function createNodeLinkToBus(bus, x, y, angle){ var node = graph.createNode("-" + idIndex, x, …
阅读更多多位客户提到编辑器的需求，譬如拖拽创建节点，文本编辑，连线编辑，尺寸编辑等等，编辑是一个系列话题，将陆续作介绍，本章介绍拖拽创建节点与简单的连线编辑交互 拖拽创建节点 拖拽创建节点，以前要实现拖拽，需要监听全局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…… 都是老外开发的产品，类库巨大，售价昂贵，技术支持是个问题，那么有没有一种轻巧、干净、国产的 …
阅读更多