如何在 Paper.js 中的路径上创建一个洞？

Question

我想得到像 this 这样的结果，而白色圆圈实际上是一拳：

但是，我得到 following result when I follow the boolean operation example:

// this works okay 
var via = outer.exclude(hole)
project.activeLayer.addChild(via)

// this works weird 
var drilledY = y.exclude(hole)
project.activeLayer.addChild(drilledY)

这里唯一的问题似乎是在 Path 内部创建了一个洞。如何在路径中创建一个洞？

Answer 1

我认为您无法使用 Path.Line 获得想要的结果。

穿透意味着您要删除一些内部区域，而 Path.Line 等开放 Path 则缺少这些区域。

所以你可以做的是：

用 Path.Rectangle 替换那些粗线。
unite 2 个矩形，得到你的十字架，所以你有一个 Path 可以操作。
使用 subtract 而不是 exclude 到 "punch through"。

这是一个例子：

var x = new paper.Path.Rectangle({
    from: [100, 100],
    to: [120, 200],
    fillColor: 'red',
    strokeWidth: 1
});

var y = x.clone().rotate(90).set({ fillColor: 'blue' })

// Unite x/y to get a single path.
var cross = y.unite(x)

// Remove x,y we no longer need them, we got the cross.
x.remove()
y.remove()

var hole = new paper.Path.Circle({
    center:[110, 150],
    radius: 6,
    strokeColor: 'red',
    fillColor: 'red'
})

// Subtract (instead of exclude), to "punch through".
var drilled = cross.subtract(hole)

// Remove hole/cross, we no longer need them.
hole.remove()
cross.remove()

console.log(drilled)

这里是 Sketch。

如果您不想 unite 您的形状，您仍然可以遍历它们和 subtract 他们的洞，只记得使用 closed Paths.

如何在 Paper.js 中的路径上创建一个洞？

How to create a hole on a Path in Paper.js?

paperjs