CODEWITHSUNDEEP
konvajs
Khartir
Khartir

Reputation: 51

Add stroke to Konva shape without increasing its size

When adding a stroke to a Konva polygon (Line with closed: = true), half the width of the stroke is added to the size of the polygon.

Example: https://codesandbox.io/s/loving-kirch-8692q

This is a problem, when there are two touching polygons, since the two strokes overlap.

Is there a way to prevent this?

Upvotes: 1

Views: 987

Answers (2)

Khartir
Khartir

Reputation: 51

I found a solution using globalCompositeOperation. An example can be found here.

Upvotes: 1

lavrton
lavrton

Reputation: 20288

That is how strokes work in 2d canvas API. The workaround is to make a polygon smaller by half of the stroke size:

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

Demo: https://codesandbox.io/s/konva-stroke-9okr6

Upvotes: 1

Related Questions