ios - 带有贝塞尔路径的基本 UIImageView 蒙版形状

Question

我想让个人资料照片看起来像这张照片。我正在尝试 UIBezierPaths()，我相信它们是我最好的选择。

我也是 iOS 绘图新手，但到目前为止我已经能够实现这种形状:

对于我能够学到的东西。代码:

extension UIImage {
    class func shapeImageWithBezierPath(bezierPath: UIBezierPath, fillColor: UIColor?, strokeColor: UIColor?, strokeWidth: CGFloat = 0.0) -> UIImage! {
        //: Normalize bezier path. We will apply a transform to our bezier path to ensure that it's placed at the coordinate axis. Then we can get its size.
        bezierPath.apply(CGAffineTransform(translationX: -bezierPath.bounds.origin.x, y: -bezierPath.bounds.origin.y))
        let size = CGSize(width: bezierPath.bounds.size.width, height: bezierPath.bounds.size.height)

        //: Initialize an image context with our bezier path normalized shape and save current context
        UIGraphicsBeginImageContext(size)
        guard let context = UIGraphicsGetCurrentContext() else { return nil }
        context.saveGState()

        //: Set path
        context.addPath(bezierPath.cgPath)
        //: Set parameters and draw
        if strokeColor != nil {
            strokeColor!.setStroke()
            context.setLineWidth(strokeWidth)
        } else { UIColor.clear.setStroke() }
        fillColor?.setFill()
        context.drawPath(using: .fillStroke)

        //: Get the image from the current image context
        let image = UIGraphicsGetImageFromCurrentImageContext()
        //: Restore context and close everything
        context.restoreGState()
        UIGraphicsEndImageContext()
        //: Return image
        return image
    }
}


  let circleShapePath = UIBezierPath()
circleShapePath.move(to: CGPoint(x: 50, y: 0))
circleShapePath.addLine(to: CGPoint(x: 100, y: 0))
circleShapePath.addLine(to: CGPoint(x: 100, y: 100))
circleShapePath.close()

let newCircle = UIImage.shapeImageWithBezierPath(bezierPath: cirleShapePath, fillColor: .red, strokeColor: .white, strokeWidth: 5)

我的麻烦是找到用曲线连接左上角和底部点并将其连接到 UIImageview 的正确方法。

谢谢!

Answer 1

使用此网站生成您想要的形状，然后将代码(您可能需要根据您的 Swift 版本修改语法)复制到您的项目: http://www.radicalphase.com/bezierpath/