@spritejs/shapes

sprite-extend-shapes

Test-Online

项目说明

sprite-extend-shapes 是基于SpriteJS的常用几何图形扩展库。当前支持的图形：

• Shape
  • Polyline
  • Arc
  • Polycurve
  • Polygon
    • Triangle
    • Rect
    • Star
  • EllipseSector
    • Ellipse
      • EllipseArc
      • Circle
    • Sector
  • Ring

Shape

Shape 类继承自 sprite-core 的 BaseSprite，是该图形扩展库所有图形的基类。

Polyline 折线

Ployline 用于绘制线条。

属性	说明	默认值
points	各个连接点的坐标	null
color	连接点之间连线的颜色	rgba(0, 0, 0, 1)
lineWidth	线条宽度	1
lineCap	线条末端绘制样式	round
lineJoin	两线条交汇处样式	round

示例：

const polyline = new Polyline();
polyline.attr({
  color: {
    vector: [0, 0, 150, 150],
    colors: [{offset: 0, color: 'red'}, {offset: 1, color: 'green'}]
  },
  lineWidth: 10,
  points: [[0, 0], [0, 100], [200, -50]],
  bgcolor: '#eee'
});

Arc 弧线

Arc 用于绘制弧线。

属性	说明	默认值
center	绘制弧线的中心点	null
startPoint	弧线绘制的起点	[0, 0]
angle	绘制弧线转过的角度	0
color	弧线的颜色	#000
lineWidth	弧线宽度	1
anticlockwise	当该值为true时，将逆时针绘制	false

示例：

const arc = new Arc();
arc.attr({
  center: [100, 100],
  startPoint: [0, 0],
  angle: (Math.PI / 2) * 0.75,
  lineWidth: 5
});

Polycurve 多重曲线

Polycurve 用于绘制多重曲线，其底层使用的是 canvas.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) API（因此也可以理解为“绘制多个贝塞尔曲线”）。

属性	说明	默认值
points	绘制贝塞尔曲线的数组（注意数组的每一子数组长度应为 6）	[]
startPoint	绘制起点	[0, 0]
lineWidth	曲线宽度	1
lineCap	曲线末端绘制样式	round
lineJoin	两曲线交汇处样式	round

示例：

const polycurve = new Polycurve();
polycurve.attr({
  points: [[20, -10, 110, 50, -20, 40], [10, -10, 20, 50, 0, 0]],
  lineWidth: 5
});

Polygon 多边形

Polygon 用于绘制多边形。

属性	说明	默认值
points	各顶点的坐标	null
color	边的颜色	rgba(0, 0, 0, 1)
fillColor	多边形填充颜色	rgba(0, 0, 0, 1)
lineWidth	线条宽度	1
lineCap	边末端绘制样式	round
lineJoin	两边交汇处样式	round

示例：

const polygon = new Polygon();
polygon.attr({
  color: {
    vector: [0, 0, 150, 150],
    colors: [{offset: 0, color: 'red'}, {offset: 1, color: 'green'}]
  },
  fillColor: 'yellow',
  points: [[0, 0], [100, 100], [200, -50]]
});

Triangle 三角形

Triangle 继承自 Polygon，用于绘制三角形，其大部分属性与 Polygon 一致。在 Polygon 的基础上，Triangle 需要设置“两边的长度”和“两边的夹角”即可完成绘制。

属性	说明	默认值
sides	两边边长	[10, 10]
angle	两边夹角	60

示例：

const triangle = new Triangle();
triangle.attr({
  color: 'red',
  sides: [80, 80],
  angle: '60',
  fillColor: 'yellow'
});

Rect 正方形

Rect 继承自 Polygon，用于绘制矩阵。在 Polygon 的基础上，Rect 需要额外设置“两边的长度”，如果想要绘制平行四边形，可以改变angle属性的数值即可。

属性	说明	默认值
sides	两边边长	[10, 10]
angle	两边夹角	90

示例：

const rect = new Rect();
rect.attr({
  color: 'red',
  sides: [60, 80],
  angle: 60,
  fillColor: 'yellow'
});

Star 星形

Star 继承自 Polygon 用于绘制规则的多角形。Star 将多角形的绘制分为内接圆和外接圆之上点的连接，默认内接圆的半径为0.4 * 外接圆的半径，也可手动设置。

属性	说明	默认值
radius	外接圆半径	0
innerRadius	内切圆半径	0.4 * radius
angle	角的数量	5

示例：

const star = new Star();
star.attr({
  radius: 40,
  innerRadius: 30,
  color: 'red',
  angles: 5,
  fillColor: 'yellow'
});

EllipseSector 椭圆扇形

EllipseSector 继承自 Shape，用于绘制椭圆扇形。

属性	说明	默认值
radiusX	短半径	10
radiusY	长半径	20
startAngle	起始角度	0
endAngle	终止角度	360
color	描边线条颜色	rgba(0, 0, 0, 1)
fillColor	填充颜色	rgba(0, 0, 0, 1)
lineWidth	线条宽度	1
lineCap	线条末端绘制样式	round
lineJoin	两线条交汇处样式	round

示例：

const ellipseSector = new EllipseSector();
ellipseSector.attr({
  radiusX: 30,
  radiusY: 80,
  startAngle: 0,
  endAngle: Math.PI * 1.3,
  lineWidth: 1,
  color: 'red'
});

Ellipse 椭圆形

Ellipse 继承自 EllipseSector，用于绘制椭圆。 与EllipseSector相比， Ellipse 不需指定startAngle和endAngle。

示例：

const ellipse = new Ellipse();
ellipse.attr({
  radiusX: 30,
  radiusY: 80,
  fillColor: 'red',
  lineWidth: 5
});

EllipseArc 椭圆弧

EllipseArc 继承自 Ellipse，用于绘制椭圆弧线（与 Arc 的区别）。 EllipseArc 放开了 startAngle 和 endAngle 的限制。

示例：

const ellipseArc = new EllipseArc();
ellipseArc.attr({
  radiusX: 30,
  endAngle: 120,
  radiusY: 80,
  fillColor: 'red',
  lineWidth: 5
});

Circle 圆

Circle 继承自 Ellipse。与Ellipse相比， Circle 只需指定一个半径，即radius，而无需指定radiusX和radiusY。

属性	说明	默认值
radius	半径	10

示例：

const circle = new Circle();
circle.attr({
  radius: 30,
  lineWidth: 5,
  color: 'red'
});

Sector 圆扇形

Sector 继承自 EllipseSector，用于绘制圆扇形。与EllipseSector相比， Sector 只需指定一个半径，即radius，而无需指定radiusX和radiusY。

属性	说明	默认值
radius	半径	10

示例：

const sector = new Sector();
sector.attr({
  startAngle: 0,
  endAngle: Math.PI * 0.7,
  radius: 50,
  lineWidth: 5,
  color: 'red'
});

Ring 圆环

Ring 继承自 Shape，用于绘制圆环。

属性	说明	默认值
innerRadius	内圆半径	10
outerRadius	外圆半径	20
startAngle	起始角度	0
endAngle	终止角度	360
color	描边线条颜色	rgba(0, 0, 0, 1)
fillColor	填充颜色	rgba(0, 0, 0, 1)
lineWidth	线条宽度	1

示例：

ring.attr({
  innerRadius: 15,
  outerRadius: 50,
  fillColor: {
    vector: [0, 0, 150, 150],
    colors: [{offset: 0, color: 'red'}, {offset: 1, color: 'green'}]
  },
  lineWidth: 4,
  startAngle: Math.PI * 0.5,
  endAngle: Math.PI * 1.6
});