前端繪圖用的最多的就是svg和canvas，現(xiàn)在有許多基于這兩種技術(shù)的圖形框架孟抗，比如基于svg的D3 和基于canvas的echarts 。今天要講的是基于svg的Raphael Javascript 就珠，它是一個(gè) Javascript的矢量庫(kù)瞬沦。

首先你要在HTML中引入RaphaelJS

image.png

然后你就可以在js中使用這個(gè)包了

我是先建了一個(gè)名為master.js的文件，在這個(gè)文件中寫js剿另，注意兩個(gè)文件的放置順序箫锤，由于要在master.js中使用RaphaelJS帅腌，所以raphael.js的引用要放在前面

創(chuàng)建畫布

1.以坐標(biāo)點(diǎn)定義畫布位置

var paper = Raphael(20, 30, 650, 400); 分別為橫坐標(biāo)，縱坐標(biāo)麻汰，寬度，高度

2.以節(jié)點(diǎn)定義畫布位置

var width = 600;
var height = 200;
var paper = Raphael("mySvg",width,height);   //定義svg繪圖節(jié)點(diǎn)戚篙，及寬度五鲫，高度 

封裝繪圖函數(shù)

1.畫矩形

function drawRect(x,y,w,h,radius){
    var rect = paper.rect(x,y,w,h);     //若繪圓角矩形加上圓角參數(shù)(橫坐標(biāo)，縱坐標(biāo)岔擂，寬位喂，高，圓角)
    rect.attr({
        "fill": "red",             //填充顏色
        "stroke": "lime",     //邊框顏色
        "stroke-width": 2   // 邊框?qū)挾?    });
}

2.畫圓

function drawCircle(x,y,r){
    var cir = paper.circle(x,y,r);        //(圓心橫坐標(biāo)乱灵，圓心縱坐標(biāo)塑崖，半徑)
    cir.attr({
        "fill": "blue",
        "stroke": "lime",
        "stroke-width": 2
    })
}

3.畫橢圓

function drawEllipse(x,y,rx,ry){    //水平半徑和垂直半徑其實(shí)就是橢圓的rx和ry
    var ellipse = paper.ellipse(x,y,rx,ry);
    ellipse.attr({
        "fill": "yellow",
        "stroke": "lime",
        "stroke-width": 2
    })
}

4.畫上五邊形

function drawDownFive(x,y,w,h){   // 傳起點(diǎn)坐標(biāo)，寬和高
    // 若要使邊框完整痛倚，從起始坐標(biāo)到起始坐標(biāo)规婆，僅填充的話不需在后面加起始坐標(biāo)或加閉合路徑
    // var DownFive = paper.path('M'+x+','+y+'H'+(w+x)+'V'+(h+y)+'L'+(w/2+x)+','+(h+h/2+y)
    // +'L'+x+','+(y+h)+'L'+x+','+y);
    // var DownFive = paper.path('M'+x+','+y+'H'+(w+x)+'V'+(h+y)+'L'+(w/2+x)+','+(h+h/2+y)
    // +'L'+x+','+(y+h)+'Z');
    var DownFive = paper.path('m'+x+','+y+'h'+w+'v'+h+'l'+(-w/2)+','+(h/2)+'l'+(-w/2)+','+(-h/2)+'Z');//相對(duì)坐標(biāo)
    DownFive.attr({
        "fill": 'orangered',
        "stroke": 'lime',
        "stroke-width": 2
    });
}

5.添加文字

function drawText(x,y,txt){   //  橫坐標(biāo)+縱坐標(biāo)+文本
    var tip = paper.text(x,y,txt);
    tip.attr({
        "font-size": 16,    //字體大小
        "fill": 'brown',     //字體顏色
        "text-anchor":"middle",  //  字體對(duì)齊樣式
    });
 }
 drawText(200,140,"橢圓弧的使用");

Raphael元素的變換

// T 平移

// S 縮放 Sx,y 橫向縮放x倍,縱向縮放y倍

// R 按角度旋轉(zhuǎn)

// M 變換矩陣
// 每個(gè)字母是一個(gè)命令 t是平移，r是旋轉(zhuǎn)蝉稳，s是縮放抒蚜，m是矩陣
// 也有另類的“絕對(duì)”平移、旋轉(zhuǎn)和縮放：T耘戚、R和S嗡髓。他們不會(huì)考慮到以前的變換

var rect1 = paper.rect(20,300,100,50);
 rect1.attr({
    "transform": 'r90T100,0s0.5'
 });

Raphael圖形的動(dòng)畫效果

// 語法如下：Element.animate({動(dòng)畫屬性的鍵值對(duì)},動(dòng)畫時(shí)間,緩動(dòng)類型,回調(diào)函數(shù));
// 緩動(dòng)類型其實(shí)就是動(dòng)畫過渡公式，是哪種類型的收津。主要有以下這些類型：

// “l(fā)inear”（線性）
// “<”或“easeIn”或“ease-in” （由慢到快）
// “>”或“easeOut”或“ease-out”（又快到慢）
// “<>”或“easeInOut”或“ease-in-out”（由慢到快再到慢）
// “backIn”或“back-in”（開始時(shí)回彈）
// “backOut”或“back-out”（結(jié)束時(shí)回彈）
// “elastic”（橡皮筋）
// “bounce”（彈跳）

rect1.animate({transform: "r90t100,0s1.5"}, 1000,"bounce",function(){console.log("finish");});

事件綁定

var rect2 = paper.rect(60,300,100,50,10);
rect2.attr('fill', 'blue');
rect2.mouseover(function() {                  //綁定鼠標(biāo)懸浮事件饿这，其他事件類似
    rect2.attr({
        "transform": 'T0,50s2',
        "fill": '#000'
    });
});
rect2.mouseout(function() {
    rect2.attr({
        "fill": 'blue',
        "transform": 'T0,0s1'
    });
});

clone() 復(fù)制一個(gè)

var rect3 = rect2.clone().attr({
    "x": 400,
    "y": 400
});

畫布的方法

// 畫布的方法
// paper.clear(); // paper.clear()方法清空畫布

// 加載圖片 paper.image()
// 參數(shù) 說明

// src 圖片的路徑，對(duì)經(jīng)常寫前臺(tái)的童鞋們來說這個(gè)小菜一碟

// X 圖片擺放位置的x坐標(biāo)

// Y 圖片擺放位置的y坐標(biāo)

// width 圖片的寬度

// height 圖片的高度

// 例：paper.image("images/testimage.png",10,10,200,150);將在畫布的(10,10)位置擺放一個(gè)寬200撞秋，長(zhǎng)150的圖片长捧。

// paper.setSize()用來重新設(shè)置畫布的大小。你以在發(fā)現(xiàn)畫布大小不合適時(shí)調(diào)整畫布的大小
// 而不是需要從頭建立畫布然后重復(fù)原來的工作部服。方法有2個(gè)參數(shù)：寬和高

paper.setSize(1000,1000);// 我們將畫布的大小修改為寬100px唆姐，1000px。

// paper.set()方法是個(gè)很重要的方法廓八。它幫助我們對(duì)Raphael元素進(jìn)行分組然后進(jìn)行批量管理

var rect4 = paper.rect(300,600,100,50,10);
 var circle1 = paper.circle(400,680,50);
 var set = paper.set();
 set.push(circle1,rect4);
 // set.clear();   
 // set.exclude(circle1);
 // set.attr('fill', 'green');
 // 我們想要清空set奉芦，可不要用remove()而是用clear()，remove()會(huì)把所有set里面的元素remove掉剧蹂。
 // clear()只是清除set里的內(nèi)容声功，并不會(huì)對(duì)里面的內(nèi)容本身有影響
 // set.exclude(rect);還記得我前面的代碼里面將rect添加進(jìn)入raphaelSet里面嗎?
 // 現(xiàn)在你可以試一試在在執(zhí)行raphaelSet.attr()之前使用raphaelSet.exclude(rect);
 // 試一試。效果和我們想象的一樣宠叼，第一個(gè)矩形沒有被填充紅色先巴，因?yàn)樗粡膕et里面剔除出來了其爵。
 // set.forEach()就是去循環(huán)我們創(chuàng)建的set對(duì)象，然后通過遍歷對(duì)set內(nèi)的元素進(jìn)行操作伸蚯。
 // 這個(gè)功能是差不多算是set里面最重要的方法了摩渺，我們使用set大部分業(yè)務(wù)都需要這個(gè)循環(huán)了
 set.forEach(function(ele){

      ele.attr({"fill":"red"});

});

// set.pop(); 清除最后一個(gè)添加進(jìn)去的元素
// set.splice()方法 它有3個(gè)參數(shù)index,count,element set.splice(1,2,rect)，
// 我從set里面index為1的位置開始往后刪除2個(gè)元素剂邮，然后把rect添加進(jìn)來摇幻。所以slice可以同時(shí)刪除和添加元素

透明度

// 元素透明度鍵名opacity,取值范圍為0（完全不透明）到1（完全透明），也可以分別設(shè)置stroke-opacity和fill-opacity

 var circle2 = paper.circle(600,680,50);
  circle2.attr({
    "fill": 'blue',
    "stroke": 'lime',
    "stroke-width":5,
    "fill-opacity":0.5
  });
   // Raphael支持通過clip-rect屬性來進(jìn)行元素的矩形切割挥萌，它允許我們將圖形切割出一部分下來
   circle2.attr('clip-rect', '545,625,50,50');

Raphael支持線性和梯度漸變?nèi)ヌ畛鋱D形绰姻，要達(dá)到這個(gè)效果，而不是直接用一個(gè)顏色的字符串去設(shè)置fill屬性引瀑。
我們需要指定了下面這種字符串的格式去做到線性漸變：
<angle>-<color>[-<color>[:<offset>]]-<color>
下面的語法就是達(dá)到徑向漸變的效果：
r[(<fx>,<fy>)]<color>[-<color>[:<offset>]]-<color>

1.線性漸變 <angle>-<color1>-<color2>

      var rect5 = paper.rect(760,600,100,80);
      rect5.attr('fill', '0-red-blue');
      rect5.attr('fill', '45-red-yellow');

2.徑向漸變 r<color>-<color>

 var circle3 = paper.circle(940,650,50);
 circle3.attr('fill', 'rblack-white-black');
 circle3.attr('fill', 'rblack-white:80-black');  //以半徑的80%處為第二階段的漸變分割點(diǎn)

3.偏離圓心的漸變

var circle4 = paper.circle(70,900,50);
      var circle5 = paper.circle(200,900,50);
      var circle6 = paper.circle(330,900,50);
      var circle7 = paper.circle(460,900,50);
      var circle8 = paper.circle(590,900,50);
      circle4.attr('fill', 'r(0.1,0.5)#fff-#000');   //r(0.5,o.5)是正圓心
      circle5.attr('fill', 'r(0.5,0.1)#fff-#000');
      circle6.attr('fill', 'r(0.9,0.5)#fff-#000');
      circle7.attr('fill', 'r(0.5,0.9)#fff-#000');
      circle8.attr('fill', 'r(0.5,0.5)#c8c8c8-#000');

給線條加箭頭
路徑的末尾顯示箭頭狂芋。字符串格式是<type>[-<width>[-<length>]]。
可能的類型：classic憨栽、block帜矾、open、oval徒像、diamond黍特、none
寬：wide、narrow锯蛀、midium灭衷，長(zhǎng)：long 、short旁涤、midium翔曲。

var arrow = paper.path("M20,960L120,960").attr('stroke', 'lime'); //繪一條直線
      arrow.attr({
        "arrow-end":'classic-wide-midium',   //加箭頭屬性
        "stroke-width":3
      });    

線條虛化
stroke-dasharray string [“”, “-”, “.”, “-.”, “-..”, “.”, “- ”, “--”, “- .”, “--.”, “--..”]

var dottedLine = paper.path("M200,960,L300,960");
      dottedLine.attr({
        "stroke": 'blue',    //先給個(gè)顏色
        "stroke-dasharray": '-.'
      });

線段端點(diǎn)處理
stroke-linecap string [“butt”, “square”, “round”]

      var lineCap = paper.path("M320,960L420,960");
      lineCap.attr({
        "stroke": 'red',
        "stroke-linecap": 'butt',
        "stroke-width": 10
      });

stroke-linejoin 屬性指明路徑的轉(zhuǎn)角處使用的形狀或者繪制的基礎(chǔ)形狀。
stroke-linejoin string [“bevel”, “round”, “miter”]

      var linejoin = paper.path("M440,960L500,960L500,1000");
      linejoin.attr({
        "stroke": 'orangered',
        "stroke-linejoin": 'bevel',
        "stroke-width": 5
      });