地图是一种普遍应用，按准确度分精确地图（GIS）和示意地图（MapChart），前者支持各种地图投影与坐标系，譬如ArcGIS，后者使用相对坐标系，或者支持简单的WGS84经纬网坐标系，比如ILOG Elixir地图组件，示意地图再按图片类型分，可分为：栅格地图与矢量地图，Qunee组件适合制作矢量示意地图。 中国地图示例 数据格式 数据格式为JSON，里面包含三种类型：paths、points、labels，分别对应地图区块，地图点图元，文本标签 { paths:{ "0": { "path": "M 377.651,468.883 C 378.90893,469.42985 …
阅读更多某市政项目用到地铁图展示，展示地铁站点以及相关信息流，使用Qunee组件可以很好的解决这类需求，做出优美的展现，下面以上海2012地铁图为例，效果如下： 示例讲解 首先需要解决数据问题，可以从维基百科或者上海地铁官网中获取，不过也免不了人工，要达到良好的显示效果，需要不只要记录站点的位置，还需要设置文本标签的理想位置，有时为了避免文字叠加，需要设置旋转角度……总之事在人为，想想办法，最终解决了数据问题，再加上Qunee图形组件的强大展示效果，做出来可以交互的在线地铁图 数据格式 采用JSON格式数据，分三种类型：文本标签、站点、地铁线 总的结构如下： { "labels" : [ ... …
阅读更多中科院的某个客户遇到这样的需求：将区域内所有水文观测站信息按层次结构展现出来。原来用的是mxGraph组件，遇到几个问题：布局难以定制、节点样式难定制、交互有问题，后来改用Qunee组件，顺利解决问题。 这是一种典型应用，主要用到Qunee的布局类TreeLayouter，以及UI和交互的简单定制，下面以示例来做介绍 需求分析 按水文观测站区域与级别分五个等级，最顶层的是主站点，下面分区站点，再往下子站点，最后是实际观测点或者设备，因为站点总数量几千上万，为了便于查看，采用动态加载方式，点击站点节点的加号，动态加载子站点，并执行自动布局 最终的效果类似下面截图 示例介绍 初始化图形组件 这里将Graph组件直接嵌入 …
阅读更多js运行效率在提升 编程语言的效率是前提，js自然比不上native的C语言效率，所以Canvas效率无疑比不上原生的2D图形绘制，但是js效率的提升是有目共睹的，以js与as为例，基本操作（运算操作，集合操作，Map操作）已经超越ActionScript，尤其是Google Chrome浏览器与as拉开了不小的距离，甚至某些方面超过java. Canvas绘制效率不低 Canvas没有dom操作，只是简单的2D绘制，所以效率不低，Chrome浏览器下，每秒可绘制五万个基本图形元素（圆形，矩形或者线条），如果有阴影效果会慢很多，总的来说上万元素的绘制还是很轻松的 适合简单应用 因为简单，做一些像素处理，2D绘制，小游戏啥的还是很方便 …
阅读更多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技术而今已不再陌生，不管是趋之若鹜，热情拥抱，还是远远张望，保持距离，HTML5都是技术论坛热门的话题，给人的感觉就是酷、新、看上去很美 任何技术都有他的适用范围，HTML5技术是一种被夸大了的万金油，在目前浏览器支持不一，开发工具，第三方类库缺乏的情况下，HTML5无法解决一切问题，但如果限定它的使用范围，HTML5确实可以优雅的解决很多问题 HTML5是什么？ 侠义的HTML5 侠义的HTML5指HTML下一个主要的修订版本，是W3C制定的标准，目前还在发展中，在HTML 4.01和XHTML1.0标准基础上，HTML5标准增加和修改了一些标签元素，其中多媒体相关的有, , ，同时集成了SVG内容，数据内容的元素有, …
阅读更多Extjs的类继承——$.extend Extjs是比较早期的web企业组件，代表了面向对象编程思想在js中的实践，其中最基本的就是类的继承，通过对prototype和constructor的复制和设置实现，但实现代码并不是那么容易，看过extjs的extend代码就会明白其难度，没有相当js经验很难看懂，当年看这块儿费了不少精力，后来考虑到版权问题，以及代码简化的需要，自己实现相关功能，经历几番修改才得以稳定 下面是最简化的实现，以及测试例子，当然这个实现存在些问题，比如对于javascript 1.8中的get set不支持，需要自行改造 function extend(sb, sp) { var sbp = …
阅读更多初次访问famo.us，被他的动画和交互效果所震撼，研究过其代码后，发现用到三种技术：matrix3d变换，requestAnimationFrame实现动画，以及物理运动引擎，单从技术上看三者都不难实现，但事物表面背后往往隐藏深意，famo.us的由来和目标却是野心勃勃。 创始人为web apps性能低下困扰已久，后受到Twitter Bootstrap的启发，试图提供一种用于开发本地级运行效率的web app框架，什么Sencha touch, jQuery Mobile等都是低效的代名词，这些为website而生的东西不适合复杂的web apps应用，应绕开浏览器固有的一些缺陷（document 渲染机制，CSS3导致的性能问 …
阅读更多