如何使用UIBezierPath使用drawInRect繪制UIImage？

Question

我有一個自定義的UIView正在繪制，在drawRect函數中，我創建了一個圓形形狀（具有空心中心，因此可以繪制一個甜甜圈）作為UIBezierPath 。

然后，當我使用drawInRect繪制UIImage時，我想將此UIBezierPath / circle形狀用作遮罩。 所以最后我將得到一個帶有圖像背景的甜甜圈形狀。

我按如下方式創建circle / UIBezierPath ：

let context = UIGraphicsGetCurrentContext()
let progress = CGFloat(1.0)
let diameter = CGFloat(32.0)

let gapExpression: CGFloat = diameter * CGFloat(M_PI)
let dashExpression: CGFloat = progress * diameter * CGFloat(M_PI)

CGContextSaveGState(context)
CGContextTranslateCTM(context, 19, 19)
CGContextRotateCTM(context, -270 * CGFloat(M_PI) / 180)

var circlePath = UIBezierPath()
circlePath.moveToPoint(CGPointMake(-16, 0))
circlePath.addCurveToPoint(CGPointMake(0, -16), controlPoint1: CGPointMake(-16, -8.84), controlPoint2: CGPointMake(-8.84, -16))
circlePath.addCurveToPoint(CGPointMake(16, 0), controlPoint1: CGPointMake(8.84, -16), controlPoint2: CGPointMake(16, -8.84))
circlePath.addCurveToPoint(CGPointMake(0, 16), controlPoint1: CGPointMake(16, 8.84), controlPoint2: CGPointMake(8.84, 16))
circlePath.addCurveToPoint(CGPointMake(-16, 0), controlPoint1: CGPointMake(-8.84, 16), controlPoint2: CGPointMake(-16, 8.84))
circlePath.closePath()
circlePath.lineCapStyle = kCGLineCapRound;

UIColor.grayColor().setStroke()
circlePath.lineWidth = 5
CGContextSaveGState(context)
CGContextSetLineDash(context, 0, [dashExpression, gapExpression], 2)
circlePath.stroke()
CGContextRestoreGState(context)

如果我的drawRect只有那個，它將輸出一個圓/甜甜圈形狀。

但是我也有一個UIImage ：

let image = UIImage(named: "test-shape")

我使用drawInRect繪制，但是我希望圖像被上面的UIBezierPath 。

我將如何完成？

Answer 1

保存上下文，添加剪輯，設置比例，然后繪制圖像。

這應該很接近：

circlePath.lineCapStyle = kCGLineCapRound;      // existing

// add these lines
CGContextSaveGState(context)
circlePath.addClip()
CGContextScaleCTM(context, 1, -1)
CGContextDrawTiledImage(context, CGRectMake(0, 0, test-shape.size.width, test-shape.size.height), test-shape.CGImage)
CGContextRestoreGState(context)

UIColor.grayColor().setStroke()                 //existing

編輯添加替代項：繪制一個甜甜圈，並用圖像填充它。 但是，破折號可能不會達到您需要的效果。 也許這可以有所幫助。

let context = UIGraphicsGetCurrentContext()

let testshape = UIImage(named: "testshape.png")!

var circlePath = UIBezierPath()
circlePath.moveToPoint(CGPointMake(9.5, 2.5))
circlePath.addCurveToPoint(CGPointMake(6.1, 3.38), controlPoint1: CGPointMake(8.27, 2.5), controlPoint2: CGPointMake(7.11, 2.82))
circlePath.addCurveToPoint(CGPointMake(2.5, 9.5), controlPoint1: CGPointMake(3.95, 4.58), controlPoint2: CGPointMake(2.5, 6.87))
circlePath.addCurveToPoint(CGPointMake(9.5, 16.5), controlPoint1: CGPointMake(2.5, 13.37), controlPoint2: CGPointMake(5.63, 16.5))
circlePath.addCurveToPoint(CGPointMake(16.5, 9.5), controlPoint1: CGPointMake(13.37, 16.5), controlPoint2: CGPointMake(16.5, 13.37))
circlePath.addCurveToPoint(CGPointMake(9.5, 2.5), controlPoint1: CGPointMake(16.5, 5.63), controlPoint2: CGPointMake(13.37, 2.5))
circlePath.closePath()
circlePath.moveToPoint(CGPointMake(19, 9.5))
circlePath.addCurveToPoint(CGPointMake(9.5, 19), controlPoint1: CGPointMake(19, 14.75), controlPoint2: CGPointMake(14.75, 19))
circlePath.addCurveToPoint(CGPointMake(0, 9.5), controlPoint1: CGPointMake(4.25, 19), controlPoint2: CGPointMake(-0, 14.75))
circlePath.addCurveToPoint(CGPointMake(3.88, 1.84), controlPoint1: CGPointMake(0, 6.36), controlPoint2: CGPointMake(1.53, 3.57))
circlePath.addCurveToPoint(CGPointMake(9.5, 0), controlPoint1: CGPointMake(5.45, 0.68), controlPoint2: CGPointMake(7.4, 0))
circlePath.addCurveToPoint(CGPointMake(19, 9.5), controlPoint1: CGPointMake(14.75, 0), controlPoint2: CGPointMake(19, 4.25))
circlePath.closePath()
circlePath.lineCapStyle = kCGLineCapRound;

CGContextSaveGState(context)
circlePath.addClip()
CGContextScaleCTM(context, 1, -1)
CGContextDrawTiledImage(context, CGRectMake(0, 0, testshape.size.width, testshape.size.height), testshape.CGImage)
CGContextRestoreGState(context)

如果您只想半圈，這里是一個簡單的繪制方法示例。 只是使用它作為面具。 根據需要旋轉。

let color = UIColor(red: 0.742, green: 0.000, blue: 1.000, alpha: 1.000)

var bezierPath = UIBezierPath()
bezierPath.moveToPoint(CGPointMake(56, 45))
bezierPath.addCurveToPoint(CGPointMake(31, 70), controlPoint1: CGPointMake(56, 58.81), controlPoint2: CGPointMake(44.81, 70))
bezierPath.addCurveToPoint(CGPointMake(26, 65), controlPoint1: CGPointMake(28.24, 70), controlPoint2: CGPointMake(26, 67.76))
bezierPath.addCurveToPoint(CGPointMake(31, 60), controlPoint1: CGPointMake(26, 62.24), controlPoint2: CGPointMake(28.24, 60))
bezierPath.addCurveToPoint(CGPointMake(46, 45), controlPoint1: CGPointMake(39.28, 60), controlPoint2: CGPointMake(46, 53.28))
bezierPath.addCurveToPoint(CGPointMake(31, 30), controlPoint1: CGPointMake(46, 36.72), controlPoint2: CGPointMake(39.28, 30))
bezierPath.addCurveToPoint(CGPointMake(26, 25), controlPoint1: CGPointMake(28.24, 30), controlPoint2: CGPointMake(26, 27.76))
bezierPath.addCurveToPoint(CGPointMake(29.45, 20.24), controlPoint1: CGPointMake(26, 22.78), controlPoint2: CGPointMake(27.45, 20.9))
bezierPath.addCurveToPoint(CGPointMake(31, 20), controlPoint1: CGPointMake(29.94, 20.09), controlPoint2: CGPointMake(30.46, 20))
bezierPath.addCurveToPoint(CGPointMake(56, 45), controlPoint1: CGPointMake(44.81, 20), controlPoint2: CGPointMake(56, 31.19))
bezierPath.closePath()
color.setFill()
bezierPath.fill()