RaphaelJS

2017-03-23 本文已影响0人 Mr_Bird

最近公司在做一个项目，需要做一个流程图展示的页面。为了方便，笔者就直接借用了Activiti里的流程展示界面，但是界面太粗糙了。所以就研究了一下他的源码。结果发现是用Raphael JS画出的SVG图片。顿时我就想跳楼，这什么东西啊？都没见过（惭愧...）。没办法呀！只能研究了哇。

什么是RaphaelJS？

Raphael是一个适量绘图包，用于在浏览器上绘制图形。几乎所有的浏览器都支持。Raphael绘制出的内容是真实的DOM节点。不仅可以动态的修改它的大小、颜色等等操作来创建你想要的内容，而且可以为你创建的内容赋予点击，悬停，动画等操作。

1.创建画布

Raphael有两种创建画布的方式：第一种是在浏览器窗口上创建画布，第二种是在元素上创建画布（建议使用第二种）。

第一种：在浏览器窗口上创建画布

var paper = Raphael(x, y, width, height); // x坐标 y坐标宽度高度

这样的画布是定位在浏览器窗口的，所以画布的位置绝对定位，所以它会和其他的HTML元素发生重叠。

  var paper = Raphael(30, 30, 60, 60); // 在浏览器窗口上创建画布

第二种：在一个元素中创建画布

var paper = Raphael(element, width, height); // 元素节点本身或ID 宽度高度

要在一个元素上创建画布，需要传入元素本身或元素ID

  // 以元素本身作为参数
  var paper = Raphael(document.getElementById("paper"), 500, 500);

  // 以元素ID作为参数
  var paper = Raphael("paper", 500, 500);

2.在画布上绘制图形

Raphael可以绘制的基本图形有矩形、圆形、椭圆。分别对应以下三个方法：

paper.circle(x, y, r); // x坐标 y坐标半径
paper.rect(x, y, width, height, r); // x坐标 y坐标宽度高度圆角半径(可选)
paper. ellipse(x, y, rx, ry); // x坐标 y坐标水平半径垂直半径

paper.circle

var circle = paper.circle(50, 50, 40);

paper.rect

  var rect = paper.rect(120, 25, 50, 50, 10);

paper.ellipse

  var ellipse = paper.ellipse(240, 50, 40, 25);

3.给图形设置属性

以上图形没有设置任何属性所以显得比较单调，使用attr方法给图形设置属性。attr方法可以接受一个或两个参数（{"attrName": "value"}或attrName, value或attrName或数组attrNames）。

前两种参数是给图形设置属性

  circle.attr({ "fill": "blue", "stroke": "red", "stroke-width": 2 });
  rect.attr("fill", "yellow");
  ellipse.attr("stroke-width", 4);

后两种参数是取出图形的属性

  // {"fill": "blue", "stroke": "red"}
  var circleAttr = circle.attr(["fill", "stroke"]); 

  // yellow
  var rectAttr = rect.attr("fill");

4.复杂图形

除了圆形、矩形、椭圆。在使用中我们往往还需要绘制一些例如三角形、心形等图形。这时就要使用path方法来绘制图形了。path方法只有一个参数（SVG格式的路径字符串paper.path([pathString])），路径字符串由一个或多个命令组成。每个命令以一个字母开始，随后是逗号（“,”）分隔的参数。例如：

 "M10,20L30,40"

我们看到两个命令：“M”与参数(10, 20)和“L”与参数(30, 40)大写字母的意思是命令是绝对的，小写是相对的。
这里是可用命令的简表，详细内容请参照：<a href="https://www.w3.org/TR/SVG/paths.html#PathData">SVG路径字符串格式</a> 。

复杂的图形的path路径可以使用矢量图制作工具来制作，然后到处SVG图片，拿出path属性的值即可。

var path = paper.path("M400 0 L350 100 L450 100 Z");

5.其他绘图方法

文字图形

