经过连日奋战，Qunee for HTML5 V1.7 新版本终于发布了，丰富了更多细节和功能，在线演示改版，全面支持retina屏幕，欢迎访问和升级：http://demo.qunee.com 支持SVG图标 更多的图片支持，更好的渲染效果，更快的运行效率 增加子网功能 基于jQuery的拓扑图插件 只需几行代码，就可以配置一个拓扑图编辑器，http://demo.qunee.com/editor/1.7/
阅读更多HTML简单布局 - layout.border
经常用到上下左右，中间填充满这样的布局，在java swing中有BorderLayout，HTML中通常使用CSS来实现布局，但要实现border layout这样的效果有些麻烦，很多第三方实现，比如easyui, extjs，功能过于强大，我只是想要一个简单的布局而已，于是自己写了这段js，支持嵌套布局以及小功能，方便团队使用，项目地址：https://github.com/samsha/layout.border 简介 简单的布局效果，实现上下左右，中间充满的布局 依赖 需要用到jquery 示例 首先引入jquery.js和layout.border.js <script …
阅读更多Qunee for HTML5图形组件迎来小幅更新，修复了一些bug，欢迎升级和访问
阅读更多原文：http://www.html5rocks.com/en/tutorials/canvas/inspection/ 翻译：blog.qunee.com 介绍 不管你是使用2D 还是WebGL，任何用过的人都知道很难调试，使用Canvas通常需要长长的难以跟踪的调用列表 function draw() { context.clearRect(0, 0, 258, 258); context.fillStyle = “#EEEEEE”; context.beginPath(); context.arc(129, 129, 127, 0, 6.28, true); context.closePath(); …
阅读更多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 中每个图元节点上可以挂载多个 UI 控件，支持9X9=81种相对位置，可以实现单节点上多个 ui 元素的排列和布局，另外每个 ui 元素都可以绑定图元属性，这使得信息可以实时更新，本文将结合最近客户提到的需求，使用 Qunee1.6 beta版本，实现在拓扑图中实现设备信息的显示 需求分析 网络设备拓扑图，默认设备为普通节点，双击时展开，显示CPU，内存，流量等信息，使用柱状图和不同颜色的文字来展示，再双击变回普通节点 这里需要定制节点，普通模式下，节点包含图标和文字，展开模式下， …
阅读更多继续来说编辑器的需求，前面介绍了拖拽创建节点、以及连线的方法，并加入到了其后的 Qunee 类库，实际应用中需要更多功能，Qunee 的拓扑图编辑器也在逐渐完善，一方面增加多种编辑交互，一方面提供数据导入导出，同时也在摸索编辑器的整体界面设计和前端开发框架 拖拽创建节点 延续之前提供的功能，增加更多可配置选项（可设置节点类型，样式和属性），支持按住shift快捷键，直接拖入到分组内 新增多种交互模式 创建连线交互 Q.Consts.INTERACTION_MODE_CREATE_SIMPLE_EDGE = "create.simple.edge"; …
阅读更多