快速上手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。

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

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

而不是这个：

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值返回，也就是元素的创建坐标。它的结果我们经由过程一段代码来看：

<script type="text/javascript">
            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个对象作为参数。我已经实验过代码：

 <script type="text/javascript">
            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内的元素。我们贴个代码看看：

 <script type="text/javascript">
            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（）