如何在Paper.js中的路径上创建孔？

Question

当白色圆圈实际上是一拳时，我想得到类似this的结果：

但是，当我关注following result时，我得到了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这样的开放Path.Line则缺少。

因此，您可以执行以下操作：

• 用Path.Rectangle s替换那些粗线。
• unite这两个矩形，以得到您的十字，因此您需要操作一个Path。
• 使用subtract而非exclude来“穿通”。

这是一个例子：

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的漏洞，只记得使用封闭的Path。