Qunee for HTML5 v1.4正式发布,改善了交互功能,增强了自动布局功能,增加了相关文档,调整了示例代码,以及一些细节修改和增加,是一次重要更新,欢迎联系升级 在线演示:demo.qunee.com 升级申请:qunee.com/#try 气泡布局示例 自动布局是图的重要功能,有十几种常见布局算法,目前Qunee提供:TreeLayouter, SpringLayouter, BalloonLayouter,后期逐步完善 路况图示例 用于展示各个车道路况状态 设备面板示例 Qunee开发模式 在线示例列表 演示示例做了小幅修改,增加了在线示例列表,用于提供更多Qunee相关示例
阅读更多前面介绍了上海地铁图的绘制,最近有客户提出了新的需求:双车道,并显示路网状态信息。经过一番研究,在原地铁图基础上做了扩展实现 交通图介绍 路况状态在GIS系统中广泛应用,谷歌地图,百度地图都有实时路况的功能,太复杂并非好事,就像地铁图,按真实经纬度呈现反而不够直观,交通图、路网也是如此,去掉无关信息,将有限的数据(路,收费站,路况)展现出来,成为一种解决方案 百度地图中的路况信息 双车道的绘制 来看具体实现,原来的地铁图是一条线表示,改用双线绘制,可表现来往的方向,canvas并没有双线线形,需要自己实现 三种连接点类型 双线的算法类似2d中的stroke算法,stroke拐点有三种方式:尖的、圆角、斜面,考虑到路网拐角不会太尖, …
阅读更多web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有Package的Javascript语言变得难以管理,于是出现CommonJS项目,提出了一些规范模块化的写法,在Nodejs中普遍应用,同样浏览器端也出现了类似的解决方案,并结合浏览器异步加载的特性,有RequireJS提出的AMD(Asynchronous Module Definition)规范,以及SeaJS提出的CMD(Common Module Definition)规范,两者都实现Javascript了模块化定义的APIs,各有异同,下面将分别使用两种方案,实现Qunee组件的 …
阅读更多客户提到设备面板的需求,qunee并没有Equipment这样的图元,但借助父子关系和跟随关系设置,可以实现类似功能,并完成下面的例子 示例代码 代码非常简单,这里直接列出 var graph; function init(){ graph = new Q.Graph('canvas'); graph.originAtCenter = false; graph.translate(20, 20); var rack = createEquipment("", 4, 1, "images/shelf.jpg"); var card1 = …
阅读更多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, …
阅读更多