RaphealJS学习

RaphealJS

RaphealJS是用于在浏览器上面绘制图形的用JavaScript实现的矢量图形库。几乎所有的浏览器都支持他。（除了版本低于IE9的IE浏览器），你只需要下载RaphealJS然后将他引入到HTML中就可以使用了。

RaphealJS使用

创建画布

创建画布有两种方式创建
1、在浏览器中创建画布。

var object = Rapheal(x,y,width,height);
x:x坐标
y:y坐标
width:画布的宽度
height:画布的高度

x,y是基于浏览器左上角的，x是横坐标，y是纵坐标

2、在元素中创建画布，比如在div中创建画布。

//第一种写法
var elm = document.getElementById("id");
var paper = Rapheal(elm,x,y);

//第二种写法
var paper = Rapheal(“id”,x,y);

id:元素的id
x:基于元素的x坐标
y:基于元素的y坐标

推荐在元素中创建画布，因为在浏览器中创建画布，使用的是绝对定位，可能会出现与别的样式相重叠的情况。

绘制图形

Rapheal可以绘制圆形，矩形，椭圆形等。可以使用attr();方法给图形添加颜色，边框等属性。
1、绘制圆形

   var paper = Rapheal(“id”,350,200);
   var circle = paper.circle(x,y ,r ).attr({
              "fill":"red", //图形填充颜色
              "stroke":"blue", //图形边框颜色
            "stroke-width":2 //图形边框宽度
  });
//x:x坐标
//y:y坐标
//r:绘制的圆半径

2、绘制矩形

 paper.rect(x, y, width, height,r);
//x : x坐标
// y : y坐标
// width：图形宽度
// height：图形高度
// r: 图形半径，此参数为非必填参数，如果填上就相当于css中的radius。

3、绘制椭圆形

paper.ellipse(x,y,rX,rY);
//x : x坐标
// y : y坐标
//rX:水平半径，椭圆宽度➗2
//rY:垂直半径，椭圆高度➗2

图片示例

位置提示

 paper.text(x, y, "提示内容");

导入图片

 paper.image("imageURL",x, y, width, height);

上面的方法可以用来导入图片到制定的位置，并设置图片的大小，我们还能将图片导入到图形中去，只需要将attr();方法中的fill属性值改为图片即能实现。

  var circle = paper.circle(x,y ,r ).attr({
              "fill":"url(imageURL)", //图片填充
              "stroke":"blue", //图形边框颜色
            "stroke-width":2 //图形边框宽度
            "href":'http://baidu.com'//为绘制的图形加上链接
  });

attr();方法中还有很多属性能添加，比如绘制图形的透明度，0表示完全不透明，1表示完全透明，透明度分为全部透明（opacity）,图形边框透明（stroke-opacity）和填充透明（fill-opacity）。
e.g.

var paper = Raphael("my-canvas", 450, 500); 
        var coloredCircle = paper.circle(50 ,25,20).attr({ 
        "fill":"red", 
        "stroke":"blue", 
        "stroke-width":2,
        "opacity":0.1
        }); 
        var coloredRect  = paper.rect(35, 65, 120, 80).attr({ 
        "fill":"#17A9C6", 
        "stroke":"red", 
        "stroke-width":1,
        "stroke-opacity":0.3
        }); 
         var rect1 = paper.rect(35, 160, 120, 80,20).attr({
                "fill": "#17A9C6", 
                "stroke": "#2A6570", 
                "stroke-width": 2 ,
                "fill-opacity":0.6
            });

image.png

矩形裁剪

可以使用clip-rect(top,right,bottom,left)属性来标注裁剪的位置。

    var cutCircle = paper.circle(100,100,80);
            cutCircle.attr({
                "fill":"pink", 
                "stroke":"blank", 
                "stroke-width":1,
                "opacity":1，
                'clip-rect': '20,20,80,80'
            });

如果没有加上属性的图和加上属性图的对比

image.png

对于裁剪，如果left = right ,bottom = top ; left >right; bottom <top 这种情况的话，元素会被完全裁掉而不可见，通过这种方式隐藏的元素是可以被屏幕阅读器等辅助设备识别的，从而提高了页面的可用性

