使用Raphael 画图(四) 路径(一) (javascript)
这章介绍路径,本人觉得这是比较难和精髓的一部分。
先介绍基本知识:
可以参考:
http://www.chinasvg.com/support/svg-tutorial/svg-path-directive-guide.html
/* 命令解释:
M = moveto 参数:(x y)
L = lineto 参数:(x y)
H = horizontal lineto 参数:(x)
V = vertical lineto 参数:(y)
C = curveto 参数:(x1 y1 x2 y2 x y)
S = smooth curveto 参数:(x2 y2 x y)
Q = quadratic Belzier curve 参数:(x1 y1 x y)
T = smooth quadratic Belzier curveto 参数:(x y)
A = elliptical Arc 参数:(rx ry x-axis-rotation large-arc-flag sweep-flag x y)
Z = closepath 参数(none)
/
例子:
var p1 = paper.path('M250 150 L180 350 L350 350 Z').attr({stroke:'red','stroke-width':2}); var p2 = paper.path('M350,100 h-100 a100,100 0 1,0 100,-100 z').attr({stroke:'blue','stroke-width':2}); var p3 = paper.path('M350,300 a100,100 0 1,0 100,-100 z').attr({stroke:'green','stroke-width':2}); var p4 = paper.path('M150 100 L100 200 Z').attr({'stroke-width':2});
var p5 = paper.path('M100 100 L150 200 Z').attr({'stroke-width':2});
注释:例子p1定义了一条路径,它开始于位置 250 150,到达位置 150 350,然后从那里开始到 350 350,最后在 250 150 关闭路径。
效果图:
使用Raphael 画图(四) 路径(一) (javascript)的更多相关文章
- 使用Raphael 画图(一) 基本图形 (javascript)
Raphael是什么? Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操 ...
- 使用Raphael 画图(二) 扩展的图形 (javascript)
看这文章前,建议先看第一编文章<使用Raphael 画图(一) 基本图形 (javascript)>. 在Raphael基础上扩展的图形: 要运行该例子要引入附件的2个js包.(g.rap ...
- 【JavaScript从入门到精通】第四课初探JavaScript魅力-04
第四课初探JavaScript魅力-04 style与className 之前我们已经讲过,style用于在JS里控制元素的样式,通过style可以选中元素的各种css属性.此外,我们也提到过,JS用 ...
- 使用Raphael 画图(三) 事件 (javascript)
这章展示事件例子. 下图是官方API的事件: 例子: var butt1 = paper.set(); var a1 = paper.circle(24.833, 26.917, 26.667).at ...
- javaWeb核心技术第四篇之Javascript第二篇事件和正则表达式
- 事件 - 表单提交(掌握) "onsubmit" - 单击事件(掌握) "onclick" - 页面加载成功事件(掌握) "onload" ...
- 对Raphael画图标的一个jquery简单封装
公司要做一个项目的demo,要求地图上可以插红旗,所以就用到了Raphael. 因为是个demo,所以地图就用了一张图片,效果如下: 所以为了更好的封装一下这个功能,就写了一个简单的插件:jquery ...
- 第四章 函数(JavaScript:语言精粹)
函数包含一组语句,用来指定对象的行为,其代码可以用来重复使用. 一般来说,编程就是将一组需求分解成一组函数和数据结构的技能. 概览:函数对象 | 函数字面量 | 调用 | 方法调用模式 | 函 ...
- 第一百一十四节,JavaScript文档对象,DOM进阶
JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...
- 第一百零四节,JavaScript时间与日期
JavaScript时间与日期 学习要点: 1.Date类型 2.通用的方法 3.格式化方法 4.组件方法 ECMAScript提供了Date类型来处理时间和日期.Date类型内置一系列获取和设置日期 ...
随机推荐
- 武汉Uber优步司机奖励政策(1月25日~1月31日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- poj 1679 The Unique MST【次小生成树】
The Unique MST Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 24034 Accepted: 8535 D ...
- maven 私服 配置 转
3 . Nexus预置的仓库 点击左侧 Repositories 链接,查看 Nexus 内置的仓库: Nexus 的仓库分为这么几类: hosted 宿主仓库:主要用于部署无法从公共仓库获取的构件( ...
- 微软提供的API的各个版本之间的区别
First Floor Software这个diff lists非常方便的给出了微软提供的API的各个版本之间的区别,比如下表是.NET 4和.NET 4.5的API变化总结.我们可以看到.NET 4 ...
- java工程项目里,在一个包里面,不能出现同名的类名,这问题是刚接触java才会遇到的,特别是新手一般都没有建立包,而是使用默认的,易出现同名的类名,导致eclipse提示错误
java工程项目里,在一个包里面,不能出现同名的类名,这问题是刚接触java才会遇到的,特别是新手一般都没有建立包,而是使用默认的,易出现同名的类名,导致eclipse提示错误. 问题: 创建了一个工 ...
- [notes] ImageNet Classification with Deep Convolutional Neual Network
Paper: ImageNet Classification with Deep Convolutional Neual Network Achievements: The model address ...
- java websockect
https://github.com/TooTallNate/Java-WebSocket (websockect类库包) http://blog.openlg.net/index.php/archi ...
- cocos2d-x3.0-结合TH脚本引擎
近期自己在研究手机游戏开发,呵呵.引擎就选择了cocos2d-x,略微看了下感觉好像非常不错的样子. 写个一般的游戏,全然能够了.工作量也不会非常大,相对来说开发非常轻松了. 在脚本引擎的选择其中,当 ...
- Android中悬浮窗口的实现原理和示例代码
用了我一个周末的时间,个中愤懑就不说了,就这个问题,我翻遍全球网络没有一篇像样的资料,现在将实现原理简单叙述如下: 调用WindowManager,并设置WindowManager.LayoutPar ...
- linux ----Inode的结构图
http://www.ruanyifeng.com/blog/2011/12/inode.html 先看看Inode的结构图 再来了解一下文件系统如何存取文件的 1.根据文件名 ...