Добавьте обводку в форму Konva, не увеличивая ее размер

Question

При добавлении обводки к многоугольнику Konva (Line с closed: = true) к размеру многоугольника добавляется половина ширины обводки.

Пример: https://codesandbox.io/s/loving-kirch-8692q

Это проблема, когда есть два соприкасающихся многоугольника, поскольку два штриха перекрываются.

Есть ли способ предотвратить это?

Answer 1

Так работают штрихи в API 2d canvas. Временное решение: сделать многоугольник меньше на половину размера штриха:

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. Пример можно найти здесь .