Skip to content
目录

ZRender

使用 Canvas 或 SVG 渲染引擎创建高性能的 2D 图形和动画

js
//简化去掉了SSR部分

函数 ZRender 主要流程(id, dom, opts) {  
    // 1. 初始化属性  
    初始化默认属性_sleepAfterStill, _stillFrameAccum, _needsRefresh, _needsRefreshHover, _darkMode

    // 2. 处理传入参数  
    如果 opts 为空 {  
        设置 opts  空对象  
    }  
    绑定 DOM  dom  
    绑定 实例 ID  id  

    // 3. 创建图形存储  
    创建 storage  新的 Storage()  

    // 4. 选择渲染器  
    设置 rendererType  opts.renderer  'canvas'  
    如果 渲染器未导入(rendererType) {  
        抛出错误 "渲染器未导入"  
    }  

    // 5. 设置渲染选项  
    设置 useDirtyRect  opts.useDirtyRect默认 false

    // 6. 创建渲染器实例  
    创建 painter  新的 rendererType(dom, storage, opts)  

    // 7. 创建事件处理  
    创建 handlerProxy  新的 HandlerDomProxy(painter的根元素)  

    // 8. 配置指针事件  
    设置 useCoarsePointer  opts.useCoarsePointer  
    设置 pointerSize  根据环境配置大小  

    // 9. 创建事件处理器  
    创建 this.handler  新的 Handler(storage, painter, handlerProxy)  

    // 10. 创建动画管理器  
    创建 this.animation  新的 Animation({  
        stage: {  
            update: 返回 _flush(true) // 调用刷新  
        }  
    })  

    // 11. 启动动画  
    调用 this.animation.start()  
}
本站总访问量 次 本站访客数 人次

1111111111111111111