我可以用konva绘制具有不同指针样式的箭头吗？例如三角形填充或法线或三角形未填充

Question

我可以用konva绘制具有不同指针样式的箭头吗？例如三角形填充或法线填充或未填充三角形-请参见以下示例：

三角形填充

未填充三角形

Answer 1

Konva.Arrow不支持这种绘图。但是您可以使用Custom Shape这样绘制箭头。

我试图画出您的第二个箭头：

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

const layer = new Konva.Layer();
stage.add(layer);

const shape = new Konva.Shape({
  points: [50, 50, 100, 100],
  pointerLength: 10,
  pointerWidth: 10,
  stroke: 'green',
  sceneFunc: (ctx, shape) => {
    // draw main line
    const points = shape.getAttr('points');
    ctx.beginPath();
    ctx.moveTo(points[0], points[1]);
    ctx.lineTo(points[2], points[3]);
    ctx.fillStrokeShape(shape);

    // calculate attrs for pointer
    var PI2 = Math.PI * 2;
    var dx = points[2] - points[0];
    var dy = points[3] - points[1];

    var radians = (Math.atan2(dy, dx) + PI2) % PI2;
    var length = shape.getAttr('pointerLength');
    var width = shape.getAttr('pointerWidth');

    // draw pointer
    ctx.save();
    ctx.beginPath();
    ctx.translate(points[2], points[3]);
    ctx.rotate(radians);
    ctx.moveTo(0, 0);
    ctx.lineTo(-length, width / 2);
    ctx.moveTo(0, 0);
    ctx.lineTo(-length, -width / 2);
    ctx.restore();
    ctx.fillStrokeShape(shape);
  }
});
layer.add(shape);

layer.draw();

<script src="https://unpkg.com/konva@^6/konva.min.js"></script>
<div id="container"></div>