轻量高效的拓扑图组件
zh

基于html5技术绘制上海地铁图 - 双车道路况信息

2014-05-13

前面介绍了上海地铁图的绘制,最近有客户提出了新的需求:双车道,并显示路网状态信息。经过一番研究,在原地铁图基础上做了扩展实现 交通图介绍 路况状态在GIS系统中广泛应用,谷歌地图,百度地图都有实时路况的功能,太复杂并非好事,就像地铁图,按真实经纬度呈现反而不够直观,交通图、路网也是如此,去掉无关信息,将有限的数据(路,收费站,路况)展现出来,成为一种解决方案 百度地图中的路况信息 双车道的绘制 来看具体实现,原来的地铁图是一条线表示,改用双线绘制,可表现来往的方向,canvas并没有双线线形,需要自己实现 三种连接点类型 双线的算法类似2d中的stroke算法,stroke拐点有三种方式:尖的、圆角、斜面,考虑到路网拐角不会太尖, …

阅读更多

RequireJS与SeaJS模块化加载

2014-05-04

web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有Package的Javascript语言变得难以管理,于是出现CommonJS项目,提出了一些规范模块化的写法,在Nodejs中普遍应用,同样浏览器端也出现了类似的解决方案,并结合浏览器异步加载的特性,有RequireJS提出的AMD(Asynchronous Module Definition)规范,以及SeaJS提出的CMD(Common Module Definition)规范,两者都实现Javascript了模块化定义的APIs,各有异同,下面将分别使用两种方案,实现Qunee组件的 …

阅读更多

HTML5绘制设备面板

2014-04-28

客户提到设备面板的需求,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 = …

阅读更多

EasyUI + Qunee 组件同步示例

2014-04-25

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实现地图背景的拓扑图

2014-04-21

地图应用分三种级别:示意地图(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版本发布

2014-04-12

Qunee for HTML5 v1.3 已发布,增加总线型布局,提供文本图元,增强了编辑功能,欢迎联系升级 在线演示:http://demo.qunee.com v1.3更新内容 鱼骨型总线 可设定连线走向,实现不同的总线型效果 Q.Text图元类型 提供大小调整和对齐方式功能,实现更丰富的文字呈现效果 编辑功能 节点大小调整与旋转 多行文字编辑 路径编辑 拖拽创建节点、连线 其他功能 打印预览 左上角为原点的坐标系支持

阅读更多

总线型拓扑图

2014-04-01

总线布局是拓扑图中的一种典型结构,总线(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, …

阅读更多

拓扑图编辑器(1)

2014-03-31

多位客户提到编辑器的需求,譬如拖拽创建节点,文本编辑,连线编辑,尺寸编辑等等,编辑是一个系列话题,将陆续作介绍,本章介绍拖拽创建节点与简单的连线编辑交互 拖拽创建节点 拖拽创建节点,以前要实现拖拽,需要监听全局mousemove事件,复制拖拽元素,实现drop效果,现在HTML5提供了新的拖拽事件,处理起来变得很容易 创建画布面板canvas,并在左侧创建一个工具箱toolbox,设置canvas监听drop和dragover事件,工具箱中的图片监听dragstart事件,并设置为可拖拽 <div id="canvas" ondrop="drop(event)" …

阅读更多