在不增加大小的情况下向 Konva 形状添加描边

Question

向 Konva 多边形添加笔划时（Line 和 closed: = true），笔划宽度的一半会添加到多边形的大小中。

示例：https://codesandbox.io/s/loving-kirch-8692q

这是一个问题，当有两个接触的多边形时，因为两个笔划重叠。

有什么办法可以避免这种情况吗？

Answer 1

这就是笔画在 2d 中的工作方式 canvas API。解决方法是将多边形缩小笔画大小的一半：

const strokeWidth = 5;
const halfStroke = strokeWidth / 2;
const poly1 = new Konva.Line({
  points: [
    10 + halfStroke,
    10 + halfStroke,
    10 + halfStroke,
    50 - halfStroke,
    50 - halfStroke,
    50 - halfStroke,
    50 - halfStroke,
    10 + halfStroke
  ],
  fill: "#00D2FF",
  stroke: "black",
  strokeWidth: 5,
  closed: true
});

演示：https://codesandbox.io/s/konva-stroke-9okr6

Answer 2

我找到了使用 globalCompositeOperation 的解决方案。可以找到示例 here.

在不增加大小的情况下向 Konva 形状添加描边

Add stroke to Konva shape without increasing its size

konvajs