raphaelJs的简单使用
来源:互联网 发布:淘宝大学vip靠谱吗 编辑:程序博客网 时间:2024/05/29 23:46
一 、如何获得
下载地址:http://dmitrybaranovskiy.github.io/raphael
文档地址:http://dmitrybaranovskiy.github.io/raphael/reference.html
二、 画布
//定义方法一var paper = Raphael("200, 200, 400, 400"); //以坐标(200,200)为起点,定义一个宽度为400,高度为400的区域作为画布//X轴方向水平向右 Y轴方向垂直向下
//定义方法二var paperDom = Raphael(domId,400,400); // 将宽度为400,高度为400的画布放置到指定domId的容器中//起点是容器的左上角 且svg会将div撑开
三、 绘制
Api可以查询开发文档获得,这里做几个简单演示
paper.path('M 20 20 L 120 20 Z') //移动到坐标(20,20),连一条直线到坐标(120,20),然后闭合路径
四、路径命令
参照系为当前画布
M 移动到坐标 (x,y) 相对于当前画布的起始坐标
Z 闭合一条路径
L 直线 (x,y) 终点坐标
H 水平直线 x 从当前点(x0,y0)开始到目标点(x,y0)的直线
V 垂直直线 y 从当前点(x0,y0)开始到目标点(x0,y)的直线
以下曲线涉及的知识 可以参考
http://www.zhangxinxu.com/wordpress/2014/06/deep-understand-svg-path-bezier-curves-command/
Q 二次贝塞尔曲线
T 平滑的二次贝塞尔曲线
C 三次贝塞尔曲线
S 平滑的三次贝塞尔曲线
A 椭圆弧
R Catmull-Rom 曲线
英文书:http://pan.baidu.com/s/1pKQdWaJ
0 0
- raphaelJs的简单使用
- RaphaelJS
- RaphaelJS 的反锯齿设置
- [Raphael] 在HTML中如何使用Raphaeljs库.
- [HTML5-SVG]使用raphaeljs:代替css3绘制opera图标效果
- [HTML5-SVG]使用raphaeljs:代替css3实现qq空间关闭按钮旋转特效
- [HTML5-SVG]使用raphaeljs:绘制哆啦A梦并实现动画效果
- [HTML5-SVG]使用svg、CSS3、raphaeljs:模拟月球绕地球,地球绕太阳旋转
- 快速上手RaphaelJS
- RaphaelJS通用画图方法
- [Java教程]快速上手RaphaelJS
- raphaeljs画图官网地址
- 简单易懂的使用
- ant的简单使用
- Log4j的简单使用
- TCPDUMP的简单使用
- IComparer的简单使用
- TreeView的简单使用
- 单词2016.8.3
- 源码管理工具SVN:Eclipse下的使用
- poj1860(spfa)
- html,js,css轮播插件
- POJ1644 DP+一些感悟
- raphaelJs的简单使用
- 置顶操作的实现
- 从应用到平台,云服务架构的演进过程
- 关于安卓边下边播的几点心得
- 1007. 素数对猜想 (20)
- Java并发编程:并发容器之CopyOnWriteArrayList(转载)
- linux 解压超过4gb的压缩文件
- Redis 实战 ---- Java 使用 Redis
- AngularJS第二日a