用图案图像填充多个UIBezierPath

Question

我创建了一个UIView，它绘制了很多UIBezierPaths。现在，我要用绿色纹理图像填充它们。使用以下代码，将在整个视图中而不是在每个Path中填充并重复Image模式。 （“一个路径”是这些矩形中的一个，底部带有圆形）。因此，我希望图案Image适合每个单个路径，并在路径旋转时旋转它。

        var image =  UIImage(named: "test.jpg")!
    let color = UIColor.lightGray
    let fillColor = UIColor.init(patternImage: image)


    var lastPoint: CGPoint? = nil
    for point in points {
        if let lastPointUnwrapped = lastPoint{
            let path = BiberBezierPath(leftPoint: lastPointUnwrapped, rightPoint: point, frame: frame, plusHeight: -140)

            fillColor.setFill()


            path.fill()
            color.setStroke()
            path.lineWidth = 1
            path.lineCapStyle = .butt
            path.stroke()



        }
        lastPoint = point
    }

Answer 1

在某些情况下，您要寻找的任务可能会变得很复杂。但是也许像这样的东西就足够了：

class RoofView: UIView {

    var paths: [(path: UIBezierPath, rotationInRadians: CGFloat)]? { didSet { self.refresh() } }
    var image: UIImage? { didSet { self.refresh() } }
    var preserveImageAspect: Bool = true { didSet { self.refresh() } }

    func refresh() {
        self.setNeedsDisplay() // This will trigger redraw
    }

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

        guard let paths = paths else { return }
        guard let image = image else { return }
        guard let context = UIGraphicsGetCurrentContext() else { return }

        paths.forEach { item in
            context.saveGState() // Save state. This includes transformations and clips

            item.path.addClip()

            let boundingRect: CGRect = {
                let rotatedPath = (item.path.copy() as! UIBezierPath) // Create a duplicate path
                rotatedPath.apply(CGAffineTransform(rotationAngle: -item.rotationInRadians)) // Rotate it backwards

                if preserveImageAspect {
                    let minimumBounds = rotatedPath.bounds
                    let center = CGPoint(x: minimumBounds.midX, y: minimumBounds.midY)
                    let imageRatio: CGFloat = image.size.width / image.size.height
                    if minimumBounds.width / minimumBounds.height < imageRatio {
                        // Preserve height, scale width
                        let size = CGSize(width: minimumBounds.height*imageRatio, height: minimumBounds.height)
                        return CGRect(x: center.x - size.width*0.5, y: center.y - size.height*0.5, width: size.width, height: size.height)
                    } else {
                        // Preserve width, scale height
                        let size = CGSize(width: minimumBounds.width, height: minimumBounds.width/imageRatio)
                        return CGRect(x: center.x - size.width*0.5, y: center.y - size.height*0.5, width: size.width, height: size.height)
                    }
                } else {
                    return rotatedPath.bounds
                }
            }()

            context.rotate(by: item.rotationInRadians)
            image.draw(in: boundingRect)

            context.restoreGState() // Put back state. This includes transformations and clips
        }
    }

}

此代码的作用是拍摄图像，并在给定旋转的情况下将其绘制在所有路径上。

为此，它使用addClip剪切路径的上下文，这意味着随后的每个绘制命令都只会在剪切区域内绘制。

接下来正在绘制需要确定位置的图像。我们尝试适合应绘制图像的最小矩形。旋转路径以确定正确的边界很重要，否则当旋转（例如）45度时边界可能太小。可以选择将长宽比保留为“填充”模式，这需要一些数学运算...

然后旋转上下文，以使图像看起来旋转。然后在给定的路径上绘制图像。

剩下的只是清理，这意味着要恢复状态。这将同时清除剪切蒙版和上下文旋转。

如果对数学感兴趣，可以保留长宽比填充：我们正在尝试在矩形内“填充”尺寸。尺寸来自图像，而矩形是我们要绘制的位置。我们需要比较两个比率（width/height），并根据较大的比率来增加宽度或高度以绘制“边界”。在每种情况下，保留一个坐标，而用图像长宽比确定另一个坐标。这是确定“填充”矩形的一般解决方案。有趣的是，如果您需要“拟合”，只需将不等式更改为if minimumBounds.width / minimumBounds.height > imageRatio {。