# 为什么要分析 zrender 的源码

在分析 zrender 之前,已经使用了 zrender 做了很多的项目了;而且前面也看了 echarts 的源码,对源码有太多的疑问,特别是 dirty 等变量的含义不明确。

# 结构

fsdfsd

# 原因

# 更多的参数

在 canvas 中有一个 切片 Slicing,在文档中并没有提起;文档中只有 x, y, width, height 而没有多余的参数了。

在源码中可以得知:

if (style.sWidth && style.sHeight) {
    var sx = style.sx || 0;
    var sy = style.sy || 0;
    ctx.drawImage(
        image,
        sx, sy, style.sWidth, style.sHeight,
        x, y, width, height
    );
}
else if (style.sx && style.sy) {
    var sx = style.sx;
    var sy = style.sy;
    var sWidth = width - sx;
    var sHeight = height - sy;
    ctx.drawImage(
        image,
        sx, sy, sWidth, sHeight,
        x, y, width, height
    );
}
else {
    ctx.drawImage(image, x, y, width, height);
}

除了原来的参数外,还存在sx, sy, sWidth, sHeight 参数,可以实现切片功能。

# 过少的实例

实例过少,很多概念不明白

# 动画原理

在项目实践过程中,每个元素各自动画造成了不同步的情形,而无法解决(自行动画方案)

# 回归原生

自己想了解canvas和svg的实际应用

# 收获

目前了解了很多,比如 zrender 可以分为两个部分:

  • zrender 的控制部分 负责画布的刷新等(包含画布,动画等)
  • zrender 的绘制部分 graphic 的绘图功能

而所有的绘图都是基于 path.extend 扩展出来的图形, 而需要扩展更多的话,需要自己了解canvas及svg等。

zrender 在使用 canvas 做渲染的时候,会根据刷新频次的不同分层来实现,从而提高了渲染的效率;

判断一个点是否在元素上,这个也很重要的。