原文: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. 【十三】注入框架RoboGuice采用:(Logging via Ln)

    上一篇我们简单的介绍了一下RoboGuice的使用([十二]注入框架RoboGuice使用:(Your First Injected ContentProvider)),今天我们来看下Log日志使用. ...

  2. crm2011i创建nt类型字段

    using System;     using Microsoft.Xrm.Sdk;     using Microsoft.Xrm.Sdk.Messages;     using Microsoft ...

  3. Android组件系列----ContentProvider内容提供商【5】

    2.执行query()方法,查询全部记录(眼下一共两条记录).后台输出效果例如以下: 经測试,其它方法也都是能够运行的. 事实证明,新建的另外一个project文件ContentResolverTes ...

  4. JavaScript 比量 Chrome 核心 360 浏览器(关闭和技巧)

    (原因:我相信你会找到360浏览器非常多web会有上述项目的一些问题,不管是"兼容模式"依然是"快速模式".问题也可能存在.非常多用户都装了360杀毒软件,基本 ...

  5. UVa - The 3n + 1 problem 解读

    这个问题并计算质数了一下相间隔似的.思想上一致. 注意问题: 1 i 可能 大于或等于j -- 这里上传.小心阅读题意,我没有说这个地方不能保证.需要特殊处理 2 计算过程中可能溢出,的整数大于最大值 ...

  6. onethink和phpwind共享

    将onethink和phpwind数据库安装在一起.使用公用表前缀. 将onethink的member表点phpwind有user表 这是onethink在根文件夹的安装,phpwind安装在bbs的 ...

  7. 网络爬虫WebCrawler(1)-Http网页内容抓取

    在windows在下面C++由Http协议抓取网页的内容: 首先介绍了两个重要的包(平时linux在开源包,在windows下一个被称为动态链接库dll):curl包和pthreads_dll,其中c ...

  8. Doug Lea

    如果IT的历史,是以人为主体串接起来的话,那么肯定少不了Doug Lea.这个鼻梁挂着眼镜,留着德王威廉二世的胡子,脸上永远挂着谦逊腼腆笑容,服务于纽约州立大学Oswego分校计算机科学系的老大爷. ...

  9. Linux内核分析(四)----进程管理|网络子系统|虚拟文件系统|驱动简介

    原文:Linux内核分析(四)----进程管理|网络子系统|虚拟文件系统|驱动简介 Linux内核分析(四) 两天没有更新了,上次博文我们分析了linux的内存管理子系统,本来我不想对接下来的进程管理 ...

  10. Java多线程的~~~synchronized加入参数,以实现独立片段

    有时候,我们不希望在整个方法的前面加上synchronized这个keyword.这将使整个方法调用变得缓慢,我们只是重点 代码的地方添加这个synchronized这个keyword,然后这样就能加 ...