渐变

Raphael支持线性和梯度渐变去填充图形，需要指定字符串的格式去做到线性渐变：

<angle>-<color>[-<color>[:<offset>]]*-<color>
//线性最基本的格式是：
<angle>-<color>-<color>
//指可以定义任意个数的[-<color>[:<offset>]]来创建颜色
[-<color>[:<offset>]]

下面的语法就是达到径向渐变的效果：

r[(<fx>,<fy>)]<color>[-<color>[:<offset>]]*-<color>，其中fx,fy的取值范围为[0,1],用来定义渐变点的位置
//径向渐变基本格式是：
r<color>-<color>

[]括号里面的参数为可选填参数
eg
线性渐变

var rect1 = paper.rect(50,50,100,100);
            var rect2 = paper.rect(200,50,100,100);
            var rect3 = paper.rect(350,50,100,100);
            rect1.attr({
                "fill":"0-#ffc1cb-#fff", 
                "stroke":"blank", 
                "stroke-width":1,
                "opacity":1
            }); 
        
            rect2.attr({
                "fill":"45-#ffc1cb-#fff", 
                "stroke":"blank", 
                "stroke-width":1,
                "opacity":1
            }); 
            
            rect3.attr({
                "fill":"90-#ffc1cb-#fff", 
                "stroke":"blank", 
                "stroke-width":1,
                "opacity":1
            });

image.png

3个矩形是按照0°，45°，90°的形式从粉色渐变到白色的，是按照x轴正向的逆时针方向来定义角度的。

eg
径向渐变

var cutCircle1 = paper.circle(100,300,80);
            var cutCircle2 = paper.circle(280,300,80);
            var cutCircle3 = paper.circle(480,300,80);
            //由中间开始从粉色过度到白色
            cutCircle1.attr({
                "fill":"r#ffc1cb-#fff", 
                "stroke":"blank", 
                "stroke-width":1,
                "opacity":1
            }); 
        //分段定义颜色，到80%的位置渐变为白色
            cutCircle2.attr({
                "fill":"r#ffc1cb-#fff:80-#fff", 
                "stroke":"blank", 
                "stroke-width":1,
                "opacity":1
            }); 
        //设置位置定义渐变点的位置  
            cutCircle3.attr({
                "fill":"r(0.2,0.1)#ffc1cb-#fff", 
                "stroke":"blank", 
                "stroke-width":1,
                "opacity":1
            });

image.png

以上的方法只能绘制简单的图形，但是如果需要绘制复杂的图形要怎么办呢？这个时候我们就会用到path()方法，，path()方法只有一个参数，但是该参数是一个SVG格式的路径字符串，path([pathString])对象是不能做径向渐变的，这只适用于基本图形

path([pathString])

路径字符串由一个或者多个命令组成
SVG路径字符串格式

命令	名称	参数	描述	小写描述终点
M( m)	移动到	（xy)+	在给定的(x,y)坐标处开始新路径，+号表示需要一个或多个给定参数，大写表示绝对路径，小写表示相对路径	(cpx+x,cpx+y)
Z(z)	关闭	无	关闭当前子路径，由于没有参数，所以大小写表示同样的效果
L(I)	直线	(xy)+	从当前点到给定的(x,y)绘制一条直线，+号表示可以指定多个坐标来绘制折线	(cpx+x,cpx+y)
H(h)	水平线	x+	从当前点绘制一条水平线	(cpx+x,cpy)
V(v)	垂直线	y+	从当前点绘制一条垂直线	(cpx,cpy+y)
Y(y)	曲线	(x1 y1 x2 y2 xy)+	使用(x1,y1)作为曲线的起点，(x2,y2)作为曲线的终点，绘制从当前点到(x,y)的曲线，可以指定多个坐标来绘制多面体，命令结束时，新的当前点为(x,y)	(cpx+x,cpy+y)
S(s)	速记/平滑曲线	(x2 y2 xy)+	绘制从当前点到(x,y)的立方贝塞尔曲线，(x2,y2)为曲线末端控制点	(cpx+x,cpy+y)
Q(q)	二次贝塞尔曲线	(x1 y1 x y)+	使用(x1,y1)作为控制点，绘制从当前点到(x,y)的二次贝塞尔曲线，命令结束时，新的当前点为(x,y)	(cpx+x,cpy+y)
T(t)	速记/平滑二次贝塞尔曲线	(xy)+	绘制从当前点到(x,y)的二次贝塞尔曲线，命令结束时，新的当前点为(x,y)	(cpx+x,cpy+y)
A(a)	椭圆弧	(rx ry x轴旋转度 xy)+	从当前点到(x,y)的一个椭圆弧，椭圆大小由rx ry 和x轴旋转度决定

