CGPattern是在图形上下文中重复绘制的一系列绘制操作。你可以像使用颜色一样使用图案。当使用CGPattern进行绘制时,Quartz将页面划分为一组图案单元格,每个单元格的大小为CGPattern初始化时bounds的大小,并使用您提供的回调来绘制每个单元格。下图为一个简单的CGPattern绘制的图案:
白色部分为图形绘制的上下文 ,带蓝色边框的区域为CGPattern绘制的单元格,它是根据指定规则平铺在图形上下文中的。它总是从上下文的左上角(坐标系原点为左上角时)开始绘制,然后按照一定规则平铺满整个图形上下文。
上面图案的绘制具体代码如下:
override func draw(_ rect: CGRect) {
guard let context = UIGraphicsGetCurrentContext() else { return }
context.saveGState() // 保存上下文状态,以便绘制完图案后恢复上下文原来的状态(即:这里保存之前的状态)
// 初始化一个回调函数
// 参数
// 1:版本号,一般传0即可;
// 2:一个绘制图案的函数(该函数有两个参数,1:CGPattern初始化时第一个参数info;2:绘制图案的上下文)
// 3:释放CGPattern初始化时第一个参数info指针的回调函数
var callbacks = CGPatternCallbacks(version: 0, drawPattern: { (info, ctx) in
// 这里获取CGPattern初始化时传入的图案单元格的size(注意:这里不能用takeRetainedValue(),这样会导致info资源回收,而在下次回调中报错)
let size = Unmanaged<NSValue>.fromOpaque(info!).takeUnretainedValue().cgSizeValue
let bounds = CGRect(origin: .zero, size: size)
// 设置画笔宽度
ctx.setLineWidth(2)
// 设置画笔颜色
ctx.setStrokeColor(UIColor.red.cgColor)
// 设置填充色
ctx.setFillColor(UIColor.green.cgColor)
// 添加一个矩形框
ctx.addRect(bounds)
// 绘制边框并填充颜色
ctx.drawPath(using: .fillStroke)
}) { info in
// 需要在这里将CGPattern初始化时传入info指针内存回收
Unmanaged<NSValue>.fromOpaque(info!).release()
}
// 图案单元格的间隙
let space: CGFloat = 10
// 当前上下文中,水平方向上单元格的个数(用于计算单元格的size)
let cellCount: CGFloat = 5
let drawBounds = bounds // 当前上下文画布矩形
// 计算图案单元格尺寸
let cellSize = (drawBounds.width - space \* (cellCount - 1)) / cellCount
let size = CGSize(width: cellSize, height: cellSize)
// 初始化CGPattern
// 参数
// 1:用于向绘制函数中传递的info,这里我们将图案的单元格size作为info(这里使用passRetained,是为了保持NSValue的引用计数)
// 2:设置图案单元格的尺寸
// 3:突然单元格的变换矩阵
// 4:单元格水平方向的间距
// 5:单元格垂直方向的间距
// 6:平铺模式
// 7:图案单元格是否为彩色的(当我们绘制的突然需要颜色时,设置为true)
// 8:绘制图案的回调
guard let pattern = CGPattern(info: Unmanaged<NSValue>.passRetained(NSValue(cgSize: size)).toOpaque(),
bounds: CGRect(x: 0, y: 0, width: size.width, height: size.height),
matrix: .identity,
xStep: size.width + space,
yStep: size.height + space,
tiling: .noDistortion,
isColored: true,
callbacks: &callbacks) else {
print("pattern create fail")
return
}
// 创建颜色空间,采用patternBaseSpace初始化(注意:如果isColored=true,这里一般设置为nil即可)
guard let colorSpace = CGColorSpace(patternBaseSpace: nil) else {
print("colorSpace create fail")
return
}
// 设置填充的颜色空间(这里必须设置,否则图案将无法正常绘制填充色)
context.setFillColorSpace(colorSpace)
var alpha: CGFloat = 1
// 设置填充图案CGPattern,用于填充绘制。第二个参数:指定了图案绘制中用到的颜色透明度
context.setFillPattern(pattern, colorComponents: &alpha)
// 调用填充绘制,这里会采用上面的pattern进行绘制
context.fill(drawBounds)
context.restoreGState() // 恢复上下文状态
}
具体细节已在代码注释中说明,但是这里我要着重说明一下xStep和yStep这两个参数。我们用一张图来理解一下:
从图中可知,xStep是距离前一个图案单元格水平原点的距离,yStep是距离前一个图案单元格垂直原点的距离。因此,如果xStep小于单元格的宽度,那么前后两个单元格在水平方向将会重叠,yStep同样如此。
我们可以在回调函数中任意绘制我们的图案,不局限在绘制矩形或线条,向下面这样:
下面是具体绘制的部分代码:
var callbacks = CGPatternCallbacks(version: 0, drawPattern: { (info, ctx) in
// 这里获取CGPattern初始化时传入的图案单元格的size(注意:这里不能用takeRetainedValue(),这样会导致info资源回收,而在下次回调中报错)
let size = Unmanaged<NSValue>.fromOpaque(info!).takeUnretainedValue().cgSizeValue
// 设置填充色
ctx.setFillColor(UIColor.red.cgColor)
let psize = min(size.width, size.height)
var r: Double, theta: Double
r = 0.8 \* psize / 2
theta = 2 \* Double.pi \* (2.0 / 5.0)
ctx.translateBy(x: psize/2, y: psize/2)
ctx.move(to: .init(x: 0, y: r))
for k in 1..<5 {
ctx.addLine(to: .init(x: r \* sin(Double(k) \* theta), y: r \* cos(Double(k) \* theta)))
}
ctx.closePath()
ctx.fillPath()
}) { info in
// 需要在这里将CGPattern初始化时传入info指针内存回收
Unmanaged
}
手机扫一扫
移动阅读更方便
你可能感兴趣的文章