之前借助leaflet + qunee实现了地图拓扑图，同样使用leaflet的有个更专业的地图应用：Mapbox，可以定制出简单、专业、漂亮的地图，在传统地图服务商（Google，Nokia, Apple …）之外，有了更好的选择，Mapbox Studio是一款开源软件，使用了大量的web技术：Mapnik, node.js, backbone.js, leaflet, codemirror …… 其客户端本身就是一个webapp + Chrome，跨平台，有良好的交互体验，值得前端开发者学习和参考 原 …
阅读更多经过连日奋战，Qunee for HTML5 V1.7 新版本终于发布了，丰富了更多细节和功能，在线演示改版，全面支持retina屏幕，欢迎访问和升级：http://demo.qunee.com 支持SVG图标 更多的图片支持，更好的渲染效果，更快的运行效率 增加子网功能 基于jQuery的拓扑图插件 只需几行代码，就可以配置一个拓扑图编辑器，http://demo.qunee.com/editor/1.7/
阅读更多Qunee for HTML5 V1.6正式发布，修复了一些 BUG，增加了滚动条支持，改进了编辑器，增加了JSON 导入导出、告警冒泡、连线流动，UI 定制等扩展示例，欢迎访问并联系升级 导航面板 增加了滚动条导航模式，加上之前的导航按钮模式，以及去除导航面板的情况，出现了三种导航模式，并在Graph中提供了navigationType属性进行切换，以适用于不同的应用场景，默认使用滚动条模式 以下代码用于设置拓扑图使用导航按钮 graph.navigationType = Q.Consts.NAVIGATION_BUTTON; 滚动条模式 - Q.Consts.NAVIGATION_SCROLLBAR 滚动条模式符合传统的导航模 …
阅读更多图论中边是重要元素，它连接各个顶点构成拓扑图，有向图中，边具有方向性，在画布中表现为箭头，在实际应用中，边可以代表链路，链路上不只是有方向，还有流量，信号种类等信息，光用箭头表现力就不够了，可增加线条线型，以及流动效果来体现，这里介绍 Qunee 1.6 中线条流动效果的实现 虚线流动效果 虚线流动效果在[连线示例](http://demo.qunee.com/#Edge Demo)中有演示，使用虚线偏移量样式，不断增大，实现线条的流动 虚线流动代码 var offset = 0; var index = 0; var timer = setInterval(function(){ offset += -1; // …
阅读更多继续来说编辑器的需求，前面介绍了拖拽创建节点、以及连线的方法，并加入到了其后的 Qunee 类库，实际应用中需要更多功能，Qunee 的拓扑图编辑器也在逐渐完善，一方面增加多种编辑交互，一方面提供数据导入导出，同时也在摸索编辑器的整体界面设计和前端开发框架 拖拽创建节点 延续之前提供的功能，增加更多可配置选项（可设置节点类型，样式和属性），支持按住shift快捷键，直接拖入到分组内 新增多种交互模式 创建连线交互 Q.Consts.INTERACTION_MODE_CREATE_SIMPLE_EDGE = "create.simple.edge"; …
阅读更多之前我们采用过Openlayers+Qunee的方案，实现地图拓扑图，鉴于Openlayers是一种古老项目，略显臃肿，面向更新的前端地图方案，在客户的介绍下，我们找到了leaflet - 基于HTML5的轻量地图客户端方案，结合Qunee使用，以及第三方插件，实现更加轻快的地图拓扑图应用 Leaflet介绍 leaflet是一个开源软件，作者在乌克兰，在移动设备上的有良好的体验，比较新和现代的地图客户端，类库压缩后只有33k，非常小巧，这一点让qunee都相形见绌，先看一个leaflet的入门示例 官方示例 // create a map in the "map" div, set the view to a …
阅读更多Qunee有一个上海地铁图的例子，有客户希望转成mobile app，考察过android的webview，以及PhoneGap等多种Hybrid App方案后，最后选择使用ionic，准确的说是ionic + PhoneGap + Qunee ionic是一种基于HTML5创建Hybrid应用的前端框架，借助phoneGap + angularJS实现一套跨平台，轻量的移动UI方案，本文将介绍借助ionic实现移动版Qunee上海地图的示例 背景知识 安装ionic所需软件环境 - java, android sdk等 ionic实际上是集大成者，借助了多种技术，需要先安装好依赖的程序，比如nodejs, java, ADT, …
阅读更多Qunee for HTML5 v1.5正式发布，新版本做了大量优化，重构了底层UI渲染机制，缩短图形加载时间20% - 40%，统一了自动布局器接口，丰富了选中效果，增加了平移缩放动画，增加了搜索功能，增加大图片缓存，修复了低版本android下的显示问题等，欢迎升级和试用 在线演示：demo.qunee.com 升级申请：qunee.com/#try 性能优化 授权版本实现上万图元，三秒内加载与绘制 以下为Safari 6.1.5 for mac 性能测试报表 改进自动布局 统一了自动布局类，使得动态布局也可一次性完成布局 改进弹簧布局算法，大幅度缩短布局时间，支持五千图元动态布局 增加选中效果 增加平移缩放动画 平移，缩放等交 …
阅读更多