轻量高效的拓扑图组件
zh

HTML简单布局 - layout.border

2014-11-09

经常用到上下左右,中间填充满这样的布局,在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 V1.6.3小版本更新

2014-10-31

Qunee for HTML5图形组件迎来小幅更新,修复了一些bug,欢迎升级和访问

阅读更多

译:使用Chrome开发工具调试Canvas

2014-10-19

原文: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(); …

阅读更多

伪3D机房以及热力图

2014-10-11

机房图分2D和3D,此外也有2.5D 方案,也称之为伪3D,在小型网游中比较常见,斜45度角,网格分布,运行起来比较轻量,电信机房也可以采用这种技术,通过矩阵变换,固定45度视角,选择合适的图标,可以做出不错的效果,节省3D 建模的时间,同时可以结合2D平面图,是一种不错的机房图展示方案,下面是 Qunee 实现的一些简单示例,并可以结合热力图绘制,用以反映机房的温度分布,详细示例代码可向 support#qunee.com 申请

阅读更多

Qunee for HTML5 v1.6新版本发布

2014-09-12

Qunee for HTML5 V1.6正式发布,修复了一些 BUG,增加了滚动条支持,改进了编辑器,增加了JSON 导入导出、告警冒泡、连线流动,UI 定制等扩展示例,欢迎访问并联系升级 导航面板 增加了滚动条导航模式,加上之前的导航按钮模式,以及去除导航面板的情况,出现了三种导航模式,并在Graph中提供了navigationType属性进行切换,以适用于不同的应用场景,默认使用滚动条模式 以下代码用于设置拓扑图使用导航按钮 graph.navigationType = Q.Consts.NAVIGATION_BUTTON; 滚动条模式 - Q.Consts.NAVIGATION_SCROLLBAR 滚动条模式符合传统的导航模 …

阅读更多

线条流动效果

2014-09-04

图论中边是重要元素,它连接各个顶点构成拓扑图,有向图中,边具有方向性,在画布中表现为箭头,在实际应用中,边可以代表链路,链路上不只是有方向,还有流量,信号种类等信息,光用箭头表现力就不够了,可增加线条线型,以及流动效果来体现,这里介绍 Qunee 1.6 中线条流动效果的实现 虚线流动效果 虚线流动效果在[连线示例](http://demo.qunee.com/#Edge Demo)中有演示,使用虚线偏移量样式,不断增大,实现线条的流动 虚线流动代码 var offset = 0; var index = 0; var timer = setInterval(function(){ offset += -1; // …

阅读更多

设备节点的信息展示

2014-09-04

电信网管系统中,设备的状态信息的实时展示非常重要,通常会以挂载一堆图标来展示状态或告警信息,图标展示的信息有限,有时需要更详细的面板或者图表,Qunee 中每个图元节点上可以挂载多个 UI 控件,支持9X9=81种相对位置,可以实现单节点上多个 ui 元素的排列和布局,另外每个 ui 元素都可以绑定图元属性,这使得信息可以实时更新,本文将结合最近客户提到的需求,使用 Qunee1.6 beta版本,实现在拓扑图中实现设备信息的显示 需求分析 网络设备拓扑图,默认设备为普通节点,双击时展开,显示CPU,内存,流量等信息,使用柱状图和不同颜色的文字来展示,再双击变回普通节点 这里需要定制节点,普通模式下,节点包含图标和文字,展开模式下, …

阅读更多

拓扑图编辑器(2)

2014-09-01

继续来说编辑器的需求,前面介绍了拖拽创建节点、以及连线的方法,并加入到了其后的 Qunee 类库,实际应用中需要更多功能,Qunee 的拓扑图编辑器也在逐渐完善,一方面增加多种编辑交互,一方面提供数据导入导出,同时也在摸索编辑器的整体界面设计和前端开发框架 拖拽创建节点 延续之前提供的功能,增加更多可配置选项(可设置节点类型,样式和属性),支持按住shift快捷键,直接拖入到分组内 新增多种交互模式 创建连线交互 Q.Consts.INTERACTION_MODE_CREATE_SIMPLE_EDGE = "create.simple.edge"; …

阅读更多