sam | Qunee技术博客

Qunee for HTML5 V2.4beta新版本发布

发表于 13:32 由 sam & 归档在 HTML5, 拓扑图.

经过半年的迭代更新，在多个2.3.＊版本之后，Qunee for HTML5 V2.4beta版本正式发布，此次更新修复了一些bug，增加了新的示例，欢迎访问和升级在线示例：http://demo.qunee.com/ 官网：http://www.qunee.com 修改内容 1、改进了图片边缘算法，让线条端点更加贴近图片边缘 2、改进GIF图片内存占有量，对于大的gif图片，内存占用量大大降低 3、修改了画布结构和鼠标键盘监听机制，避免了监听器导致的内存无法被释放问题 4、此外增加了五十多个新的API，图片翻转与镜像等，提供更多扩展和定制的可能新增示例 1、OTDR光缆检测面板示例在线访问地址：http://demo.qunee.com/#OTDR Demo 2、电路图以及网格刻度背景示例在线访问地址：http://demo.qunee.com/#Grid Background 3、地图中，节点辐射范围的定制在线访问地址：http://demo.qunee.com/#China Map

自定义解析SVG地图

发表于 14:49 由 sam & 归档在地图.

制图行业，地图的美观是重要的指标，不是GIS系统直接配色设置格式就可以出图的，往往还需要细节调整，甚至出版社更多时候用的是corel draw这样的图形格式，完全没有传统地图坐标的概念，同样的SVG作为一种标准矢量图形格式，也是地图最常见的输出格式，Qunee示例中就有将SVG地图转换成Qunee地图的例子，但由于SVG是一种非常复杂的图形格式，将SVG百分百还原成基于Canvas技术的Qunee目前还没有通用的解决办法，通常都需要定制解析，下面是一张韩国地图的例子，自己解析SVG的path元素，转换成Qunee的Path对象，最终得到与SVG原图一样的效果，可作为参考

韩国地图-qunee

SVG to Canvas在线转换工具

发表于 18:51 由 sam & 归档在 HTML5, JavaScript.

HTML5中有两种图形解决方案：SVG和Canvas，两者都有各自特点，这里不多说，Qunee图形组件中我们常常使用SVG作为节点图标，这在大部分场景下都表现良好，但是IE下有些小问题，IE下可以将SVG图片绘制到Canvas上，但是无法读取SVG的像素信息，这意味着一些特殊功能（追踪图片边缘，图片染色等）无法被实现，这时候我们考虑选择将SVG解析，转换成Canvas的绘制代码，这样就可以使用Canvas来绘制SVG图片了

项目代码：https://github.com/samsha/svg2canvas

SVG to HTML5 Canvas
在线地址：http://demo.qunee.com/svg2canvas/

使用Qunee组件制作在线地图 – 加载GeoJSON/TopoJSON数据

发表于 22:19 由 sam & 归档在 HTML5, Map, 地图, 拓扑图.

Qunee for HTML5有许多地图的示例，包括地铁图，基于SVG数据的地图，结合leaflet的地图等，每个示例都是单独的实现，代码也各有不同，于是我们想，是否能将这些方案统一起来，实现一种地图解决方案呢？于是我们开始整合，从世界地图到国内各市县的地图，再到各种地铁图，都用HTML5技术呈现出来，而在地图之上还有我们的拓扑图，等值分析图，地铁线路分析等等，本文我们将介绍如何使用Qunee加载标准地图数据，实现从世界地图到国内省市地图的呈现
世界地图 by qunee