原文:jmgraph前端画图组件(html5版)

     jmgraph是一个基于html5的WEB前端画图组件。
 
     前端画图对象控件化,支持鼠标和健盘事件响应,可对单个控件样式设定,支持简单的动画处理。    可大大地简化前端画图。
 
 如果ie请用ie9及以上浏览器 
 
代码示例
 

1.创建jmgraph对象

 
 2.创建样式渐变和阴影效果 
渐变支持百分比,而且坐标都是相对于其父容器的。 
 
 
 3.创建控件
创建一个中心为(250,250)半径为100的圆,这里可以指定radius或宽度来解定圆大小,弧度为满圆 .
 
 
 4.事件处理
这里当鼠标移入圆时改变其边框颜色
 

5.完成
最后加入到graph中,并设置可以移动。

graph.children.add(arc);
arc.canMove(true);

鼠标移上去效果

官网:http://graph.jm47.com/

附基于jmgraph组件开发的流程图组件截图:

源码:https://github.com/jiamao/jmgraph

jmgraph前端画图组件(html5版)的更多相关文章

  1. jmGraph:一个基于html5的简单画图组件

    jmGraph:一个基于html5的简单画图组件 特性: 代码书写简单易理解 面向对象的代码结构 对图形控件化 样式抽离 模块化:入seajs实现模块化开发 兼容性:暂只推荐支持html5的浏览器:i ...

  2. 兼容小程序的canvas画图组件jmGraph

    基于CANVAS的简单画图组件让你用类似于dom的方式,在canvas上画图,感觉会不会很爽. 主页:http://graph.jm47.com/示例:http://graph.jm47.com/ex ...

  3. HTML5 Canvas 画图组件 All In One

    HTML5 Canvas 画图组件 All In One Canvas SVG Canvas + SVG refs https://www.infoq.cn/article/1BVg9VDSmqyHv ...

  4. 基于AngularJS的个推前端云组件探秘

    基于AngularJS的个推前端云组件探秘 AngularJS是google设计和开发的一套前端开发框架,帮助开发人员简化前端开发的负担.AngularJS将帮助标准化的开发web应用结构并且提供了针 ...

  5. HTML5版的String Avoider小游戏

    HTML5版的String Avoider小游戏 http://www.newgrounds.com/portal/view/300760 蛮简单也蛮考验耐心,从游戏起始点移动鼠标到终点位置,鼠标移动 ...

  6. 基于AngularJS的前端云组件最佳实践

    AngularJS是google设计和开发的一套前端开发框架,他能帮助开发人员更便捷地进行前端开发.AngularJS是为了克服HTML在构建应用上的不足而设计的,它非常全面且简单易学习,因此Angu ...

  7. WebIM技术---编写前端WebSocket组件

    过去我们想要实现一个实时Web应用通常会考虑采用ajax轮循或者是long polling技术,但是因为频繁的建立http连接会带来多余的请求以及消息精准性的问题,让我们在实现实时Web应用时头疼不已 ...

  8. 关于微信小程序前端Canvas组件教程

    关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 ​ 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...

  9. 免费的HTML5版uploadify送上

    相信有不少同学用过uploadify这一款文件上传插件,它支持多文件选择.能显示进度条.可配置性高,总体来说是比较好用的.官网有两个版本供下载,分别是flash版和HTML5版.不过令人惋惜的是,HT ...

随机推荐

  1. HDU 1710-Binary Tree Traversals(二进制重建)

    Binary Tree Traversals Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/O ...

  2. D3D 扎带 小样本

    D3D 符合基本程序 #pragma once #pragma comment(lib,"d3d9.lib") #pragma comment(lib,"d3dx9.li ...

  3. JSP通用7动作命令

    JSP通用7动作命令 1.jsp:forward指令    运行页面转向.将请求处理转发到下一个页面 2.jsp:param指令    用于传递參数 3.jsp:include指令    用于动态引入 ...

  4. css Tab选项卡1

    利用   锚点原理 以及overflow:hiden 结合,实现纯  css  tab 方式 兼容ie6 + 适合单个tab   不需要js          注意点  红色方框的   a 对应a   ...

  5. [ACM] POJ 2342 Anniversary party (树DP获得冠军)

    Anniversary party Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4410   Accepted: 2496 ...

  6. android做设计的每一个屏幕尺寸和分辨率(一个)

    一个.与分辨率无关 1.使用dp(dpi) Android密度不依赖像素(dp)指定屏幕尺寸,它同意不同的屏幕尺寸和像素密度类似设备通过缩放来达到同样的效果. (不解决不同屏幕尺寸的问题?) 2.的资 ...

  7. 大约sql声明优化

    最近做的mysql数据库优化,并sql声明优化指南.我写了一个小文件.这种互相鼓励有关! 数据库参数获得的性能优化升级都在一起只占数据库应用系统的性能改进40%左右.其余60%的系统性能提升所有来自相 ...

  8. Hadoop2.3.0具体安装过程

    前言:       Hadoop实现了一个分布式文件系统(Hadoop Distributed File System),简称HDFS.HDFS有高容错性的特点,并且设计用来部署在低廉的(low-co ...

  9. java jdk缓存-128~127的Long与Integer

    先推断下以下代码的输出结果 Qa:----------------------------------------------           Long a = Long.valueOf(127) ...

  10. Java存储区域——JVM札记<一个>

    Java当虚拟机数据区域 执行数据区主要包括:方法区.堆.VM栈.本地方法栈.程序计数器. 当中方法区和栈是线程共享的区域,另外三块区域是每一个线程私有的区域.各个数据区的功能简单说明例如以下: 程序 ...