原文: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. 【iOS】Web Color 的 Swift 实现

    用Swift语言重写Web Color这个类. 这次是用函数实现的,感觉也非常简洁.眼下(2014.6.28) Xcode 6的方法提示还不健全,就仅仅实现了用颜色名字创建颜色的功能. 最新代码&am ...

  2. implements KeyListener但关键监听器监听少

    今天写的游戏.主要听众,但它并不总是加入了育雏, 我实现了接口,但不听 后来,我发现只是没想到服用口服细致怎么称呼控制panel上面增加了一个addKeyListener(this); 基础不坚固.马 ...

  3. 实现一个简单的boot

    1.汇编语言.分别汇编器和链接as86和ld86.码如下面: .globl begtext,begdata,begbss,endtext,enddata,endbss .text begtext: . ...

  4. LAN远程重启server安全方法

    原创文章.转载请注明出处.(百度经验:http://jingyan.baidu.com/article/454316abaadc41f7a7c03a13.html) 在局域网中,管理和操作server ...

  5. Tri_integral Summer Training 5 总结

    比赛 题目 B D E G H I J 这是泰国的一场区域赛,除了C题英语非常抽以外,其余题目还不算难读. 一开场就发现了三道很水的题目,0:21:34就把三道题给过了,都是1A,赞Moor的手速. ...

  6. HTML5 transform三维立方体(随着旋转的效果)

    为了得到更好的把握transform精华.因此,我们决定完成三维立方体模型,可以实现360无死三维旋转作用. 但旋转更难推断每侧视图的序列.然而,完美的解决方案,我希望有人能回答. 源代码直接贡献的朋 ...

  7. hdu4419 Colourful Rectangle 12年杭州网络赛 扫描线+线段树

    题意:给定n个矩形,每个矩形有一种颜色,RGB中的一种.相交的部分可能为RG,RB,GB,RGB,问这n个矩形覆盖的面积中,7种颜色的面积分别为多少 思路:把x轴离散化做扫描线,线段树维护一个扫描区间 ...

  8. Model-View-Presenter(MVP)

    Model-View-Presenter(MVP)模式 Model-View-Presenter(MVP)是一种应用程序表示层的设计模式.该设计模式最早于90年代由Taligent提出,并率先在C++ ...

  9. 基于PHP的crontab定时任务管理

    BY JENNER · 2014年11月10日· 阅读次数:6 linux的crontab一直是server运维.业务开展的利器.但当定时任务增多时,管理和迁移都变得非常麻烦,并且easy出问题.以下 ...

  10. Javascript学习1 - Javascript中的类型对象

    原文:Javascript学习1 - Javascript中的类型对象 1.1关于Numbers对象. 常用的方法:number.toString() 不用具体介绍,把数字转换为字符串,相应的还有一个 ...