h5火了以后,svg/vml基本很少提了。不过后者在老浏览器兼容方面,还有一些长处。
-------------------------------
一、raphael是什么??
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:元素(点、线)
五、基于raphael.js 封装的拓扑插件 rgraph.js
目前支持的浏览器:chrome5.0+,IE9+
使用的技术: nodejs、npm、webpack
rgraph.js的使用: