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轴旋转度决定

eg

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路径


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 --弹跳

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,386评论 6赞 479
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,939评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,851评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,953评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,971评论 5赞 369
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,784评论 1赞 283
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,126评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,765评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,148评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,744评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,858评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,479评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,080评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,053评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,278评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,245评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,590评论 2赞 343