jmgraph前端画图组件(html5版)
jmgraph是一个基于html5的WEB前端画图组件。
前端画图对象控件化,支持鼠标和健盘事件响应,可对单个控件样式设定,支持简单的动画处理。 可大大地简化前端画图。
如果ie请用ie9及以上浏览器
代码示例
1.创建jmgraph对象
![](http://images0.cnblogs.com/blog/161229/201304/17112836-62b7ad7f082540c4a6be211766838fb5.jpg)
2.创建样式渐变和阴影效果
渐变支持百分比,而且坐标都是相对于其父容器的。
渐变支持百分比,而且坐标都是相对于其父容器的。
![](http://images0.cnblogs.com/blog/161229/201304/17112901-a1f7162d705d44fcb52afecf0dca4ae3.jpg)
3.创建控件
创建一个中心为(250,250)半径为100的圆,这里可以指定radius或宽度来解定圆大小,弧度为满圆 .
创建一个中心为(250,250)半径为100的圆,这里可以指定radius或宽度来解定圆大小,弧度为满圆 .
![](http://images0.cnblogs.com/blog/161229/201304/17113014-c5e2ab1cc49f4b98883542e84d4479b3.jpg)
4.事件处理
这里当鼠标移入圆时改变其边框颜色
这里当鼠标移入圆时改变其边框颜色
![](http://images0.cnblogs.com/blog/161229/201304/17112926-07a5c707c8924d8687aa5f0db42191ff.jpg)
5.完成
最后加入到graph中,并设置可以移动。
graph.children.add(arc); arc.canMove( true ); |
鼠标移上去效果
完整api:http://graph.jm47.com/document/api/index.html
在线demo:http://graph.jm47.com/example/
附基于jmgraph组件开发的流程图组件截图:
标签: JavaScript