快速上手RaphaelJS--RaphaelJS_Starter翻译（三）

上篇博文我们讲解到了Raphael的动画、图形变换和鼠标事务的内容，本篇介绍介绍你应用Raphael过程中会高频用到的办法。

那些你必须知道的Raphael办法

Element 办法

这些办法由元素调用。比如我们前面的rect.click（）。

animate（）

animate（）办法是用来在特按时候内经由过程动画结果来变换元素的属性的办法。语法如下：

element.animate（{
Property1:value，
Property2:value

}，time_in_milliseconds，easing（optional），

callback_function（optional））;

rect.animate（{

"width":"300"，
"height":"200"

}，500，""bounce""，function（）{
alert（"animation complete"）
}）;

Raphael元素.animate（元素键值对，动画连气儿时候，缓动类型（可选参数），回调函数（可选参数））。

attr（）

attr（）办法是Raphael办法中最常用的办法之一，它经由过程Raphael元素属性键值对作为参数来对元素进行添加或者批改属性。添加和批改可以使元素的样式，也可所以其它物理属性，比如坐标、宽高等等。语法如下：

element.attr（{
Property1:value，
Property2:value

}）

rect.attr（{
   "fill":"＃17A9C6"， // Adds a background color
   "stroke":"＃2A6570"， // the color of the border
    "stroke-width":2 // the width of the border

}）

Raphael元素.attr（{元素键值对}），元素键值对就是json格局的数据。我们可以操纵的元素属性如下所示：

元素名称类型简介

arrow-end string 路径的末尾显示箭头。字符串格局是<type>[-<width>[-<length>]]。可能的类型：classic、block、open、oval、diamond、none，宽：wide、narrow、midium，长：long 、short、midium。

clip-rect string 剪贴矩形。逗号或空格分隔的值：x，y，宽度和高度

cursor string 光标的CSS类型

cx number 圆或椭圆的圆心的x轴坐标

cy number 圆或椭圆的圆心的y轴坐标

fill string 填充。色彩、渐变或图像

fill-opacity number 填充不透明度

font string 文本特点

font-family string 字体

font-size number 字体大小（像素）

font-weight string 字体粗细

height number 高度

href string URL。指按时，元素发挥解析为超链接

opacity number 透明度

path string SVG的路径字符串格局

r number 圆、椭圆或圆角矩形的半径

rx number 椭圆的横向半径

ry number 椭圆的垂直半径

src string 图像的URL，只实用于Element.image元素

stroke string 笔触色彩

stroke-dasharray string [“”， “-”， “.”， “-.”， “-..”， “.”， “- ”， “--”， “- .”， “--.”， “--..”]

stroke-linecap string [“butt”， “square”， “round”]

stroke-linejoin string [“bevel”， “round”， “miter”]

stroke-miterlimit number

stroke-opacity number

stroke-width number 笔触宽度（像素，默认为1）

target string 与 href 一路应用

text string 文本元素的内容。应用\n换行

text-anchor string [“start”， “middle”， “end”]，默认为 “middle”

title string 对象提示内容

transform string 请参照：Element.transform

width number

x number

y number

博客上方这个编辑器我不熟悉，我在排版时对齐后到预览就东倒西歪，弄了几次都没成功。大师包含一下，有知道为什么的留言告诉一下。

click（）

click（）办法是用来为Raphael元素绑定单击事务的办法，语法如下：

rect.click（function（）{
//点击之后的动作
alert（"clicked rectangle"）;

}）

dbclick（）

dbclick（）办法和click语法一样，触发为双击触发。语法如下：

cir.dblclick（function（）{

alert（"It""s a double click !"）;

}）

mousedown（）

mousedown（）办法为Raphael元素绑定鼠标键按下的动作，任何鼠标键按下都是触发事务。语法如下：

rect.mousedown（function（）{
      rect.animate（{
            ""width"":""200""
      }，400）
}）

mouseup（）

mouseup（）办法与上方mousedown（）相反，触发前提为鼠标按下的键被开释，语法也和上方完全一致。

mousemove（）

mousemove（）办法为鼠标在一个Raphael元素上方移过期触发。

mou搜刮引擎优化ver（）

