Use a shape as a reference to make a hole

While creating some shapes, I wanted to cut a hole in the shape that’s the same as the original shape, but smaller, in order to create a bordered shape. Here’s the original shape. The dots help to highlight which draw call was used (lineTo, bezier, etc)

image

To generate a hole, take the original points, scale and reverse.

const shape = new Shape()
this.label1(shape, 0, 0, 0.6, 0.8, 0.05);

const points = shape.getPoints();
points.forEach(item => item.multiplyScalar(0.9))

// draw the hole
const holePath = new Shape(points.reverse())

// add hole to shape
shape.holes.push(holePath);
this.geometry = new ShapeGeometry(shape);

Voila!
image

Hope this helps someone.

1 Like