听说你想写个渲染引擎 - 绘制

大家好，我是微微笑的蜗牛，。

上一节我们讲了如何确定节点布局信息，输出了布局树。今天，将介绍最后一个环节，绘制。内容不多，相对也比较好理解。

附上前面几节的链接，想了解的童靴可以先看看。

• 听说你想写个渲染引擎 - 前言
• 听说你想写个渲染引擎 - html 解析
• 听说你想写个渲染引擎 - css 解析
• 听说你想写个渲染引擎 - 样式树
• 听说你想写个渲染引擎 - 布局树

整体流程

整个过程如下：

• 根据布局树生成绘制命令列表
• 光栅化，生成像素点信息
• 将像素转换为图片
• 显示到屏幕

绘制命令是个啥？它描述了你该如何绘制一个图形，比如位置大小、颜色、形状等等。

这里，我们只处理背景色和边框的绘制，文字暂不涉及。所以只需支持矩形绘制，知道矩形的位置大小、颜色就好。

数据结构

绘制命令，定义为枚举类型。暂且只支持矩形，关联颜色和区域。

// 绘制命令，目前只支持颜色绘制
enum DisplayCommand {
    case SolidColor(Color, Rect)
}

画布，用来保存像素信息。

// 画布
struct Canvas {
    var width: Int
    var height: Int
    
    // 像素点，argb
    var pixels: [Color]
}

生成绘制命令

背景

背景的绘制命令比较好生成。从节点样式表中取出背景色 background，再计算出背景区域就好。

背景区域包括「内容区+内边距+边框」。

image

代码如下：

// 绘制背景
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。

另外，边框分为上下左右四个矩形区域，需分别计算出来。如下所示：

image

绘制命令的生成跟背景色差不多，只是注意下矩形区域的计算。

总绘制列表

递归遍历布局树，将每个节点的绘制命令加入到数组，即可得到总绘制命令列表。

// 生成总体绘制列表
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.size)
            )
            else { return nil }

        guard let cgim = CGImage(
            width: width,
            height: height,
            bitsPerComponent: bitsPerComponent,
            bitsPerPixel: bitsPerPixel,
            bytesPerRow: width * MemoryLayout.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。

效果如下图所示：

image

完整代码可点此查看：https://github.com/silan-liu/tiny-web-render-engine-swift。

总结

这一节主要介绍了绘制的相关操作，重点在于将布局信息生成绘制列表，然后进行光栅化，转换为像素点的过程。

至此，「听说你想写个渲染引擎」系列已全部完结，感谢您的阅读~