相关文章推荐
冷静的口罩  ·  GitHub - ...·  3 月前    · 
谈吐大方的火车  ·  现代汽车氢燃料电池系统（广州）·  11 月前    · 
干练的香槟  ·  详细对比 6 个地区的 Apple ...·  11 月前    · 
淡定的白开水  ·  如何发送远程命令_无影云电脑(WUYING ...·  2 年前    · 
八块腹肌的荒野  ·  在vue项目中使用jquery和jquery ...·  2 年前    · 
Code  ›  Raphael JS_iteyer的技术博客_
html代码 transform canvas raphael
https://blog.51cto.com/iteyer/3235307
谦和的自行车
3 年前

Raphael Javascript 是一个 Javascript的矢量库。

它可以处理SVG、VML格式的矢量图，它使用SVG W3C推荐标准和VML作为创建图形的基础，你可以用Javascript 操作Dom 很容易的创建出复杂的柱状图、走势图、曲线图等各种图表，可以画图，可以画出任意复杂度的图像，以及图表或图像裁剪和旋转等复杂操作。

什么是RaphaelJS? RaphaelJS是一个矢量绘图包，用来在浏览器中绘制图形。

在这部分，我们将了解到RaphaelJS是什么、它与其它同类的绘图包有什么不同，它如何从html5 Canvas中脱颖而出。

双头和三个字母

差不多十年前，我们有一个技术大突破称为：可缩放矢量图形（SVG）。SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C("World Wide Web ConSortium" 即 " 国际互联网标准组织")在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。尽管SVG基于VML发展而来，但是SVG和VML不能在一个浏览器中同时协调工作。SVG可以运行在所有除了版本低于IE9的的IE之外的浏览器。

一个两头和三个字母的头疼事儿。（IE就是喜欢鸡立鹤群！）

两个问题的结合以及RaphaelJS的诞生

SVG曾是一个美妙的新生儿，但是没人想要承受分娩之痛--使用SVG和VML进行跨浏览器的代码编写太难以致大部分开发者直接用图片去了。因为我们有两种不同的技术，但是他们用不同的语法去完成同样的事情，但是他们却不能共存在一个浏览器中。让它们在一个和谐相处有点困难。

Javascript--求同存异

Javascript最终解决了他俩不能和谐相处的问题，那就是RaphaelJS。

浏览器支持

绝大部分浏览器都支持SVG，ie的所有5.0以上版本都支持VML。而RaphaelJS可以让他们俩在所有浏览器上都运行。RaphaelJS---两栖动物！

什么事RaphaelJS，什么不是？

我们已经知道RaphaelJS是SVG和VML的结合并可以获得浏览器支持。它是万能而且可靠的。但是我们还得知道那些不是RaphaelJS处理的东西。

一些关于矢量图和位图的知识

其实就是讲图形有两种类型：位图和矢量图，位图放大失真而矢量图放大不失真。因为位图是建立像素基础上的，所以放大失真。而矢量图是通过特殊数学算法来实现放大不失真。 如图所示，瓶子上面的字体放大仍旧很清晰的就是矢量图，模糊的就是位图。

RaphaelJS，一个矢量图包

RaphaelJS作为一个矢量图包，它所以绘制的内容是一个真正的DOM节点。因此它可以被动态的访问、操作、变化大小并敲打锤炼成为其它你想要的图形。更有意思的是它们可以绑定比如点击、悬停、移出等鼠标操作。RaphaelJS的功能简直令人难以置信。

RaphaelJS的x,y坐标系

RaphaelJS使用x,y坐标系去绘制图形。屏幕最左上角为0,0位置然后水平为x轴，垂直为y轴。
所以，如果代码里出现(15,20)意思就是这个点位于x轴15个点（水平），y轴20个点的位置（垂直）。
RaphaelJS作为一个矢量图包，绘制时根据浏览器选择使用SVG或者VML。因为绘制出来是一个实际存在的DOM节点，所以可以赋予点击、悬停等操作。这些都是很有趣的地方。
【RaphaelJS和HTML5 Canvas是2个截然不同的东西。尽管它们所做的事情很相似：绘画。但是它们的实现方式并不相同。RaphaelJS以矢量绘制为基础，而HTML5 Canvas则是以光栅为基础 】 安装和搭建RaphaelJS非常简单。你只要下载最新的RaphaelJS的版本然后它引用到html中就行了。

简单的2步，你就可以安装好RaphaelJS并且开始使用了。

第一步-下载RaphaelJS

打开官网  http://dmitrybaranovskiy.github.io/raphael/
下载 RaphaelJS  https://raw.githubusercontent.com/DmitryBaranovskiy/raphael/master/raphael.js
RaphaelJS和别的包不同，它没有其它任何依赖，就是这一个文件。

第二步-添加RaphaelJS到html中

[html] view plain copy
  1. <!DOCTYPE html>
  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3. <title>Raphael Test</title>
  4. </head>
  5. <div id="my-canvas" style="width:140px;padding:0px;margin:0px;">
  6. <!--some html doms-->
  7. <!--some scripts-->
  8. <script type="text/javascript" src="../js/lib/raphael.js"></script>
  9. </body>
  10. </html>
    11. 代码和原书细节可能不同，是我自己测试用例，总体按照原书来写的。

    【注意这里，此书里面讲解了为什么要把引用raphael.js 放置在html元素的最下方。因为浏览器执行html的代码是顺序执行的。你如果把引用放在前面，浏览器会先加载它，导致中间有段时间页面会停滞，这里推荐你先加载dom元素再导入这个js包。】

    到此位置，我们的下载和搭建就已经完成了。

    快速入门 - 创建你第一个图形

    第一步 – 建立一个用来绘制图形的画布

    在浏览器视口创建画布

    创建raphael物体（对象），依赖于raphael的方法和function，如下所示：
  • var paper = Raphael(20, 30, 650, 400);

    • 这里的Raphael对象被初始化并且分配一个变量称为paper。这个变量被赋予RaphaelJS的所有权利。它从此以后成为Raphael画布对象。

    在元素中创建Raphael对象(推荐)

    要在一个元素中初始化一个Raphael对象，我们必须把这个元素的ID或者这个元素本身加入到坐标系(x,y)中。

    我们举个例子：
    [javascript] view plain copy
    1. //元素本身作为参数
    2. //This line creates a Raphael paper inside 'my-canvas', which is 650pxin width and 400px in height
    3. var elm= document.getElementById("my-canvas");
    4. var paper = Raphael(elm, 650, 400);
    5. // 直接传递元素的ID作为参数
    6. //This line also creates a Raphael paper inside 'my-canvas', which is 650px in width and 400px in height
    7. var paper = Raphael("my-canvas", 650, 400);

      8. 这样我们就可以启动引擎开始跑了！

    第二步--绘制圆形

    Raphael可以绘制的基本图形有圆形、矩形和椭圆等。

    圆形可以通过调用circle()来发来进行。我们使用刚才的paper对象来进行调用。

    语法如下：
    [javascript] view plain copy
    1. var cir = paper.circle(x,y,r);
    2. // x and y are the positioning co-ordinates, and "r" is the radius of the circle
    3. //Here the circle is assigned to a variable called cir.
    4. //Example
    5. var cir = paper.circle(35,25,20);
    6. // This will create a circle of 20 pixels in radius at 35,25 (X & Y axis).


      7. circle()方法一共3个参数，分别是x,y坐标和半径。我们在刚才的代码中添加上面的操作。
      [html] view plain copy
      1. <!DOCTYPE html>
      2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      3. <title>Raphael Test</title>
      4. </head>
      5. <div id="my-canvas" style="width:140px;padding:0px;margin:0px;"></div>
      6. <!--some html doms-->
      7. <!--some scripts-->
      8. <script type="text/javascript" src="../js/lib/raphael.js"></script>
      9. <script type="text/javascript">
      10. var paper = Raphael("my-canvas", 650, 400);
      11. var cir = paper.circle(30, 30, 10);
      12. </script>
      13. </body>
      14. </html>
        15. Raphael JS_html_02

        效果如上图所示，由于没有赋予paper和cir其它属性，所以没有颜色之类的属性，我们看起来不直观。下面将介绍attr()方法。

        attr() 方法



        attr()方法，将我们要添加或者修改的属性作为参数，属性其实就是键值对。如果你熟悉jQuery的话，你就明白attr()的语法与jquery的完全一致。进一步讲，就是JSON格式数据。做过js的童鞋们，或多或少应该接触过JSON。没接触过的，建议去翻阅一下资料。比XML更快的数据传递方式，以后肯定会大放异彩。

        语法如下：
        [javascript] view plain copy
        1. element.attr({
        2. "Property1":value1,
        3. "Property2":value2
        4. //加入如下属性的键值对
        5. var coloredCircle = paper.circle(35,25,20).attr({
        6. "fill":"#17A9C6",
        7. "stroke":"#2A6570",
        8. "stroke-width":2

          9. 刚才这个例子添加到我们的Script里面就行了，这里不再截图和添加代码了。效果是：在坐标（35，25）位置出现一个半径为20的颜色为深绿的圆（本人色弱，颜色认错大家莫怪）。

          当然，还有其它非常多的属性可以添加。有兴趣大家可以自己去查阅一下资料，这里暂不提及。本书最后部分会有涉及。

          下面我们要讲的部分是本书的重点，也是学习Raphael.js的重点。上面讲了那么多其实不过是三两行代码就可以搞定的事情，前提是你正确的下载了包并引用了正确的路径。接下来我们要讲的是创建、操作、转换、动画、事件响应等内容，是Raphael的核心部分，也是工作涉及到的重要部分。
        你需要了解的重要特性
        创建一个Raphael的元素非常容易。为了更加方便，有些已经定义好的方法供生成一些基本的几何图形。

        基本图形

        RaphaelJS有3个基本图形，分别是 圆、椭圆和矩形。前面已经讲过圆形，这里我就不再赘述圆形了。

        矩形

        我们可以使用rect()方法来创建一个矩形。这个方法一共有4个必须参数和一个可选参数。5个参数按顺序分别是x坐标、y坐标、矩形宽度、矩形高度、圆角半径。

        圆角半径默认为0，为可选参数。

        语法如下：
        [javascript] view plain copy
        1. paper.rect(X,Y,Width,Height,border-radius(optional));
        2. var rect = paper.rect(35,25,170,100).attr({
        3. "fill":"#17A9C6", //filling with background color
        4. "stroke":"#2A6570", // border color of the rectangle
        5. "stroke-width":2 // the width of the border

          6. 圆角矩形：
          [javascript] view plain copy
          1. var rect = paper.rect(35,25,170,100,20).attr({
          2. "fill":"#17A9C6", //filling with background color
          3. "stroke":"#2A6570", // border color of the rectangle
          4. "stroke-width":2 // the width of the border

            5. 代码如下：

            [html] view plain copy
            1. <!DOCTYPE html>
            2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            3. <title>Raphael Test</title>
            4. </head>
            5. <div id="my-canvas" style="width:140px;padding:0px;margin:0px;">
            6. <!--some html doms-->
            7. <!--some scripts-->
            8. <script type="text/javascript" src="../js/lib/raphael.js">
            9. </script>
            10. <script type="text/javascript">
            11. var paper = Raphael("my-canvas", 650, 400);
            12. var cir = paper.circle(30, 30, 10);
            13. var coloredCircle = paper.circle(55, 45, 20).attr({
            14. "fill": "#17A9C6",
            15. "stroke": "#2A6570",
            16. "stroke-width": 2
            17. var rect = paper.rect(65, 65, 120, 80).attr({
            18. "fill": "#17A9C6", //filling with background color
            19. "stroke": "#2A6570", // border color of the rectangle
            20. "stroke-width": 2 // the width of the border
            21. var rect1 = paper.rect(190, 65, 120, 80,20).attr({
            22. "fill": "#17A9C6", //filling with background color
            23. "stroke": "#2A6570", // border color of the rectangle
            24. "stroke-width": 2 // the width of the border
            25. </script>
            26. </body>
            27. </html>
              1. //paper.ellipse(X,Y,rX,rY);
              2. var ellipse = paper.ellipse(195,125,170,100).attr({
              3. "fill":"#17A9C6", // background color of the ellipse
              4. "stroke":"#2A6570", // ellipse's border color
              5. "stroke-width":2 // border width

                6. 由于和上面矩形的代码几乎一致，除了参数意义。这里不再重复代码和截图。

                复杂图形

                建立上面那种基本图形可以说非常简单。但是复杂图形，比如五角星、八角形等怎么办？它们根本不是圆或者矩形或者椭圆。
                这是Raphael的另外一个奇异之处。
                复杂图形的创建将使用path()方法。它只有一个参数，我们称它为pathString。看上去就是一串字母和数字的组合。其实它非常易于阅读和理解。

                在这之前，我们先想象一下自己画复杂图形的场景。其实你拿一支笔在纸上画画的话，就好像你从一个起点开始，不断的连线到构成你的图画。其实这里的机制就是如此，通过线的连接来构成复杂图形，连线可以使直线也可以是曲线。

                Paper.path([pathString])

                pathString SVG格式的路径字符串。
                路径字符串由一个或多个命令组成。每个命令以一个字母开始，随后是逗号（“,”）分隔的参数。例如："M10,20L30,40"

                我们看到两个命令：“M”与参数(10, 20)和“L”与参数(30, 40)大写字母的意思是命令是绝对的，小写是相对的。

                这里是可用命令的简表，详细内容请参照： SVG路径字符串格式 。 移动到（moveTo） (x y)+ 闭合路径（closepath） (none) 直线（lineTo） (x y)+ 曲线（curveto） (x1 y1 x2 y2 x y)+ (x2 y2 x y)+ 二次贝赛尔曲线 (x1 y1 x y)+ 平滑二次贝塞尔曲线 (x y)+ (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ Catmull-Rom 曲线* x1 y1 (x y)+

                * “Catmull-Rom 曲线”不是标准SVG命令，在2.0版时被加入。 注：有种特殊情况，路径只包含三个命令：“M10,10R…z”。在这种情况下，路径将平滑连接到它的起点。

                语法如下：

                [javascript] view plain copy
                1. paper.path("pathString");
                2. var tri = paper.path("M0,0L26,0L13,18L0,0").attr({
                3. "fill":"#17A9C6", // filling the background color
                4. "stroke":"#2A6570", // the color of the border
                5. "stroke-width":2 // the size of the border

                  6. 具体例子的介绍稍后，这里先说明一下，上面的命令都是命令+参数这样子的。但是命令有大小写的区别，其效果也不同。大写表示绝对，小写为相对。比如(M20,20)表示从（0,0)位置来计算的，而(m20,20)则是相对画笔的位置（dom位置）来计算。
                  在这里你可能会感觉很头大，因为这么多命令，还有几个挺难理解的曲线。再加上复杂图形怎么可能直接就写一串字符出来。其实不必担心，因为复杂图形你可以使用工具来进行绘制。在矢量图制作工具中制作完成然后导出svg格式就行了。推荐使用一个叫做inkscape的矢量图制作工具。
                  （2014-01-07接上）
                  首先说下，昨天文章里面有个内容是js的引用在body底下位置，这里其实如果你使用jquery或者dojo等框架，可以等document加载完成加入那些js就行了。比如$(document).ready(function(){})这样子的。

                  下面举一些例子来讲解下path里面的那些命令。

                  [html] view plain copy
                  1. <!DOCTYPE html>
                  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                  3. <title>Raphael Test</title>
                  4. </head>
                  5. <div id="my-canvas" style="width:140px;padding:0px;margin:0px;">
                  6. <!--some html doms-->
                  7. <!--some scripts-->
                  8. <script type="text/javascript" src="../js/lib/raphael.js">
                  9. </script>
                  10. <script type="text/javascript">
                  11. var paper = Raphael("my-canvas", 700, 600);
                  12. //1、直线使用path命令L
                  13. paper.path("M20,20L100,20z").attr({
                  14. "fill": "#5DDEF4",
                  15. "stroke": "#2A6570",
                  16. "stroke-width": 2
                  17. //2、三角形使用Path命令L
                  18. paper.path("M130,30 L200,30 L160,90 z").attr({
                  19. "fill": "#5DDEF4",
                  20. "stroke": "#2A6570",
                  21. "stroke-width": 2
                  22. //3、T形使用Path命令H,V
                  23. paper.path("M 40,40 H 90 V 60 H 70 V 110 H 60 V 60 H 40 z").attr({
                  24. "fill": "#5DDEF4",
                  25. "stroke": "#2A6570",
                  26. "stroke-width": 2
                  27. //4、2次贝塞尔曲线形，使用path命令Q
                  28. paper.path("M240,40L300,40L300,100");
                  29. paper.path("M240,40Q300,40 300,100").attr('stroke', 'red');
                  30. //5、2次贝塞尔曲线形，使用path命令Q和T（第一个是正常绘制，第二个光滑连接）
                  31. paper.path('M10,250 L90,130 L160,160 L250,190 L250,70');
                  32. paper.path('M10,250 Q90,130 160,160 T250,70').attr('stroke', 'red');
                  33. //6、绘制3次贝赛尔曲线，使用命令C，平滑画线使用命令S
                  34. paper.path('M320,120 L350,180 L450,260 L480,140');
                  35. paper.path('M320,120 C350,180 450,260 480,140').attr('stroke', 'red');
                  36. paper.path('M320,120 S450,260 480,140').attr('stroke', 'yellow');
                  37. </script>
                  38. </body>
                  39. </html>
                    40. 代码里面删除了上面文字里面的基本图形的绘制代码。为了节省空间，这里就使用这些绘制path的代码。上面代码中一共6个小模块，使用了path命令中最后2个之外的其它所有命令。最后两个待会儿解释。先解释上面几个。代码运行效果图如下：
                    Raphael JS_html_04

                    这里说明下，原书这里是去inkscape里面里面用inkscape自带的一些工具画了一些星星之类的图形，这里我们是直接写的path命令串，可以更加容易地加深对于path的理解。我们看运行效果图，一共有6个图形。我们上面的代码块也有6小块，分别对应浏览器上面的6个图形。
                    绘制直线，准确的说是绘制连线，我们代码内容是这样的：
                    [javascript] view plain copy
                    1. paper.path("M20,20L100,20z")

                      2. 这里，pathString为M20,20L100,20z，我们查看上面的path命令表。发现执行情况是这样的：我们的笔移动到坐标(20,20)的位置，连一条线到(100,20),闭合path。也就是上面6个图形中的最左上角的那个线段。
                      接下来是那个三角形：
                      [javascript] view plain copy
                      1. paper.path("M130,30 L200,30 L160,90 z")

                        2. 三角形这个命令和上面线段是一致的，只是多连了一次，构成了一个三角形。这里我们是可以明白，只要你不断的用L命令去连接，其实可以构成任意复杂的图形。下面我们继续讲解第三个代码块：
                        [javascript] view plain copy
                        1. paper.path("M 40,40 H 90 V 60 H 70 V 110 H 60 V 60 H 40 z")

                          2. 这里我们用到了H和V命令，这俩命令我们通过查看path命令表可知道它们分别是横着和竖着连线。所以刚才上面那行代码的执行情况是：我们的笔移动到(40,40)，水平线连接到x坐标90，垂直线连接到60，水平线······如此反复，需要注意H和V后面跟的不是线的长度而是坐标，最后我们闭合path得到一个T的图形。这个其实使用上面那个L命令也可以做到，但是水平和垂直命令名对于这种0角度或者90度的线处理起来更加容易。
                          第四块代码如下：
                          [javascript] view plain copy
                          1. paper.path("M240,40L300,40L300,100");
                          2. paper.path("M240,40Q300,40 300,100");

                            3. 这里我们第一行代码是画两条线段，上面讲解到了，只不过这里没有z结尾来闭合path。第二行代码使用的坐标与第一个完全一致，只不过两个L命令换成了Q，我们查看命令表，Q表示二次贝塞尔曲线，效果大家可以看靠上位置的那个曲线和曲线附着的的线段。Q命令的后的坐标含义可以通过上面线段的坐标来得知。
                            第五个代码块如下：
                            [javascript] view plain copy
                            1. paper.path('M10,250 L90,130 L160,160 L250,190 L250,70');
                            2. paper.path('M10,250 Q90,130 160,160 T250,70');

                              3. 这里的效果图是上面图形中最大那个图形。其实如果理解了第四个图形，这个很好理解。唯一的不同就是这里使用了T命令，这个T和接下来的S命令很相似，就是分别对应Q和S的平滑曲线画法，生活他们中间的那个坐标，而直接使用后一（两）个坐标即可。

                              第六个代码块如下：
                              [javascript] view plain copy
                              1. paper.path('M320,120 L350,180 L450,260 L480,140');
                              2. paper.path('M320,120 C350,180 450,260 480,140').attr('stroke', 'red');
                              3. paper.path('M320,120 S450,260 480,140').attr('stroke', 'yellow');

                                4. 看到最后一幅图，我们看的到一条红色曲线和一条黄色，两个图形的区别就是命令中缺省第一个坐标的区别。上面第5个图形也可以做成类似第六幅图的曲线对比图，大家可以稍微修改一下代码就能搞定了。当然这里其实曲线的每个附着的线段是不是必要存在，为了加深理解，我们将它画了出来。

                                **************************************

                                关于椭圆曲线，这里我直接引用http://lblovesnow-163-com.iteye.com/blog/1485388这个博客博主的测试用例吧。这个博主写的这些测试用例非常到位，我就借花献佛了。代码如下：

                                [html] view plain copy
                                1. <!DOCTYPE html>
                                2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                                3. <title>Raphael Test</title>
                                4. </head>
                                5. <div id="my-canvas" style="width:140px;padding:0px;margin:0px;">
                                6. <!--some html doms-->
                                7. <!--some scripts-->
                                8. <script type="text/javascript" src="../js/lib/raphael.js">
                                9. </script>
                                10. <script type="text/javascript">
                                11. var paper = Raphael("my-canvas", 700, 600);
                                12. //绘制左上的椭圆
                                13. paper.ellipse(130,40,60,30);
                                14. paper.ellipse(70,70,60,30);
                                15. paper.path('M70,40 A60,30 0 0,0 130,70').attr('stroke','yellow');
                                16. paper.text(40,30,'start(70,40)').attr({
                                17. 'font-size':11,
                                18. 'fill':'blue'
                                19. paper.text(160,80,'end(130,70)').attr({
                                20. 'font-size':11,
                                21. 'fill':'blue'
                                22. paper.text(70,120,'large-arc-flag=0\nsweep-flag=0').attr({
                                23. 'font-size': 11,
                                24. 'fill': 'green',
                                25. 'text-anchor': 'start'
                                26. //绘制右上的椭圆
                                27. paper.ellipse(330,40,60,30);
                                28. paper.ellipse(270,70,60,30);
                                29. paper.path('M270,40 A60,30 0 0,1 330,70').attr('stroke','yellow');
                                30. paper.text(240,30,'start(270,40)').attr({
                                31. 'font-size':11,
                                32. 'fill':'blue'
                                33. paper.text(360,80,'end(330,70)').attr({
                                34. 'font-size':11,
                                35. 'fill':'blue'
                                36. paper.text(270,120,'large-arc-flag=0\nsweep-flag=1').attr({
                                37. 'font-size': 11,
                                38. 'fill': 'green',
                                39. 'text-anchor': 'start'
                                40. //绘制左下的椭圆
                                41. paper.ellipse(130,240,60,30);
                                42. paper.ellipse(70,270,60,30);
                                43. paper.path('M70,240 A60,30 0 1,0 130,270').attr('stroke','yellow');
                                44. paper.text(40,230,'start(70,240)').attr({
                                45. 'font-size':11,
                                46. 'fill':'blue'
                                47. paper.text(160,280,'end(130,270)').attr({
                                48. 'font-size':11,
                                49. 'fill':'blue'
                                50. paper.text(70,320,'large-arc-flag=1\nsweep-flag=0').attr({
                                51. 'font-size': 11,
                                52. 'fill': 'green',
                                53. 'text-anchor': 'start'
                                54. //绘制右下的椭圆
                                55. paper.ellipse(330,240,60,30);
                                56. paper.ellipse(270,270,60,30);
                                57. paper.path('M270,240 A60,30 0 1,1 330,270').attr('stroke','yellow');
                                58. paper.text(240,230,'start(270,240)').attr({
                                59. 'font-size':11,
                                60. 'fill':'blue'
                                61. paper.text(360,280,'end(330,270)').attr({
                                62. 'font-size':11,
                                63. 'fill':'blue'
                                64. paper.text(270,320,'large-arc-flag=1\nsweep-flag=1').attr({
                                65. 'font-size': 11,
                                66. 'fill': 'green',
                                67. 'text-anchor': 'start'
                                68. </script>
                                69. </body>
                                70. </html>
                                  71. 其中有个paper.text方法正好我们解析来要讲解的内容，这里也算提前预览一下。

                                  A(a)elliptical arc(rx ry x-axis-rotation large-arc-flag sweep-flag x y) ；

                                  参数含义：

                                  rx：横轴的长度；

                                  ry：纵轴的长度；

                                  x-axis-rotation：椭圆的横轴与x轴的角度；

                                  large-arc-flag：区分弧度的大小（0表示小角度弧度，1表示大角度弧度）；

                                  sweep-flag：绘制弧度围绕椭圆中心的方向（0表示逆时针方向，1表示顺时针方向）；

                                  x y：椭圆曲线终点坐标；

                                  效果图如下：
                                  Raphael JS_矢量图_05


                                  图画上面有个A命令的参数含义，其实加上这位博主的参数含义的解释还是很好理解的。注意图中的黄色曲线，每个下面有2个参数的解释，忽略4组图形的开始和结束坐标，其实他们的区别就是在larget-arc-flag和sweep-flag的参数设置不同。

                                  large-arc-flag：区分弧度的大小（0表示小角度弧度，1表示大角度弧度）；

                                  sweep-flag：绘制弧度围绕椭圆中心的方向（0表示逆时针方向，1表示顺时针方向）；

                                  是不是一目了然？larget-arc-flag就是画小弧还是大弧的区别、sweep-flag是逆时针还是顺时针。

                                  “Catmull-Rom 曲线”不是SVG标准命令，这里不再赘述，有兴趣的可以自己去研究测试一下。

                                  接下来我们讲解的方法是text方法。上例中出现了paper.text()，是用来显示文字内容的方法。语法其实很简单，就是x,y坐标和文字内容。

                                  [javascript] view plain copy
                                  1. paper.text(X,Y,"Raphael JS Text");
                                  2. var text = paper.text(40,55,"Raphael Text").attr({
                                  3. "fill":"#17A9C6", // font-color
                                  4. "font-size":75, // font size in pixels
                                  5. "text-anchor":"start",
                                  6. "font-family":"century gothic" // font family of the text

                                    7. //text-anchor属性表明文字与坐标的关系，是从这个坐标开始、为中心还是为结尾。属性值可以设置 "start", "middle" or "end" 默认"middle"。

                                    操作Raphael元素的样式

                                    在上篇的内容中，我们已经提到了一个方法是attr()方法，是给一个Raphael图形添加样式及属性定义的方法。我们要修改一个元素的样式和属性也可以使用attr方法来进行。上篇中我们声明了一个rect对象，这里我们可以来修改它的样式：
                                    [javascript] view plain copy
                                    1. rect.attr('fill','#ddd');
                                      2. 这行代码将会把我们绘制好的矩形修改成为内部填充褐色。也就是说，attr()其实相当于mysql里面的insert into语句中的on duplicate key update,没有我就添加有我就更新这样子执行方式。

                                      Raphael元素的变换

                                      Raphael其实提供了好几个方法供大家调用来变换元素，但是其中几个的方法都是不推荐的。唯一推荐的元素变换方法是transform()方法。transform方法的参数与上篇最后的path命令串很相似，只不过这是transform命令串。它有4个命令：
     
    推荐文章
    冷静的口罩  ·  GitHub - AOMediaCodec/libavif: libavif - Library for encoding and decoding .avif files
    3 月前
    谈吐大方的火车  ·  现代汽车氢燃料电池系统（广州）
    11 月前
    干练的香槟  ·  详细对比 6 个地区的 Apple Music，到底谁的体验最好、曲库最全？_腾讯新闻
    11 月前
    淡定的白开水  ·  如何发送远程命令_无影云电脑(WUYING Workspace)-阿里云帮助中心
    2 年前
    八块腹肌的荒野  ·  在vue项目中使用jquery和jquery插件-腾讯云开发者社区-腾讯云
    2 年前
    今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
    删除内容请联系邮箱 2879853325@qq.com
    Code - 代码工具平台
    © 2024 ~ 沪ICP备11025650号