大家好，我是微微笑的蜗牛，🐌。
上一节我们讲了如何确定节点布局信息，输出了布局树。今天，将介绍最后一个环节，绘制。内容不多，相对也比较好理解。
附上前面几节的链接，想了解的童靴可以先看看。
整体流程
整个过程如下：
- 根据布局树生成绘制命令列表
- 光栅化，生成像素点信息
- 将像素转换为图片
- 显示到屏幕
绘制命令是个啥？它描述了你该如何绘制一个图形，比如位置大小、颜色、形状等等。
这里，我们只处理背景色和边框的绘制，文字暂不涉及。所以只需支持矩形绘制，知道矩形的位置大小、颜色就好。
数据结构
绘制命令，定义为枚举类型。暂且只支持矩形，关联颜色和区域。
// 绘制命令，目前只支持颜色绘制
enum DisplayCommand {
case SolidColor(Color, Rect)
}
画布，用来保存像素信息。
// 画布
struct Canvas {
var width: Int
var height: Int
// 像素点，argb
var pixels: [Color]
}
生成绘制命令
背景
背景的绘制命令比较好生成。从节点样式表中取出背景色 background，再计算出背景区域就好。
背景区域包括「内容区+内边距+边框」。
代码如下：
// 绘制背景
func renderBackground(list: inout [DisplayCommand], layoutBox: LayoutBox) {
// 获取背景色
if let color = getColor(layoutBox: layoutBox, name: "background") {
// 背景包括 padding + border + content
let displayCommand = DisplayCommand.SolidColor(color, layoutBox.dimensions.borderBox())
list.append(displayCommand)
}
}
边框
同样，首先从样式表中取出边框颜色 border-color。
另外，边框分为上下左右四个矩形区域，需分别计算出来。如下所示：
绘制命令的生成跟背景色差不多，只是注意下矩形区域的计算。
总绘制列表
递归遍历布局树，将每个节点的绘制命令加入到数组，即可得到总绘制命令列表。
// 生成总体绘制列表
func buildDisplayList(layoutRoot: LayoutBox) -> [DisplayCommand] {
var list: [DisplayCommand] = []
renderLayoutBox(list: &list, layoutBox: layoutRoot)
return list
}
func renderLayoutBox(list: inout [DisplayCommand], layoutBox: LayoutBox) {
// 绘制背景
renderBackground(list: &list, layoutBox: layoutBox)
// 绘制边框
renderBorder(list: &list, layoutBox: layoutBox)
// 遍历子节点，递归生成命令
for child in layoutBox.children {
renderLayoutBox(list: &list, layoutBox: child)
}
}
光栅化
将绘制命令转换为像素信息。
绘制命令中包含颜色和区域，将该区域中每个点的色值写入像素数组就好。
// 生成像素点
mutating func genPixel(color: Color, rect: Rect) {
// 将 rect 范围内的点填充为 color，不能超过画布大小
// clamp 主要是用于限制范围
let x0 = Int(rect.x.clamp(min: 0, max: Float(self.width)))
let y0 = Int(rect.y.clamp(min: 0, max: Float(self.height)))
let x1 = Int((rect.x + rect.width).clamp(min: 0, max: Float(self.width)))
let y1 = Int((rect.y + rect.height).clamp(min: 0, max: Float(self.height)))
// 遍历所有点，横向一行行填充
for y in y0...y1 {
for x in x0...x1 {
let index = y * width + x
pixels[index] = color
}
}
}
生成图片
得到像素信息数组后，使用 CoreGraphics 的 api 生成图片。注意 color 的顺序是 argb。
func imageFromARGB32Bitmap(pixels: [Color], width: Int, height: Int) -> UIImage? {
guard width > 0 && height > 0 else { return nil }
guard pixels.count == width * height else { return nil }
let rgbColorSpace = CGColorSpaceCreateDeviceRGB()
let bitmapInfo = CGBitmapInfo(rawValue: CGImageAlphaInfo.premultipliedFirst.rawValue)
let bitsPerComponent = 8
let bitsPerPixel = 32
var data = pixels // Copy to mutable []
guard let providerRef = CGDataProvider(data: NSData(bytes: &data,
length: data.count * MemoryLayout<PixelData>.size)
)
else { return nil }
guard let cgim = CGImage(
width: width,
height: height,
bitsPerComponent: bitsPerComponent,
bitsPerPixel: bitsPerPixel,
bytesPerRow: width * MemoryLayout<PixelData>.size,
space: rgbColorSpace,
bitmapInfo: bitmapInfo,
provider: providerRef,
decode: nil,
shouldInterpolate: true,
intent: .defaultIntent
)
else { return nil }
return UIImage(cgImage: cgim)
}
显示
这步只需创建一个 ImageView 将 image 显示出来。
测试数据
测试数据在工程目录下的 Example 下面，test.html 和 test.css。
效果如下图所示：
完整代码可点此查看：https://github.com/silan-liu/tiny-web-render-engine-swift。
总结
这一节主要介绍了绘制的相关操作，重点在于将布局信息生成绘制列表，然后进行光栅化，转换为像素点的过程。
至此，「听说你想写个渲染引擎」系列已全部完结，感谢您的阅读~
