UIBezierPath追加重叠未填充 [英] UIBezierPath appending overlapping isn't filled

问题描述

我正在尝试使用 UIBezierPath.append 合并两个重叠的UIBezierPaths，并且希望填充重叠的空间。我尝试将 usesEvenOddFillRule 属性设置为 false ，但仍然无法填充。这是问题的最小示例：

I'm trying to merge two overlapping UIBezierPaths using UIBezierPath.append, and I want the overlapping space to be filled. I tried setting the usesEvenOddFillRule property to false, but it still doesn't fill. Here is minimal example of the problem:

override func draw(_ rect: CGRect) {
    let firstShape = UIBezierPath()

    firstShape.move(to: CGPoint(x: 100, y: 100))
    firstShape.addLine(to: CGPoint(x: 100, y: 150))
    firstShape.addLine(to: CGPoint(x: 150, y: 170))
    firstShape.close()

    let secondShape = UIBezierPath(rect: CGRect(x: 125, y: 125, width: 75, height: 75))

    let combined = UIBezierPath()
    combined.append(firstShape)
    combined.append(secondShape)

    UIColor.black.setFill()
    combined.fill()
}

这将产生以下形状：

什么我希望它看起来像这样：

What I would like it to look like:

此问题当在一个UIBezierPath上使用 move（to：CGPoint）时，似乎也会发生这种情况。如果将这两个形状都绘制在同一UIBezierPath上，则会发生相同的问题。

This problem also seems to occur when using move(to: CGPoint) on one UIBezierPath. If you would draw both these shapes on the same UIBezierPath, the same problem would occur.

有人知道如何填充重叠区域吗？最好在执行 addClip（）

Does anyone know how to make the overlapping region filled? Preferably the solution would also work when doing addClip()

推荐答案

将 usesEvenOddFillRule 设置为false是正确的。除此之外，您还需要确保形状都沿相同的方向（顺时针或逆时针）绘制。

You were on the right track with setting the usesEvenOddFillRule to false. In addition to that, you need to make sure your shapes are both drawn in the same direction (clockwise or counter-clockwise).

我颠倒了 addLine 绘制三角形以将其反转。

I reversed the order of your addLines when drawing the triangle to reverse it.

override func draw(_ rect: CGRect) {
    let firstShape = UIBezierPath()

    firstShape.move(to: CGPoint(x: 100, y: 100))
    firstShape.addLine(to: CGPoint(x: 150, y: 170))
    firstShape.addLine(to: CGPoint(x: 100, y: 150))
    firstShape.close()

    let secondShape = UIBezierPath(rect: CGRect(x: 125, y: 125, width: 75, height: 75))

    let combined = UIBezierPath()
    combined.append(firstShape)
    combined.append(secondShape)
    combined.usesEvenOddFillRule = false

    UIColor.black.setFill()
    combined.fill()
}

这篇关于UIBezierPath追加重叠未填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！