mousemove（）办法为鼠标进入元素时触发。这里须要申明，mou搜刮引擎优化ver（）和上方mousemove（）的差别，你从外面移动到一个Raphael元素时，两个办法都可以触发事务。然则若是你把事务履行完成，持续移动鼠标（假设此时鼠标光标还在元素中），mou搜刮引擎优化ver（）将不再持续履行事务，而mousemove（）会连气儿触发事务。

mou搜刮引擎优化ut（）

mou搜刮引擎优化ut（）办法触发为鼠标移出一个Raphael元素时，它只有在移出时触发，进入不触发。

clone（）

clone（）办法是克隆一个Raphael时调用的。有个同鞋可能会问，那我直接var newrect=rect;莫非不可吗？实际上是不可的，因为newrect实际只是一个指向老rect的"快捷体式格式"，它并不会创建一个新的Dom。

下面这个是我们想要的结果的代码：

[javascript] view plaincopyprint?

var newrect=rect.clone（）.attr（{"x":50，"y":50}）;
<br style="line-height:15px">

而不是这个：

var newrect=rect.attr（{"x":50，"y":50}）;

data（）

data（）办法是个不成思议的办法。你可以按照本身须要为Raphael元素付与你想付与的含义，并且在须要时取回来：

newrect.data（{

"name": "heihei"，

"age":2

}）;

newrect.click（function（）{
alert（newrect.data（"age"））;

}）;

我们可以随便付与元素它要装载的内容，在须要的时辰拿回来。这个功能很是灵活，你可以随便设计关键词，当你须要为用户显现鼠标移过显现内容时就可以用这个。当然有了这个为元素添加data的办法就必然有移出的办法。

removeData（）

与上方的为元素添加内容相反，removeData（）办法是移出已经添加了的内容：

newrect.removeData（"age"）;

如许，我们上那个alert就会提示是undefined。也就是removeData（你添加的内容的key）。

getBBox（）

getBBox（）办法获得一个Raphael元素的鸿沟框（我把它成为包抄盒）。其实应当就是能包抄元素的最小矩形。getBBox（）有个参数isWithoutTransform，值是true或者false。参数含义是获得的鸿沟框是在履行transform也就是变换之前的元素还是变换后的。默认是false，意思是转换后的，也就是你不设置里面参数为true，它获得的包抄盒就是转换之后的。书上说它的返回值有6个值：

{

x: number 左上角 x

y: number 左上角y

x2: number 右下角 x

y2: number 右下角 y

width: number 宽

height: number 高

}

我测试时其实返回的包抄盒对象是8个值，其实它还会带着元素的cx和cy值返回，也就是元素的创建坐标。它的结果我们经由过程一段代码来看：

var paper = Raphael（"my-canvas"， 650， 400）;

var cir = paper.circle（50， 50， 50）.attr（{

"fill": "green"，

"stroke": "red" // border color of the rectangle

}）;

var newcir = cir.clone（）.attr（{

"fill": "yellow"

}）.transform（"t100，100"）;

var bbox = newcir.getBBox（）;

var bboxOld = newcir.getBBox（true）;

//我们经由过程获得的包抄盒来绘制包裹圆的矩形

paper.rect（bbox.x， bbox.y， bbox.width， bbox.height）.attr（{

"stroke": "yellow"

}）;

paper.rect（bboxOld.x， bboxOld.y， bboxOld.width， bboxOld.height）.attr（{

"stroke": "purple"

}）;

</script>

因为其它html项目组在前面的博文里面已经多次贴出，这里就不再反复了，只是把js项目组贴出来，其它都是一样的。这段法度履行成果如下：

如上图，我们看到2个分别被紫色和边矩形包抄的绿色和圆。经由过程前面的常识，我们知道圆是应用clone（）和transform（）之后的绿色圆，我们的getBBox（）办法履行了两次，参数分别是为默认false和true。获得包抄盒信息今后，我们应用它来绘制了2个矩形，就是两个包抄盒了。包抄盒这个办法我临时想到的用处有两个，一个似乎策画一个图形的中间点，一个是用于帮助断定碰撞。后面应用过程中可能会发明新的更有效的功能。

getPointAtLength（）

getPointAtLength（）办法在给定的path对象和指定的长度，返回那个地位点的坐标。语法如下：

path.getPointAtLength（length）

返回值：
X number 点的x坐标
Y number 点的y坐标
Alpha number 导数（切线）的角度

