轻量高效的拓扑图组件
zh

基于HTML5技术绘制上海地铁图

2014-02-28

某市政项目用到地铁图展示,展示地铁站点以及相关信息流,使用Qunee组件可以很好的解决这类需求,做出优美的展现,下面以上海2012地铁图为例,效果如下: 示例讲解 首先需要解决数据问题,可以从维基百科或者上海地铁官网中获取,不过也免不了人工,要达到良好的显示效果,需要不只要记录站点的位置,还需要设置文本标签的理想位置,有时为了避免文字叠加,需要设置旋转角度……总之事在人为,想想办法,最终解决了数据问题,再加上Qunee图形组件的强大展示效果,做出来可以交互的在线地铁图 数据格式 采用JSON格式数据,分三种类型:文本标签、站点、地铁线 总的结构如下: { "labels" : [ ... …

阅读更多

使用Qunee组件展示水文观测站点

2014-02-27

中科院的某个客户遇到这样的需求:将区域内所有水文观测站信息按层次结构展现出来。原来用的是mxGraph组件,遇到几个问题:布局难以定制、节点样式难定制、交互有问题,后来改用Qunee组件,顺利解决问题。 这是一种典型应用,主要用到Qunee的布局类TreeLayouter,以及UI和交互的简单定制,下面以示例来做介绍 需求分析 按水文观测站区域与级别分五个等级,最顶层的是主站点,下面分区站点,再往下子站点,最后是实际观测点或者设备,因为站点总数量几千上万,为了便于查看,采用动态加载方式,点击站点节点的加号,动态加载子站点,并执行自动布局 最终的效果类似下面截图 示例介绍 初始化图形组件 这里将Graph组件直接嵌入 …

阅读更多

HTML5 Canvas绘制效率如何?

2013-12-16

js运行效率在提升 编程语言的效率是前提,js自然比不上native的C语言效率,所以Canvas效率无疑比不上原生的2D图形绘制,但是js效率的提升是有目共睹的,以js与as为例,基本操作(运算操作,集合操作,Map操作)已经超越ActionScript,尤其是Google Chrome浏览器与as拉开了不小的距离,甚至某些方面超过java. Canvas绘制效率不低 Canvas没有dom操作,只是简单的2D绘制,所以效率不低,Chrome浏览器下,每秒可绘制五万个基本图形元素(圆形,矩形或者线条),如果有阴影效果会慢很多,总的来说上万元素的绘制还是很轻松的 适合简单应用 因为简单,做一些像素处理,2D绘制,小游戏啥的还是很方便 …

阅读更多

HTML5之图形绘制技术(Canvas Vs SVG)

2013-12-16

HTML5中的2D图形绘制技术 Canvas和SVG是HTML5中主要的2D图形技术,前者提供画布标签和绘制API,后者是一整套独立的矢量图形语言,成为W3C标准已经有十多年(2003.1至今),总的来说,Canvas技术较新,从很小众发展到广泛接受,注重栅格图像处理,SVG则历史悠久,很早就成为国际标准,复杂,发展缓慢(Adobe SVG Viewer近十年没有大的更新) Canvas vs SVG 和都是HTML5推荐使用的图形技术,Canvas基于像素,提供2D绘制函数,是一种HTML元素类型,依赖于HTML,只能通过脚本绘制图形;SVG为矢量,提供一系列图形元素(Rect, Path, Circle, Line …

阅读更多

HTML5的当下与未来?

2013-12-11

HTML5技术而今已不再陌生,不管是趋之若鹜,热情拥抱,还是远远张望,保持距离,HTML5都是技术论坛热门的话题,给人的感觉就是酷、新、看上去很美 任何技术都有他的适用范围,HTML5技术是一种被夸大了的万金油,在目前浏览器支持不一,开发工具,第三方类库缺乏的情况下,HTML5无法解决一切问题,但如果限定它的使用范围,HTML5确实可以优雅的解决很多问题 HTML5是什么? 侠义的HTML5 侠义的HTML5指HTML下一个主要的修订版本,是W3C制定的标准,目前还在发展中,在HTML 4.01和XHTML1.0标准基础上,HTML5标准增加和修改了一些标签元素,其中多媒体相关的有, , ,同时集成了SVG内容,数据内容的元素有, …

阅读更多

Safari Mobile中的事件处理 - touch, gesture, mouse events

2013-07-22

Safari for Mobile中使用触控操作,传统的鼠标事件无法完全支持,比如没有mousemove, dblclick事件,要想灵活处理交互,可以通过监听TouchEvent和GestureEvent,下面是各个事件调用顺序的介绍: 保留的mouse事件 safari mobile中也保留有部分鼠标事件,如:mousedown/mouseup/mouseover/moouseout/mouseclick, 当然这些事件本身还是由touch事件开始触发的,准确的说只在单点触摸时触发,且在touch事件之后。 四种touch事件 touchstart, touchmove, touchend, touchcancel,分别表示触 …

阅读更多

JavaScript中的等价操作符

2013-06-20 2022-04-26 最后修改

JavaScript中存在两种等价操作符:相等"==“和全等”===",前者对不同类型(比如String与Object)也可作等价判断,后者则必须要求类型相同,此外JavaScript中的任何对象都可以判断是非,也就是转换成boolean基本类型,这些都是ECMAScript语言(包括JavaScript)的基础 JavaScript中的四种基本类型 number, string, boolean, object 等价判断首先会判断对象类型,对于全等操作符,类型不一时,直接返回false,而对于相等"==“操作符则会按特定的规则,转换成number, string, …

阅读更多

推荐一个数学工具网站

2013-06-18

数学工具网站 推荐一个数学工具网站:数学工具(http://zh.numberempire.com) 导数,不定积分,方程求解,以前只能通过纸和笔,手工去运算,费劲费纸,结果还容易出错,后来发现这个网站,帮了我大忙,虽然有些高次的积分无法分解,反函数求解似乎也存在些问题,但基本的运算还是良好的 下面是一个方程求解的例子 示例:直线与贝塞尔曲线交点 直线公式 ax + b = cy 二次贝塞尔曲线公式 (1-t)^2*P0+2*t*(1-t)*P1+t^2*P2 分解到x,y,并将P0,P1,P2分别用A,B,C和D,E,F来表示 x = (1-t)^2*A+2*t*(1-t)*B+t^2*C y = …

阅读更多