CODEWITHSUNDEEP
javascriptperformancepaperjs
Mikita Shautsou
Mikita Shautsou

Reputation: 35

How to unite path without redrawing in paper.js?

Paper.js have methods to unite paths in this way

const result = circle1.unite(circle2).unite(circle3)

but to render result I need to remove it from canvas, and draw it again

if (result) {
  result.remove();
}

result.strokeColor = new Color("red");

it leads to poor performance, is there way to optimize it?

Upvotes: 0

Views: 664

Answers (1)

nicholaswmin
nicholaswmin

Reputation: 22939

If you want to prevent the View from redrawing automatically everytime you perform an action, you need to set view.autoUpdate = false. This means that you need to control the redraw manually by calling view.update() when you want a redraw to take place.

From then on, you can also perform boolean operations without inserting the result in the Scene Graph, by passing insert:false in the options object which is the 2nd argument to Path.unite:

paper.view.autoUpdate = false

const circle1 = new paper.Path.Circle({
    position: new Point(100, 60),
    radius: 50,
    strokeColor: 'black'
})

const circle2 = new paper.Path.Circle({
    position: new Point(150, 60),
    radius: 50,
    strokeColor: 'black'
})

const circle3 = new paper.Path.Circle({
    position: new Point(200, 60),
    radius: 50,
    strokeColor: 'black'
})

const result = circle1
    .unite(circle2, { insert: false })
    .unite(circle3, { insert: false })
    
paper.view.update()

console.log(result)

Upvotes: 2

Related Questions