这里须要重视，原书这里是错误的语法，其实应path元素来调用这个办法，参数是一个长度，而原书成了path元素和长度2个对象作为参数。我已经实验过代码：

var paper = Raphael（"my-canvas"， 700， 600）;

var path = paper.path（"M240，40L300，40L300，100"）;

var pathQ = paper.path（"M240，40Q300，40 300，100"）.attr（""stroke""， ""red""）;

var pointObj = path.getPointAtLength（60）;

console.log（"x:" + pointObj.x + "，y:" + pointObj.y + "，Alpha:" + pointObj.alpha）;

var pointObjQ = pathQ.getPointAtLength（60）;

console.log（"x:" + pointObjQ.x + "，y:" + pointObjQ.y + "，Alpha:" + pointObjQ.alpha）;

</script>

上方的path代码是上一篇博文中的2次贝塞尔曲线的法度，这里我们分别履行了3段线段的path和贝塞尔曲线指定长度60求取的点，结果如下:

toFront（）、toBack（）、hide（）、show（）、remove（）

这里我们有5个办法一路讲解。这5个办法都没有参数，也就是元素.办法（），就行了。从字面意思我们就能读懂，toFront（）到前面来，toBack（）与toFront（）相反，到后面去；hide（）和show（）相反，分别是隐蔽和显示；remove（）删除。大师若是懂得Css的话，前面4个应当很好懂得。toFront（）就相当于我把一个dom的z-index批改的很大，大到跨越其它所有元素，所以它离用户眼睛比来而覆盖其它元素，toback与它相反。而hide（）和show（）就更不必说了，把一个元素隐蔽和显示出来。就如同我们操纵Css时会用到display:none;display:block;一样。remove（），删除元素，调用这个办法的元素将会从画布上移除。我们调用时辰就知道hide（）时dom是存在的，只是你看不到罢了；而remove（）是直接把dom节点删除掉了，也就是真正意义上的不存在了。

transform（）

上一篇博文，transform（）办法已经讲解的很具体，我们这里就不再反复。这里只是再说一点，element.transform（"some trans string"）的感化其实用element.attr（{"transform":"some transform string"}）也可以达到。上一篇里面我们夸大过，transform其实是Raphael元素的一个属性，attr既然可以批改和添加属性，那当然可以如许子做。

到此为止，我们介绍了斗劲首要的Element办法。也就是供元素来调用的办法，下面我们要讲解的时辰paper，也就是画布可以调用的办法。

画布的办法

画布的办法只能由画布本身来调用，我们前面的声明的画布是var paper=Raphael（"my-canvas"， 650， 400）;也就是下面讲到的办法须要paper去调用。其实前面我们已经碰着了很多个办法是由paper去调用的。还记得吧，我们去创建每个图形都是paper来进行的。paper.circle（）、paper.rect（）、paper.ellipse（）、paper.path（）。这些我们前面都举了例子来描述，这里就不再描述前面已经呈现的办法。我们持续讲解其它前面没讲到的画布办法。

paper.clear（）

paper.clear（）办法清空画布，还记得上方元素办法里面有个remove（）办法吧。那个是单个去除一个元素，这里是画布来调用清除所有元素的办法。

paper.image（）

这里申明一下，RaphaelJS确切是个很是优良的前台图形绘制对象，然则不要认为它可以调换。其它通俗和Raphael是互补的，而不是可以调换的关系。所以Raphael供给了引用的办法，就是paper.image（）。它有5个参数：

参数申明

src 的路径，对经常写前台的童鞋们来说这个小菜一碟

X 摆放地位的x坐标

Y 摆放地位的y坐标

width 的宽度

height 的高度

例：paper.image（"images/testimage.png"，10，10，200，150）;将在画布的（10，10）地位摆放一个宽200，长150的。

paper.setSize（）

paper.setSize（）用来从头设置画布的大小。你以在发明画布大小不合当令调剂画布的大小而不是须要从头建树画布然后重答复复兴来的工作。办法有2个参数：宽和高

paper.setSize（600，800）;

我们将画布的大小批改为宽600px，高800px。

paper.set（）

paper.set（）办法是个很首要的办法。它帮助我们对Raphael元素进行分组然掉队行批量经管。也就是我们放进一个set里面的Raphael元素若是用set来履行一些动作，那么这些操纵是所有在set里面的元素起感化的。然则set本身并不创建和复制、克隆Raphael元素，也就是你删除一个set，不会删除set里面的Raphael元素，然则你可以用set来帮助经管set内的元素。我们贴个代码看看：

