sprite-extend-shapes v1.1.0

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 用于绘制线条。

示例：

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 用于绘制弧线。

示例：

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（因此也可以理解为“绘制多个贝塞尔曲线”）。

示例：

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

Polygon 多边形

Polygon 用于绘制多边形。

示例：

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 需要设置“两边的长度”和“两边的夹角”即可完成绘制。

示例：

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

Rect 正方形

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

示例：

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

Star 星形

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

示例：

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

EllipseSector 椭圆扇形

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

示例：

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。

示例：

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

Sector 圆扇形

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

示例：

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

Ring 圆环

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

示例：

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