路径元素包括以下元素：

• Arc 圆弧与扇形
• Ellipse 椭圆弧与椭圆扇形
• Parallel 平行四边形
• Path SVG路径
• Polyline 折线与多边形
• Rect 矩形
• Regular 正多边形
• Ring 圆环
• Star 多角星

路径 path

与块元素不同，路径元素没有等属性。

Path是最基础的路径元素，它可以通过设置d属性来绘制SVG Path。

Path的normalize属性如果设置为true，那么Path图形的中心将作为元素的锚点绘制，否则，根据Path的实际进行坐标绘制。

对于Path也可以设置texture，这样就可以实现类似于旧版Group的clipPath效果。

如果不设置textureRect，默认的textureRect是Path的originalContentRect，图片会自动拉伸。

const {Scene, Path} = spritejs;
const container = document.getElementById('adaptive');
const scene = new Scene({
  container,
  width: 1200,
  height: 600,
});
const layer = scene.layer();
const imgUrl = 'https://p4.ssl.qhimg.com/t01423053c4cb748581.jpg';
const path = new Path({
  d: 'M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2 c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z',
  normalize: true,
  scale: 15,
  pos: [600, 300],
  fillColor: 'red',
  texture: imgUrl,
  textureRect: [0, 0, 48, 30],
  rotate: 15,
});
layer.append(path);

矩形可以用Path绘制，也可以直接用块元素，而更简单的是用Rect元素。

Rect继承Path，无需设置d属性，而是可以直接设置width、height属性（或size属性）。

三角形和平行四边形

Triangle和Parallel继承Path，只需要设置sides和angle属性。

const {Scene, Triangle, Parallel} = spritejs;
const container = document.getElementById('adaptive');
const scene = new Scene({
  container,
  width: 1200,
  height: 600,
const layer = scene.layer();
const traingle = new Triangle({
  pos: [150, 150],
  sides: [300, 300],
  angle: 60,
  fillColor: '#7cc',
});
layer.append(traingle);
const parallel = new Parallel({
  normalize: true,
  pos: [750, 300],
  sides: [200, 200],
  angle: 60,
  rotate: 60,
  fillColor: '#c7c',
});
layer.append(parallel);

利用Polyline元素可以绘制折线和多边形。

正多边形和星形

Regular类和Star类可分别绘制正多边形和多角星。

对于多边形，属性：

• edges 表示边数
• radius 表示半径
• offsetAngle 表示旋转角度

对于多角星，属性：

• angles 表示角数
• innerRadius 表示内半径
• outerRadius 表示外半径
• offsetAngle 表示旋转角度

const {Scene, Regular, Star} = spritejs;
const container = document.getElementById('adaptive');
const scene = new Scene({
  container,
  width: 1200,
  height: 600,
});
const layer = scene.layer();
const shape = new Regular({
  pos: [300, 300],
  edges: 7,
  radius: 100,
});
layer.append(shape);
const star = new Star({
  angles: 5,
  innerRadius: 50,
  outerRadius: 100,
  fillColor: 'red',
});
layer.append(star);

Arc类和Ellipse类可以绘制圆和椭圆弧。

对于圆弧，属性：

• radius 半径
• startAngle 起始角
• endAngle 结束角
• direction 方向，’clockwise’ 默认值，表示顺时针，’anticlockwise’ 逆时针
• closeType 闭合方式，’none’ 默认值，表示stroke不闭合，’normal’ stroke延直线闭合，’sector’ stroke延扇形闭合

• radiusX x轴半径
• radiusY y轴半径
• startAngle 起始角
• endAngle 结束角
• direction 方向，’clockwise’ 默认值，表示顺时针，’anticlockwise’ 逆时针
• closeType 闭合方式，’none’ 默认值，表示stroke不闭合，’normal’ stroke延直线闭合，’sector’ stroke延扇形闭合

圆环

Ring类绘制圆环，属性：

• innerRadius 内圆半径
• outerRadius 外圆半径
• startAngle 起始角
• endAngle 结束角

const {Scene, Ring} = spritejs;
const container = document.getElementById('adaptive');
const scene = new Scene({
  container,
  width: 1200,
  height: 600,
});
const layer = scene.layer();
const ring = new Ring({
  pos: [300, 300],
  innerRadius: 50,
  outerRadius: 100,
  fillColor: 'blue',
});
layer.append(ring);
const ring2 = ring.cloneNode();
ring2.attr({
  pos: [700, 300],
  startAngle: 0,
  endAngle: 180,
  fillColor: 'red',