轻量高效的拓扑图组件
zh

Qunee for HTML5 v1.2版本发布

2014-03-26

Qunee for HTML5 v1.2版本正式发布了,此次更新增加了染色、分组图元、导出预览等重要新功能,增加了四个示例,敬请升级,在线演示:http://demo.qunee.com, 官方网站:http://qunee.com Qunee for HTML5是一套基于HTML5的拓扑图图组件 使用HTML5 Canvas技术,绘制清新、流畅的网络图,可用于社交网络图、拓扑图、流程图、地图等需求, JS组件封装,藏繁琐于简洁,轻松构建优雅的互联网应用与企业应用,让数据的在线可视化变得容易 v1.2更新  增加Q.Group图元 改进连线样式 增加图片颜色渲染,支持多种混合模式 画布导出预览,支持指定范围和缩放比例输出

阅读更多

Qunee中的基本图形与箭头

2014-03-07

图形组件的基础是图形,图形的基础是2D,如形状,路径片段,渐变填充,边框等,SVG中每个图形要素都有对应的标签元素,Canvas中则提供了一些绘制函数,路径和形状的管理需要自己实现,Qunee组件中提供了丰富的基本图形 基本图形 Qunee组件中内置提供了丰富的基本图形,可通过Q.Shapes类来获取与使用 使用基本图形 Qunee中的基本图形可以在Q.Shapes中获取,传入图形名称和大小信息,返回图形路径 var shape = Q.Shapes.getShape(Q.Consts.SHAPE_ARROW_4, 100, 100); 得到图形对象后,可以设置给节点对象,显示在画布中 var shape = …

阅读更多

Qunee组件制作思维导图

2014-02-28

客户常常提到思维导图,喜欢它的结构展示方式,和交互的友好,从图论的角度看,思维导图本质上是一种树,有一个根节点(主题)出发,联想到其他话题,于是分支开花,再分支,有时候也会构成网络结构,由子分支联想到另一个已有分支,但通常不破坏原有结构,常见的思维导图如下 XMind制作的思维导图 制作思维导图应用 Qunee组件本身支持树形布局,所以对于思维导图的大体结构是可以呈现的,到细节的地方就比较多了,包括线条的走向,节点的样式,布局交互,自动吸附,双击编辑等等,本示例没办法面面俱到,所以参照XMind的效果,只实现了部分功能,供用户参考和扩展 连线定制 默认连线为直线,通过定制EdgeUI可以实现曲线效果 function …

阅读更多

使用Qunee组件制作在线地图

2014-02-28

地图是一种普遍应用,按准确度分精确地图(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组件展示水文观测站点

2014-02-27

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

阅读更多

HTML5的当下与未来?

2013-12-11

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

阅读更多

famo.us是什么?

2013-05-08

初次访问famo.us,被他的动画和交互效果所震撼,研究过其代码后,发现用到三种技术:matrix3d变换,requestAnimationFrame实现动画,以及物理运动引擎,单从技术上看三者都不难实现,但事物表面背后往往隐藏深意,famo.us的由来和目标却是野心勃勃。 创始人为web apps性能低下困扰已久,后受到Twitter Bootstrap的启发,试图提供一种用于开发本地级运行效率的web app框架,什么Sencha touch, jQuery Mobile等都是低效的代名词,这些为website而生的东西不适合复杂的web apps应用,应绕开浏览器固有的一些缺陷(document 渲染机制,CSS3导致的性能问 …

阅读更多