raphael/rgraph介紹

h5火了以後，svg/vml基本很少提了。不過後者在老浏覽器相容方面，還有一些長處。

-------------------------------

一、raphael是什麼？？

Raphael  是一個用于在網頁中繪制矢量圖形的  Javascript  庫。它使用 SVG W3C 推薦标準和 VML 作為建立圖形的基礎。 Raphael 目前支援的浏覽器包括：  Chrome 5.0+， Internet Explorer 6.0+，   Firefox 3.0+，Safari 3.0+ ，Opera 9.5+ 等。

二、用raphael幹什麼? ?

    繪制拓撲（主要）、流程圖、資料之間的關系展示等。

三、為什麼用raphael ? ?

   簡單  易上手  --js插件。    靈活--功能比較多。

四、如何使用 ? ?

   主要包含 畫布、點、線三部分。      raphael的API

1.html  引入raphael.js 或者 raphael.min.js  

 
 <!-- 畫布 -->            
      
 <div class="topo" id="topo" ></div>            
     
    

2.css 

 
 .topo{            
      
 margin: 0 auto;             
      
 width: 600px;            
      
 height: 300px;            
      
 background:#ddd;            
      
 }            
     
    

3.js

//1.建立畫布

 
 //1.畫布初始化            
      
 var graph = Raphael("topo",$("#topo").width(),$("#topo").height());            
     
    

//2.畫點   image,circle,rect,ellipse等

 
 //畫圖檔 image(src, x, y, width, height)            
      
 var node1 = graph.image("img/dev.png",100,50,50,50);            
      
 //畫圓 circle(x,y,r)             
      
 var node2 = graph.circle(400,80,30);            
     
    

// 3.畫線 --起點、終點、線資料

 
 //3.畫線            
      
 var _sPos = {            
      
 x:(node1.getBBox().x+node1.getBBox().x2)/2,            
      
 y:(node1.getBBox().y+node1.getBBox().y2)/2            
      
 };            
      
 var _ePos = {            
      
 x:(node2.getBBox().x+node2.getBBox().x2)/2,            
      
 y:(node2.getBBox().y+node2.getBBox().y2)/2            
      
 };            
      
  
      
 //直線 M (x y)+            
      
 var path = ['M', _sPos.x, _sPos.y, _ePos.x, _ePos.y];            
      
 var lineAttr = {            
      
 "stroke":"#2E3DF2",//字元串筆觸顔色            
      
 "stroke-width":2,//數字筆觸寬度（像素，預設為1）            
      
 "stroke-dasharray":[""],//筆觸分割樣式 ["", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."]            
      
 }            
      
 var line1 = graph.path(path.join(',')).attr(lineAttr).toBack();            
      
 //曲線--  C (x1 y1 x2 y2 x y)+            
      
 var sAPoint = {            
      
 x: _sPos.x + (_ePos.x - _sPos.x) * 0.2 + 0.12 * (_ePos.y - _sPos.y),            
      
 y: _sPos.y + (_ePos.y - _sPos.y) * 0.2 - 0.12 * (_ePos.x - _sPos.x)            
      
 };            
      
 var eAPoint = {            
      
 x: _ePos.x - (_ePos.x - _sPos.x) * 0.2 + 0.12 * (_ePos.y - _sPos.y),            
      
 y: _ePos.y - (_ePos.y - _sPos.y) * 0.2 - 0.12 * (_ePos.x - _sPos.x)            
      
 };            
      
 var path = ['M', _sPos.x, _sPos.y, 'C', sAPoint.x, sAPoint.y, eAPoint.x, eAPoint.y, _ePos.x, _ePos.y];            
      
 var line2 =  graph.path(path.join(',')).attr(lineAttr).toBack();            
     
    

4.目前主要使用到的raphael API：

   A:元素（點、線）

1. 1. Element.attr()  
   2. Element.click()
   3. Element.dblclick()
   4. Element.drag()
   5. Element.getBBox()
   6. Element.getPointAtLength()
   7. Element.getTotalLength()
   8. Element.mouseover()
   9. Element.mouseout()
   10. Element.remove()
   11. Element.rotate()
   12. Element.toBack()
   13. Element.toFront()
   14. Element.animate()

    B：畫布

1. 1. Paper.image()
   2. Paper.circle()
   3. Paper.text()
   4. Paper.getById()
   5. Paper.getElementByPoint()
   6. Paper.getElementsByPoint()
   7. Paper.path()
   8. Paper.remove()
   9. Paper.set()
   10. Paper.setSize()

五、基于raphael.js 封裝的拓撲插件 rgraph.js

目前支援的浏覽器：chrome5.0+,IE9+ 路徑：   https://coding.net/u/marcooo/p/rgraph/git    使用的技術： nodejs、npm、webpack rgraph.js的使用： 簡單demo：http://amaml.qiniudn.com/rgraph/test/index.html