RaphaelJS API NOTE – 路径绘制命令

路径(Path)是由按照一定顺序的多个绘图命令定义的。Raphael 中使用 Paper.path() 方法绘制路径。Paper.path() 方法接受一个路径字符串或者一个数组作为参数( 数组通常更方便,更具可读性定)。 例如:

var xStart = 100;
var yStart = 180;
var path = paper.path([
    'M', xStart, yStart,
    'a', 140, 140, 0, 0, 1, 280, 0
]);

Paper.path() 方法接受接的参数中的单个字母(例如上例的 'M' 和 'a')就是路径绘制命令

moveto 命令

moveto 命令创建一个起始点,所有路径都以 moveto 命令开始。

语法

moveto 命令的语法如下:

M or m, (x, y)+

参数说明

  • M or m – M – 表示是绝对路径,m – 表示相对路径;
  • x – 起始点 x 坐标;
  • y – 起始点 y 坐标;

来看个具体的例子:

Paper.path([
    'M', 50, 50,
    100, 100
]);

第一个 M,就是 moveto 命令,采用的是绝对路径。紧接 M 后的两个数字 50, 50 定义的是起始点的坐标(说明:Paper.path() 方法接受参数的坐标点都是两两为一组,前面一个数字表示 X 坐标,后面一个数字表示 Y 坐标)。由于本条 moveto 命令采用的是绝对路径(M),所以起始点后面的两个数 100, 100, 表示的是要绘制的路径(直线)的第二个坐标点,是从画布的左上角顶点(0, 0 点)开始计算的坐标。

如果采用相对路径表示,第二个坐标点(100, 100),就是相对起始点,在 X 轴方向向左偏移 50,然后在 Y 轴方向向下偏移 50(绘制的是一条斜线):

Paper.path([
    'm', 50, 50,
    50, 50
]);

相对路径,相对指的就是相对上一个坐标点的偏移坐标。我们下面绘制一个三角形,以绝对路径表示的:

paper.path([
    'M', 100, 100,
    50, 150,
    150, 150,
    100, 100
]);

绘制一个同样大小的三角形,以相对路径表示:

paper.path([
    'M', 200, 100,
    // 相对起始点 200, 100 在 X 轴方向左偏移(回退)50,在 Y 轴方向向下偏移 50
    -50, 50,
    // 相对上一个点在 X 轴方向右偏移(前进)100,在 Y 轴方向保持水平不变
    100, 0,
    // 相对上一个点在 X 轴方向左偏移(回退)50,在 Y 轴方向向上偏移 50
    -50, -50
]);

演示地址:http://www.yaohaixiao.com/examples/raphael-js-api-note/moveto-command.html

SHARE THIS PAGE

免责声明:本站文章中的观点都是作者个人观点,并没有以任何方式反映他所属机构的意见。

发表评论