var paper2 = Raphael("my-canvas1", '100%',400); 
        var test = paper2.path("M100 100L200 100 200 300 z"); 
        test.attr({
            "fill":"blank", 
            "stroke-width":1,
            "opacity":1
        });
        
        var test2 = paper2.path("m350 150 l0 50 50 0 0 100 100 0 0 -100 50 0 0 -50 Z");             
        test2.attr({
            
            "stroke-width":1,
            "opacity":1
        });
        
        
        var test3 = paper2.path("m800 100 l-25 50 -75 0 50 100 -50 100 100 -50 100 50 -50 -100 50 -100 -75 0 Z");             
        test3.attr({
            "fill":"red",
            "stroke-width":1,
            "opacity":1
        });
        
        //曲线
        var paper3 = Raphael("my-canvas2", '100%',400); 
        var test4= paper3.path("M200 0l0 100 -100 0 0 100 Z"); 
        test4.attr({
            "fill":"yellow",
            "stroke-width":1,
            "opacity":1
        });
         paper3.path('m200 0 q50 25 -50 100').attr({
            "stroke":"red",
         });
         
          paper3.path('m150 100 q-100 -25 -50 100').attr({
            "stroke":"red",
         });

path路径

曲线

方法

（该例子的颜色形状什么的是在网上看的，代码是自己写的）

        var paper4 = Raphael("my-moods",'100%',500);
        var moods = ['Rubbish', 'Not Good', 'OK', 'Smily', 'Positively Manic'];
        var colors = ['#cc0000', '#a97e22', '#9f9136', '#7c9a2d', '#3a9a2d'];
        var type = 0 ;
        window.onload = function (){
            for(var i = 0; i < moods.length; i++) {
                type += 1;
                    paper4.circle(250+i*70, 300, 20).attr({fill: '#000'});
                    paper4.text(250+i*70, 300, 'My\nMood').attr({fill: '#fff'});
                    for(var j = 0; j < type; j++){
                         paper4.circle(250+i*70, 250-j*50, 20).attr({
                        stroke: 'none',
                        fill: colors[i]
                    });
                    }
                    paper4.text(250+i*70, 350, moods[i]).attr({fill: colors[i]}); 
            }
        }

image.png

RaphealJS的事件和JQuery的事件一样，也是有click(),dbclick(),mousedown(),mouseup()等这些基本事件的，具体用法同JQuery一样。
eg

 var circle = paper.circle(x,y ,r ).attr({
              "fill":"url(imageURL)", 
              "stroke":"blue",
            "stroke-width":2, 
            "href":'http://baidu.com'
  });
circle .click(function(){
  //代码主体
});

clone()方法：克隆一个RaphealJS的方法调用。克隆出来的东西是只想一个新的对象。

var newCircle = circle.clone().attr({
             "fill":"url(imageURL)",
              "stroke":"blue",
            "stroke-width":2,//为绘制的图形加上链接
});

var newCircle =  circle.attr({
             "fill":"url(imageURL)",
              "stroke":"blue",
            "stroke-width":2,//为绘制的图形加上链接
});

//下面这个还是指向的是原来的circle，而不是指向的是一个新的newCircle ；

data()方法：可以根据自己的需要去定义data里面的内容，相当于一个key,value的形式，最后可以通过key取出你想要的值。

circle.data({
  name:"qiqi",
  age:24
});

