Intermediate Core Graphics(Swift)-绘制文字、PDF

本文内容来自Drawing Text and Images

Intermediate Core Graphics(Swift)-绘制文字、PDF

绘制文字和图片

绘制image和text有两个方法：

drawAtPoint(_:withAttributes:)

在某个点绘制text或者image，大小为其intrinsic大小，对image而言，intrinsic大小是image大小，对text而言，这的是在指定attribute情况下的大小

drawInRect(_:withAttributes:)

在指定的CGRect中绘制绘制text或者image，image会调整大小，text可能会被截断

sizeWithAttributes(_:)

方法获取到绘制text的大小，如下：



Patterns

使用

UIColor(patternImage:)

本节示例

本节主要是绘制chart的标识文字，并使用Patterns来填充背景，最终的效果如下：



绘制Box和Text

func drawKey(categories: [Category], rect: CGRect)  {

let context = UIGraphicsGetCurrentContext()
let font = UIFont(name: "HelveticaNeue-Bold", size: 14)!
let attributes = [NSFontAttributeName: font,
NSForegroundColorAttributeName: UIColor.whiteColor()]

let boxSize: CGFloat = 15
let margin: CGFloat = 12

var row: CGFloat = 0

//获取最长字符串的宽度
var largestWidth: CGFloat = 0
for category in categories {
let textBounds = category.name.sizeWithAttributes(attributes)
if textBounds.width > largestWidth {
largestWidth = textBounds.width
}
}

CGContextSaveGState(context)
//CTM平移
let offsetX = rect.width - largestWidth - margin - boxSize - margin
let totalHeight = CGFloat(categories.count) * (margin + boxSize)
let offsetY = rect.height / 2 - totalHeight / 2
CGContextTranslateCTM(context, offsetX, offsetY)

//绘制box和文字
for(index, category) in categories.enumerate() {

UIColor.blackColor().setStroke()
//box
let box = UIBezierPath(rect: CGRect(x: 0, y: row, width: boxSize, height: boxSize))
chartColors[index].setFill()
box.fill()
box.lineWidth = 1
box.stroke()

//文字
let point = CGPoint(x: boxSize + margin, y: row)
category.name.drawAtPoint(point, withAttributes: attributes)

row += boxSize + margin

}

CGContextRestoreGState(context)

}

绘制后的效果如下：



绘制Pattern背景

1.创建背景图片

func drawImage() -> UIImage {
let rect = CGRect(x: 0, y: 0, width: 20, height: 20)
UIGraphicsBeginImageContextWithOptions(rect.size, true, 0.0)

darkViewColor.setFill()
UIRectFill(rect)

/*
lightViewColor.setFill()
UIBezierPath(ovalInRect: rect.insetBy(dx: 5, dy: 5)).fill()
*/

let context = UIGraphicsGetCurrentContext()
CGContextSetAlpha(context, 0.5)
lightViewColor.setFill()
UIBezierPath(rect: rect.insetBy(dx: 0, dy: 9)).fill()

let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image

}

2.设置pattern背景

UIColor(patternImage: drawImage()).setFill()
UIRectFill(rect)

效果如下：



绘制Transforming Text

如下，在chart周围添加text，如果直接使用如下代码：

let context = UIGraphicsGetCurrentContext()
let font = UIFont(name: "HelveticaNeue-Bold", size: 18)!
let attributes = [NSFontAttributeName: font,NSForegroundColorAttributeName: UIColor.whiteColor()]
//在扇形外绘制文字
name.drawAtPoint(CGPoint(x:centerPoint.x + radius + 10, y:centerPoint.y), withAttributes:attributes)

效果如下：



会发现chart左侧的文字方向是翻转的，所以在π/2和3π/2之间的文字，需要翻转，角度与弧度的对应关系如下：



代码如下：

let context = UIGraphicsGetCurrentContext()
let font = UIFont(name: "HelveticaNeue-Bold", size: 18)!
let attributes = [NSFontAttributeName: font,NSForegroundColorAttributeName: UIColor.whiteColor()]
//获取当前的CTM
let transform = CGContextGetCTM(context)
//提取CTM的旋转
let radians = atan2(transform.b, transform.a)

//在扇形外绘制文字
if abs(radians) > π / 2 && abs(radians) < 3 / 2 * π {
CGContextSaveGState(context)
CGContextRotateCTM(context, π)
name.drawAtPoint(CGPoint(x:-centerPoint.x - radius + 10, y:-centerPoint.y), withAttributes:attributes)
CGContextRestoreGState(context)
} else {
name.drawAtPoint(CGPoint(x:centerPoint.x + radius + 10, y:centerPoint.y), withAttributes:attributes)
}

效果如下：



现在左侧的文字是绘制在内部的，需要调整

let textWidth = name.sizeWithAttributes(attributes)
name.drawAtPoint(CGPoint(x:-centerPoint.x-textWidth.width - radius - 10, y:-centerPoint.y), withAttributes:attributes)

最终的效果为：

PDF

创建PDF的Context使用如下的两种形式：

UIGraphicsBeginPDFContextToData(_:_:_:)

UIGraphicsBeginPDFContextToFile(_:_:_:)

如下例子：



Reading PDF

简单的方式是使用

UIWebView

，把PDF作为一个文件加载到

UIWebView

中



获取PDF文件相关信息



渲染PDF

如下：



上图内容会上下颠倒，所以在绘制之前，需要翻转context



本例是在

UIWebView

中显示创建的PDF，完整代码如下：

private func createPDF() {
// Create PDF
// set the default page size to 8.5 by 11 inches
// (612 by 792 points).

guard let pdfPath = documentPath()?.path else { return }

UIGraphicsBeginPDFContextToFile(pdfPath, .zero, nil)

UIGraphicsBeginPDFPage()
//渲染背景
renderBackground()

renderCategories()

UIGraphicsBeginPDFPage()
renderBackground()
renderPieChart()

UIGraphicsEndPDFContext()

}

效果如下：

其它

如下创建圆角



第二种方法更高效