【问题标题】：Creating a union of 2 bezier paths创建 2 个贝塞尔路径的并集
【发布时间】：2020-05-15 01:08:28
【问题描述】：

我有两条贝塞尔路径，我想将它们组合成一个联合体，这样我就可以描边整个外部形状。在我的例子中，它是一个带有尾巴的气泡，所以虽然它不是一个复杂的形状，但实际上很难用一条路径来创建它。

似乎没有用于创建联合的核心图形 API。我错了吗？

如果我不是，有没有人知道可以处理这个的图书馆？我已经搜索了 GitHub 无济于事。

【问题讨论】：

如果有人在 GitHub 上提供库，我不会将其发布为答案，但是：不，没有内置 API。通常的技巧是先描边然后填充；填充（使用气泡的背景颜色）覆盖了相交的笔画。确保将线宽加倍，因为这实际上是一个线宽一半的外部笔划。
嗨，彼得。谢谢，这暂时是一个可行的解决方案，尽管它确实需要我在上下文中通过绘制。创建一个形状层会更好。
我也刚刚为 NSBezierPath 找到了这个库。我想 UIBezierPath 的端口将是微不足道的：losingfight.com/blog/2011/07/09/…

【解决方案1】：

如果您使用封闭的形状，UIBezierPath 会这样做。

UIBezierPath *firstPath = [UIBezierPath bezierPath];
// build your path

UIBezierPath *secondPath = [UIBezierPath bezierPath];
// build your path

[firstPath appendPath:secondPath];

【讨论】：

我刚刚尝试过。结果是重叠变成了一个洞——所以它根本没有创建一个联合。
在进行并集之前尝试反转第一个或第二个的路径：UIBezierPath *secondPath = [[UIBezierPath bezierPath] bezierPathByReversingPath];
不。我已经尝试了所有组合（1st + 2nd、1st + reversed 2nd、reverse 1st + 2nd、2nd + 1st、...）
您确定要创建顺时针方向的两条路径吗？
是的，这不是“联合”操作，而是“组合”操作，这意味着现有路径的任何部分都不会被删除。如果您抚摸路径，您会发现它们仍然存在。真正的“联合”操作采用组合路径的轮廓，丢弃现在位于内部的任何路径。这就是我正在寻找的自己。

【解决方案2】：

在 Swift 3 中，贝塞尔路径可以通过以下方式统一：

 override func draw(_ rect: CGRect) {
    super.draw(rect)

    UIColor.black.setStroke()
    UIColor.red.setFill()

    let currentContext = UIGraphicsGetCurrentContext()
    currentContext?.saveGState() 

    let path = drawTopView()
    path.lineWidth = 5.0
    path.fill()
    path.stroke()

    let middlepath = drawMiddleView()
    middlepath.lineWidth = 2.0
    middlepath.fill()
    middlepath.stroke()

    path.append(middlepath)
    currentContext?.restoreGState()
}

【讨论】：

这是绘图。没有得到联合贝塞尔路径。

【解决方案3】：

SwiftUI

func createView() -> some View {
    let a = Path { path in
        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: 50, y: 100))
        path.addLine(to: CGPoint(x: 100, y: 0))
    }
    .stroke(Color.white, style: StrokeStyle(lineWidth: 5, lineCap: .round, lineJoin: .round))

    let b = RoundedRectangle(cornerRadius: 5, style: .continuous)
        .fill(Color.white)
        .frame(width: 30, height: 30)
        .position(CGPoint.zero)

    return ZStack {
        a
        b
    }
    .compositingGroup()
    .colorMultiply(Color.red)
}

【讨论】：

甚至没有回答这个问题。问题是询问如何获得联合火盆路径，而不是绘制形状。