主页 经验

raphael.js 使用指南


RaphaelJS是一个用JavaScript实现的强大的矢量图形库。

(1)使用前准备,下载RaphaelJS,到官网下载。

(2)在相应的HTML页面引入RaphaelJS,如下示例代码:

<!DOCTYPE html>
<html>
<head>
    <title>RaphaelJS Demo</title>
</head>
<body>
    <div id="paperDiv" style="width: 140px; padding:0px; margin:0px"></div>
    <script src="raphael-min.js"></script>
</body>
</html>

(3)在通过元素创建一个对象

var elm = document.getElementById("paperDiv");
var paper = Raphael(elm, 560, 400);

 或者,直接将元素的id传到Raphael中,如:

var paper = Raphael("paperDiv", 650, 400);

(4)画圆circle()

//var cir = paper.circle(x, y, r);//x和y为坐标,r为圆的半径var cir = paper.circle(35, 25, 20);

(5)为形状设置属性attr()

/*
  语法如下:
  element.attr({
    "property1": value1,
    "property2": value2
  })*/

 如画一个有填充颜色的圆:

var coloredCircle = paper.circle(35, 25, 20).attr({    "fill": "#17A9C6",    "stroke": "#2A6570",    "stroke-width": 2});

(6)画矩形rect()

//语法://paper.rect(x, y, width, height, border-radius[optional]);//常规矩形var rect = paper.rect(20, 20, 170, 100); 
//圆角矩形var roundedRect = paper.rect(20, 20, 170, 100, 20);

(7)画椭圆形ellipse()

//语法://paper.ellipse(x, y, rx, ry);var ellipse = paper.ellipse(195, 125, 170, 100);

(8)画路径path()

var tri = paper.path("M10,10L126,10L113,118L10,10");


M
moveto
Llineto
Hhorizontal lineto
Vvertical lineto
Ccurveto
Ssmooth curveto
Q
quadratic Belzier curve
T
smooth quadratic Belzier curveto
Aelliptical Arc
Zclosepath

(9)处理文本text()

//语法://paper.text(x, y, "text");

(10)处理变形transform()

TTranslate
SScale
RRotate in degrees
MMatrix


文章列表 下一个 D3 v3到v5需要了解的变化(一)

© 2019-2021 适观科技

沪ICP备17002269号