var age = circle.data("age");//取出age的值
//可以通过removeData()方法移除不想要的东西
 circle.removeData("age")；

getBBox()方法：获取元素的边界框，其含义就是能包裹函数的最小矩形那个框。

    var cutCircle1 = paper.circle(100,300,80);
            cutCircle1.attr({
                "fill":"r#ffc1cb-#fff", 
                "stroke":"blank", 
                "stroke-width":1,
                "opacity":1
            }); 
            var bbox = cutCircle1.getBBox();
             paper.rect(bbox.x,bbox.y,bbox.width,bbox.height).attr({
                'stroke':'white'
             });

//白色的框就是我们通过getBBox()方法获取出来的。

image.png

getPointAtLength()方法：该方法主要是针对path对象的，path.getPointAtLength(length) ，返回的是位置点的坐标。
x:横坐标
y:纵坐标
Alpha :切线的角度

toFront() 、toBack() 、hide() 、show() 、remove()方法：toFront() 、toBack()这两个相当于css中的z-index，toFront()是z-index的值大的，toFront()刚好相反。hide()和show()隐藏与显示，remove()删除dom节点。

paper.clear()方法:通过这个方法可以清楚画布中的所有元素。
paper.image(“src”,x,y,width,height)方法：可以导入图片到指定位置
paper.setSize(width，height)方法：用来重新设置画布的大小
paper.set()方法:可以啊帮助我们对Raphael元素进行分组

            var cutCircle1 = paper.circle(100,300,80);
            var cutCircle2 = paper.circle(280,300,80);
            var cutCircle3 = paper.circle(480,300,80);
            cutCircle1.attr({
                "fill":"r#ffc1cb-#fff", 
                "stroke":"blank", 
                "stroke-width":1,
                "opacity":1
            }); 
            
            //获取边界线
            var bbox = cutCircle1.getBBox();
             paper.rect(bbox.x,bbox.y,bbox.width,bbox.height).attr({
                'stroke':'white'
             });
            
            cutCircle2.attr({
                "fill":"r#ffc1cb-#fff:80-green", 
                "stroke":"blank", 
                "stroke-width":1,
                "opacity":1
            }); 
            
            cutCircle3.attr({
                "fill":"r(0.2,0.1)#ffc1cb-#fff", 
                "stroke":"blank", 
                "stroke-width":1,
                "opacity":1
            });
            //对元素进行分组管理
          var raphaelSet = paper.set();  
          raphaelSet.push(cutCircle1, cutCircle2, cutCircle3);
          raphaelSet.attr({
            'fill':'yellow'
          });

分组管理前

分组管理后

set()方法里面还有些方法

申明一个set方法

var raphaelSet = paper.set();

set.clear()方法:清空set
set.exclude(Raphael元素)方法:排除该元素执行set方法
set.forEach()方法:循环创建set对象

paper.set.forEach(function(){
//代码体
});

set.splice(index1,length,Raphael元素)方法:从set里面index的位置开始往后删除length个元素，然后把Raphael元素添加进来,返回的是被删除的元素

变换对象 -- transform
Raphael 对象变换有四个命令:
t –平移
r –旋转
s – 缩放
m – 矩阵

rect3.attr({
    "fill":"90-#ffc1cb-#fff", 
    "stroke":"blank", 
    "stroke-width":1,
    "opacity":1
    });         
    rect3.transform("t100,50r30 t-100,100");

//该条命令表示水平方向平移100，垂直方向平移50，旋转30°，再水平平移-100，垂直平移100

变换前

变换后

动画效果 -- animation()

setTimeout(function(){
    rect3.animate({"fill": "bisque"},1000, "bounce");
},1000);
//原本的变为填充颜色为“bisque”，一秒后执行，以弹跳的形式出现。

嗯。。。。这个就不好放上效果图了
动画的属性有：
linear -- 线性
easeIn -- 由慢到快
easeOut -- 由快到慢
easeInOut --由慢到快再到慢
backIn -- 开始时回弹
backOut -- 结束时回弹
elastic -- 橡皮筋
bounce --弹跳