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

988 阅读3分钟

大家好,我是微微笑的蜗牛,🐌。

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

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

整体流程

整个过程如下:

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

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

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

数据结构

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

// 绘制命令,目前只支持颜色绘制
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<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。

效果如下图所示:

image

完整代码可点此查看:github.com/silan-liu/t…

总结

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

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