raphael/rgraph介绍

最新推荐文章于 2022-01-24 21:43:29 发布

转载最新推荐文章于 2022-01-24 21:43:29 发布 · 3k 阅读

web编程同时被 3 个专栏收录

54 篇文章

订阅专栏

javascript

13 篇文章

订阅专栏

svg

9 篇文章

订阅专栏

Raphael.js是一款基于SVG和VML的JavaScript库，用于在网页中绘制矢量图形。它支持多种浏览器，并提供丰富的API来绘制拓扑图、流程图等。本文介绍如何使用Raphael.js进行图形绘制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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();