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