如何在paper.js中不重绘合并路径？

Question

Paper.js有这样的方法来统一路径

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

但要渲染结果，我需要将其从 canvas 中移除，然后重新绘制

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

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

导致性能不佳，有什么办法可以优化吗？

Answer 1

如果您想在重绘发生时阻止 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()。

从那时起，您还可以在不将结果插入场景图中的情况下执行布尔运算，方法是在选项对象中传递 insert:false，这是 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)

如何在paper.js中不重绘合并路径？

How to unite path without redrawing in paper.js?

javascript

performance

paperjs