qunee | 易学教程

使用HTML5技术绘制思维导图

阅读更多关于使用HTML5技术绘制思维导图

3 月，跳不动了？>>> 客户常常提到思维导图，喜欢它的结构展示方式，和交互的友好，从图论的角度看，思维导图本质上是一种树，有一个根节点（主题）出发，联想到其他话题，于是分支开花，再分支，有时候也会构成网络结构，由子分支联想到另一个已有分支，但通常不破坏原有结构，常见的思维导图如下 XMind制作的思维导图使用HTML5制作思维导图应用这里需要用到一款HTML5图形组件-Qunee for HTML5，Qunee组件本身支持树形布局，所以对于思维导图的大体结构是可以呈现的，到细节的地方就比较多了，包括线条的走向，节点的样式，布局交互，自动吸附，双击编辑等等，本示例没办法面面俱到，所以参照XMind的效果，只实现了部分功能，供用户参考和扩展连线定制默认连线为直线，通过定制EdgeUI可以实现曲线效果 function FlexEdgeUI(edge, graph){ Q.doSuperConstructor(this, FlexEdgeUI, arguments); } FlexEdgeUI.prototype = { drawEdge: function(path, fromUI, toUI, edgeType, fromBounds, toBounds){ var from = fromBounds.center; var to = toBounds.center;

使用Leaflet创建地图拓扑图

阅读更多关于使用Leaflet创建地图拓扑图

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 之前我们采用过 Openlayers+Qunee的方案，实现地图拓扑图，鉴于Openlayers是一个古老项目，略显臃肿，对于现代的前端地图应用，显得笨重，在客户的介绍下，我们找到了leaflet - 基于HTML5的轻量地图客户端方案，结合Qunee使用，以及第三方插件，实现更加轻快的地图拓扑图应用 Leaflet介绍 leaflet是一个开源软件，作者在乌克兰，在移动设备上的有良好的体验，比较新和现代的地图客户端，类库压缩后只有33k，非常小巧，这一点让qunee都相形见绌，先看一个leaflet的入门示例官方示例首先引入leaflet相关js和css <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 然后构建地图，并添加openStreetMap // create a map in the "map" div, set the view to a given place and zoom var map = L.map('map')

基于HTML5的网络拓扑图(2)-结合OpenLayers实现地图背景的拓扑图

阅读更多关于基于HTML5的网络拓扑图(2)-结合OpenLayers实现地图背景的拓扑图

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 地图应用分三种级别：示意地图（Map Chart），地图（Map），地理信息系统（GIS），第一种通常使用相对坐标系，后两种则为真实的地理坐标，其中第二种以谷歌地图为代表，日常生活中普遍使用，后一种则为专业的GIS，专业领域做拓扑分析、流域分析时用到，示意地图我们已经有很多例子，比如美国大选示例、中国地图示例等，今天介绍第二种地图的应用，结合OpenLayers和谷歌地图实现地图的拓扑图应用： demo.qunee.com/map/map.html 创建地图 OpenLayers是开源地理基金会作（OSGeo.org）支持的项目之一，是一种通用的地理客户端平台，支持谷歌地图，Bing地图，WMS，GML等多种地图在线服务，这里用到的是谷歌地图，需要引入OpenLayers和google map的js类库和css文件引入相关类库 <link rel="stylesheet" href="OpenLayers/theme/default/style.css" type="text/css"> <script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script> <script src="OpenLayers

基于HTML5的网络拓扑图(1)

阅读更多关于基于HTML5的网络拓扑图(1)

什么是网络拓扑网络拓扑，指构成网络的成员间特定的排列方式。分为物理的，即真实的、或者逻辑的，即虚拟的两种。如果两个网络的连接结构相同，我们就説它们的网络拓扑相同，尽管它们各自内部的物理接线、节点间距离可能会有不同。 - 维基百科网络拓扑图的绘制很多人用visio绘制网络拓扑图，非常精美，但只能静态示意，也有些传统的拓扑图中间件，基于Java、flex或者Silverlight技术，能够动态显示，只是界面略显沉重，于是有人尝试纯Web技术的图形组件，其中有不少佼佼者如：mxgraph, yfiles...... 都是老外开发的产品，类库巨大，售价昂贵，技术支持是个问题，那么有没有一种轻巧、干净、国产的纯Web拓扑图组件呢？于是就有了Qunee - 开发清新、高效的图形组件 Qunee是一套基于HTML5的网络图组件，提供Web图形解决方案，借助Qunee，可以轻松完成地图，拓扑图，组织图等等，官方网站： qunee.com , 在线演示： demo.qunee.com 拓扑图典型示例以“公共事业服务中心网络拓扑图”为例，展示典型的拓扑图结构，包含了节点、连线、分组等典型元素，通过图形展示，中心网与各个分支结构之间的关系变得一目了然拓扑图中元素类型拓扑图中基本的图元要素有：节点，文字，连线，分组等，在这个示例中都得到了体现创建节点 function createNode

HTML5拓扑图编辑器项目

阅读更多关于 HTML5拓扑图编辑器项目

拓扑图编辑器介绍项目地址： https://github.com/samsha/graph.editor 在线演示： http://demo.qunee.com/editor/ Graph.Editor是一款基于HTML5技术的拓补图编辑器，采用 jquery 插件的形式，是 Qunee图形组件的扩展项目数据可视化是一件有趣的工作，冰冷的数据变成美观的图形，如同命令行之于Mac OS X图形界面的，传统的图形组件以图表（Chart）居多，不少优秀的开源或者商业的作品，比如d3js, echarts, highcharts，而拓扑图、流程图组件相对少一些，知名的有yfiles，本项目则基于Qunee图形组件，是Qunee的扩展项目，旨在为客户提供可供扩展的拓扑图编辑工具，提供拓扑图展示、编辑、导出、保存等功能，此外本项目也是学习HTML5开发，构建WebAPP项目的参考实例。注意：本项目内核使用Qunee for HTML5，Qunee本身是一个商业产品，默认仅限本机（localhost）使用，非商业用途可以申请免费授权，商业用途请购买相应授权，官网： qunee.com 在线演示：请访问此地址查看效果： http://demo.qunee.com/editor/ 入门示例 Hello Graph.Editor <!DOCTYPE html> <html> <head>

HTML5高性能拓扑图

阅读更多关于 HTML5高性能拓扑图

本文的话题是：性能，HTML5、JS、Qunee组件的性能和效率问题历史回顾以往提到Javascript，联想到的是缓慢的、容易出错的小东西，一种脚本语言，现在浏览器的发展，js引擎的优化，js已经今非昔比，无论在浏览器端还是服务器端，都有一席之地，结合HTML5开发企业级应用变得切合实际，以往要在浏览器中实现丰富的图形效果，通常会选择flex富客服端解决方案，也有些Web2.0时代的组件，比如Extjs，以及各种图表组件，但性能上并不理想，随着HTML5的普及，Web组件有了新的思路，抛弃老IE浏览器，了却后顾之忧，实现真正的高性能，这一点Qunee图形组件已经将Flex远远抛到脑后，实现上万图元，流畅操作静态拓扑图性能首先是常规的性能参数，拓扑图加载时间，通过对连线的简化，使用Qunee开发版本，可以两秒内渲染一万图元，而且平移缩放，节点移动，框选都非常流畅，甚至我们测试过十万数量级，五年前的老机器上测试，可以在二十多秒渲染，而且依然可以操作，导出2亿像素的超大图也没问题，详情可参看后面的视频效果 Qunee拓扑图加载时间报表动态拓扑图性能还有一种动态图的情况，通过动画或者不停的更改图元样式，或者增减操作，拓扑图频繁刷新，我们选择一个弹簧布局来测试这种场景下qunee组件的表现，结果是两千数量级时表现流畅，六千数量级时依旧可用，详情参看视频后半段

RequireJS与SeaJS模块化加载示例

阅读更多关于 RequireJS与SeaJS模块化加载示例

web应用越变的庞大，模块化越显得重要，尤其Nodejs的流行，Javascript不限用于浏览器，还用于后台或其他场景时，没有Class，没有Package的Javascript语言变得难以管理，于是出现CommonJS项目，提出了一些规范模块化的写法，在Nodejs中普遍应用，同样浏览器端也出现了类似的解决方案，并结合浏览器异步加载的特性，有RequireJS提出的AMD（Asynchronous Module Definition）规范，以及SeaJS提出的CMD（Common Module Definition）规范，两者都实现Javascript了模块化定义的APIs，各有异同，下面将分别使用两种方案，实现Qunee组件的模块化加载相关文章关于RequireJS的文章很多，这里重复介绍，列出几篇专业文章： requireJS官方网站 http://requirejs.org/ SeaJS官方网站 http://seajs.org/ 使用 RequireJS 优化 Web 应用前端 http://www.ibm.com/developerworks/cn/web/1209_shiwei_requirejs/ Javascript模块化编程（一）：模块的写法 http://www.ruanyifeng.com/blog/2012/10/javascript_module

基于HTML5的在线地图

阅读更多关于基于HTML5的在线地图

Qunee for HTML5有许多地图的示例，包括地铁图，基于S VG数据的地图，结合 leaflet的地图等，每个示例都是单独的实现，代码也各有不同，于是我们想，是否能将这些方案统一起来，实现一种地图解决方案呢？于是我们开始整合，从世界地图到国内各市县的地图，再到各种地铁图，都用HTML5技术呈现出来，而在地图之上还有我们的拓扑图，等值分析图，地铁线路分析等等，本文我们将介绍如何使用Qunee加载标准地图数据，实现从世界地图到国内省市地图的呈现标准地图数据首先遇到的是地图数据的问题，我们选择支持两种数据格式：GeoJSON和TopoJSON，前者是地理数据的标准格式，各种GIS软件都支持，后者是D3.js用到的一种数据格式，能有效压缩数据文件，Qunee建议使用TopoJSON数据格式 Qunee地图示例下面以一个hello world示例介绍MapChart的使用 <!DOCTYPE html> <html> <head> <title>地图浏览</title> <meta charset="utf-8"> </head> <body> <div style="height: 600px;" id="canvas"/>   <script src="http://demo

qunee 流动的关系

阅读更多关于 qunee 流动的关系

<!DOCTYPE html> <html> <head> <title>Hello Qunee for HTML5</title> <meta charset="utf-8"> </head> <body> <div style="height: 500px;" id="canvas"></div> <script src="./qunee/qunee-min.js"></script> <script type="text/javascript" src="./qunee/jquery.min.js"></script>  <script src="Overview.js"></script> <script> /** * This file is part of Qunee for HTML5. * Copyright (c) 2016 by qunee.com **/ if (!window.getI18NString) { getI18NString = function (s) { return s; } } function FlowingSupport(graph) { this.flowMap = {}; this

HTML5 Canvas效率如何？

阅读更多关于 HTML5 Canvas效率如何？

js运行效率在提升编程语言的效率是前提，js自然比不上native的C语言效率，所以Canvas效率无疑比不上原生的2D图形绘制，但是js效率的提升是有目共睹的，以js与as为例，基本操作（运算操作，集合操作，Map操作）已经超越ActionScript，尤其是Google Chrome浏览器与as拉开了不小的距离，甚至某些方面超过java。 Canvas绘制效率不低 Canvas没有dom操作，只是简单的2D绘制，所以效率不低，Chrome浏览器下，每秒可绘制五万个基本图形元素（圆形，矩形或者线条），如果有阴影效果会慢很多，总的来说上万元素的绘制还是很轻松的适合简单应用因为简单，做一些像素处理，2D绘制，小游戏啥的还是很方便的，国际上有javascript 1k作品大赛（ http://js1k.com/ ），用1024字节的js代码，实现丰富的效果，基本上都用到canvas，所以在轻量小巧方面很有优势附上SVG与Canvas的适用范围复杂应用借助第三方开发包对于复杂应用，需要自己来解决无效区域，局部刷新，交互选中等功能，自己实现有些难度，这时候我建议借助第三方开发包 Canvas学习资料 http://www.w3.org/TR/2dcontext/ https://developer.mozilla.org/en/docs/HTML/Canvas http:/

订阅 qunee