原文: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. 第七章——DMVs和DMFs(1)

    原文:第七章--DMVs和DMFs(1) 简介: 从SQLServer2005开始,微软引入了一个名叫DMO(动态管理对象)的新特性,DMO可以分为DMFs(Dynamic Manage Functi ...

  2. 如何识别SQL Server中的IO瓶颈

    原文:如何识别SQL Server中的IO瓶颈 原文出自: http://www.mssqltips.com/sqlservertip/2329/how-to-identify-io-bottlene ...

  3. 严格模式 (JavaScript)

    严格模式是一种将更好的错误检查引入代码中的方法. 在使用严格模式时,您无法使用隐式声明的变量.将值赋给只读属性或将属性添加到不可扩展的对象. 〉声明严格模式 可以通过在文件.程序或函数的开头添加 &q ...

  4. [ExtJS5学习笔记]第22 Extjs5正在使用beforeLabelTpl添加所需的配置选项标注星号标记

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/39395753 官方样例:http://docs.sencha.com/extjs/5. ...

  5. 一个ajax的Post要求

    <1> $.post(url,[data],[callback],[type]) 第一个参数是地址,第二个参数是一个参数传递.第三个参数是一个回调函数.參数是请求返回数据的类型 //一个a ...

  6. 【SSH2(理论+实践)】--Hibernate步步(一个)

    前几个博客讨论SSH2该框架Struts,它代表层,集成封装.和使用WebWork作为核心处理,依赖映射是它的处理核心.在使用时需要Struts.xml配置相应Action和Interceptor够完 ...

  7. Tomcat通过JNDI方式链接MySql数据库

    原文:Tomcat通过JNDI方式链接MySql数据库 拷贝MySQL的JDBC驱动到Tomcat的lib路径下 配置全局数据源或者单个Web应用的局部数据源 局部数据源 在Tomcat的conf/C ...

  8. 浅谈Hybrid技术的设计与实现(转)

    前言 随着移动浪潮的兴起,各种APP层出不穷,极速的业务扩展提升了团队对开发效率的要求,这个时候使用IOS&Andriod开发一个APP似乎成本有点过高了,而H5的低成本.高效率.跨平台等特性 ...

  9. 设计模式 - 迭代模式(iterator pattern) Java 迭代器(Iterator) 详细解释

    迭代模式(iterator pattern) Java 迭代器(Iterator) 详细解释 本文地址: http://blog.csdn.net/caroline_wendy 參考迭代器模式(ite ...

  10. SQL Server使用规范

    原文:SQL Server使用规范 常见的字段类型选择 1.字符类型建议采用varchar/nvarchar数据类型 2.金额货币建议采用money数据类型 3.科学计数建议采用numeric数据类型 ...