var paper = Raphael（"my-canvas"， 650， 400）;

var rect = paper.rect（20， 20， 60， 40）.attr（{

"stroke": "red"， // border color of the rectangle

}）;

var rect1 = paper.rect（20， 70， 60， 40， 20）.attr（{

"stroke": "yellow"， // border color of the rectangle

}）;

var cir = paper.circle（150， 100， 30）;

var raphaelSet = paper.set（）;

raphaelSet.push（rect， rect1， cir）;

raphaelSet.attr（{

"fill": "red"

}）;

</script>

下面是履行结果：

我们查看上方的代码，我们的步调是声明一个set对象RaphaelSet，然后把我们创建的Raphael元素push进去，然后我们把全部set经由过程attr加了一个填充红色的指令，然后结果我们可以在上图看到。这里就印出来我们接下来要讲解的内容，那就是set对象可以调用的办法。接下来我们就开端讲解set办法。

set的办法

接下来讲解的办法是只有set对象才干调用的办法，前面我们已经提到了set对象的声明：

var raphaelSet = paper.set（）;

set.clear（）

快速上手RaphaelJS--RaphaelJS_Starter翻译（三）相关推荐

快速上手RaphaelJS
原文: 快速上手RaphaelJS-Instant RaphaelJS Starter翻译 http://www.cnblogs.com/idealer3d/p/Instant_RaphaelJS_S ...
MySQL快速上手[学习笔记]（三）
前言: 课程:<三大主流数据库快速上手>(点击跳转官方课程,b站有资源,可自搜) 笔记(点击跳转豆丁网) 此处是个人学习笔记,用作回顾用途目录: 七.函数八.视图九.触发器十.存储 ...
快速上手RaphaelJS-Instant RaphaelJS Starter翻译（一）
(目前发现一些文章被盗用的情况,我们将在每篇文章前面添加原文地址,本文源地址:http://www.cnblogs.com/idealer3d/p/Instant_RaphaelJS_Starter. ...
快速上手RaphaelJS--RaphaelJS_Starter翻译（一）
Raphael Javascript是一个 Javascript的矢量库. 它可以处理SVG.VML格式的矢量图,它使用SVG W3C推荐标准和VML作为创建图形的基础,你可以用Javascript ...
mongodb 输出数组字段_三分钟 mongodb 开发快速上手
三分钟 mongodb 开发快速上手小熊昨天晚上做了一个非常真实的噩梦,有读者朋友催我"怎么又没有发文!让我们等的好辛苦",今天一睁开眼眼看后台留言,特么,居然是真的! 我bil ...
NS3 Tutorial 中文版：第三章快速上手
[声明]允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责任. http://yangfei1.blog.51cto.com/1471532/368586 ht ...
【Microsoft Azure 的1024种玩法】三十. 使用Azure Data Studio之快速上手连接管理Azure SQL 数据库（一）
[简介] Azure Data Studio 是一种跨平台的数据库工具,适合在 Windows.macOS 和 Linux 上使用本地和云数据平台的数据专业人员,Azure Data Studio 利 ...
普通人快速上手编程的三个方法
这个时代,编程已经变得像基础计算机技能一样,这不仅体现在随着python等语言兴起使得学习编程更加简单,还体现在编程在各行各业都具有非常高效的作用. 我妈是怎么学会编程的举个例子,我妈是一个小学老师 ...
GitChat · 移动开发 | 小程序快速上手：三步完成小程序从无到有的开发
GitChat 作者:极笔北客原文: 小程序快速上手:三步完成小程序从无到有的开发关注微信公众号:GitChat 技术杂谈 ,这里一本正经的讲技术小程序作为微信之父张小龙钦点,并多次公开为之宣传 ...
《Python游戏编程快速上手》第三章-猜数字游戏
有段时间没有写博客了,最近在看<Python游戏编程快速上手>一书,计划自己用python写个小游戏玩玩.所以接下来我会把这本书中的所有游戏例子自己实现一遍,然后开始写一个自己的小游戏,话 ...

快速上手RaphaelJS--RaphaelJS_Starter翻译（三）

快速上手RaphaelJS--RaphaelJS_Starter翻译（三）相关推荐

最新文章

热门文章