text方法是用来绘制文本的，如果你需要换行，使用“\n”。有三个参数，paper.text(x, y, text);。x坐标、y坐标、文本字符串。
当然我们同样可以给text设置属性attr。如：font-size、text-anchor、font-family、fill属性。其中text-anchor属性有三个值：start、middle、end，分别表示实作坐标开始、为中心还是结尾，默认为middle。

  var text = paper.text(450, 50, "我是被绘制出来的图片")

引入图片

Raphael可以使用paper.image()方法引入图片。该方法有五个参数：src、x、y、width、height（源图像的URI、x坐标、y坐标、宽度、高度）。

  var text = paper.image("./abc.png", 600, 20, 600, 600);

6.添加事件

RaphaelJS一般具有以下事件：
click、dblclick、drag、hide、hover、mousedown、mouseout、mouseup、mouseover等以及对应的解除事件，只要在前面加上“un”就可以了（unclick、undblclick）。

click、dblclick、mousedown、mouseout、mouseup、mouseover

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

drag

  var cx = circle.attr("cx");
  var cy = circle.attr("cy");
  circle.drag(
      function(dx, dy, x, y, event) {
        console.log("dx:" + dx + "----dy:" + dy);
        console.log("cx:" + cx + "----cy:" + cy);
        circle.attr({ "cx": cx + dx, "cy": cy + dy });
      },
      function(x, y, event) {
        circle.attr("fill", "#FF0F00");
      },
      function(event) {
        circle.attr("fill", "yellow");
        cx = circle.attr("cx");
        cy = circle.attr("cy");
      }
  );

hover

  circle.hover(
    function(event, x, y) {
    circle.attr("fill", "red");
    },
    function(a, b, c) {
      circle.attr("fill", "#FFF000");
    }
  );

7. transform（添加变换）

为元素增加变换，这是独立于其他属性的变换，即变换不改变矩形的x或y。变换字符串跟路径字符串的语法类似：

  "t100,100r30,100,100s2,2,100,100r45s1.5"

每个字母是一个命令。有四个命令：t是平移，r是旋转，s是缩放，m是矩阵。

也有另类的“绝对”平移、旋转和缩放：T、R和S。他们不会考虑到以前的变换。例如：...T100,0总会横向移动元素100px，而...t100,0会移动垂直移动如果之前有r90。比较以下r90t100,0和r90T100,0的结果。

所以，上面的例子可以读作“平移100,100；围绕100,100旋转30°；围绕100,100缩放两倍；围绕中心旋转45°；相对中心缩放1.5倍“。正如你可以看到旋转和缩放命令的原点坐标为可选参数，默认的是该元素的中心点。

矩阵接受六个参数。

circle.dblclick(function() {
  circle.transform("t100,100r45t-100,0");
});

8.animate（添加动画）

为指定的图形添加动画并执行。方法的参数可以有两种方式，
第一种是引用动画对象animation
第二种是直接指定变换后的属性、时间、缓动类型和回调函数（params ms easing callback）。

缓动类型：

“linear” （线性）
“<”或“easeIn”或“ease-in” （由慢到快）
“>”或“easeOut”或“ease-out”（又快到慢）
“<>”或“easeInOut”或“ease-in-out”（由慢到快再到慢）
“backIn”或“back-in”（开始时回弹）
“backOut”或“back-out”（结束时回弹）
“elastic”（橡皮筋）
“bounce”（弹跳）

rect.click(function() {
  rect.animate(
    {
      "width": 55,
      "height": 55,
      "transform": "r45"
    },
    1000,
    "bounce"
  );
});

9.其他常用方法

Element.id和Paper.getById

Element.id用来给元素设置id
Paper.getById用来通过id从画布上取元素

Element.data和Element.removeData

data方法用来关联数据到元素上，该数据会一直伴随着该元素，直至调用了removeData（）。
如果removeData中传入了key，则删除元素与指定键相关联的值。

rect.data({ "key": "value" });
console.log(rect.data("key"));  // value
rect.removeData("key");
console.log(rect.data("key")); // undefined

例子：https://jsfiddle.net/cops/4p8vdhab/
写完这篇文章的时候刚好看到D3JS这个框架，好像很火，我要去研究啦！！！