Question

我需要在Squares（Rect类）和Triangles（Line类）上设置笔触位置，就像在这里为Circles一样： GitHub issue with example

我想使用第一个使用sceneFunc的解决方案。对于我来说，很难弄清楚正方形和三角形的处理方法。

有什么想法吗？

谢谢。

Answer 1

const square = new Konva.Shape({
  x: 50,
  y: 30,
  stroke: 'rgba(0,0,0,0.5)',
  strokeWidth: 20,
  fill: 'green',
  draggable: true,
  width: 100,
  height: 100,
  sceneFunc: (ctx, shape) => {
    ctx.rect(0, 0, shape.width(), shape.height());
    // first stroke
    ctx.strokeShape(shape);
    // then fill
    ctx.fillShape(shape);
  }
});
layer.add(square);

const triangle = new Konva.Shape({
  x: 250,
  y: 30,
  stroke: 'rgba(0,0,0,0.5)',
  strokeWidth: 20,
  fill: 'green',
  draggable: true,
  sceneFunc: (ctx, shape) => {
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(50, 100);
    ctx.lineTo(-50, 100);
    ctx.closePath();
    // first stroke
    ctx.strokeShape(shape);
    // then fill
    ctx.fillShape(shape);
  }
});
layer.add(triangle);

演示：https://jsbin.com/fumacupoku/edit?html,js,output

调整正方形/三角形上的形状笔触位置

1 个答案: