zrender源码分析2--初始化Storage
2024-10-13 03:29:49
接上次分析到初始化ZRender的源码,这次关注内容仓库Storage的初始化
入口1:new Storage();
// zrender.js
/**
* ZRender接口类,对外可用的所有接口都在这里!!
* storage(M)、painter(V)、handler(C)为内部私有类,外部接口不可见
* 非get接口统一返回支持链式调用~
*
* @param {string} id 唯一标识
* @param {HTMLElement} dom dom对象,不帮你做document.getElementById
*
* @return {ZRender} ZRender实例
*/
function ZRender(id, dom) {
this.id = id;
this.env = require('./tool/env'); this.storage = new Storage();
this.painter = new Painter(dom, this.storage);
this.handler = new Handler(dom, this.storage, this.painter); // 动画控制
this.animatingShapes = [];
this.animation = new Animation({
stage : {
update : getAnimationUpdater(this)
}
});
this.animation.start();
}
初始化工作做了如下事情:
初始化如下容器:常规形状、zlevel排列的形状、高亮层容器、数据改变的zlevel
初始化最大zlevel为0
// Storage.js
/**
* 内容仓库 (M)
*
*/
function Storage() {
// 所有常规形状,id索引的map
this._elements = {}; // 所有形状的z轴方向排列,提高遍历性能,zElements[0]的形状在zElements[1]形状下方
this._zElements = []; // 高亮层形状,不稳定,动态增删,数组位置也是z轴方向,靠前显示在下方
this._hoverElements = []; // 最大zlevel
this._maxZlevel = 0; // 有数据改变的zlevel
this._changedZlevel = {};
}
入口2:清除图形
// zrender_demo.html
zr.clear(); // zrender.js
/**
* 清除当前ZRender下所有类图的数据和显示,clear后MVC和已绑定事件均还存在在,ZRender可用
*/
ZRender.prototype.clear = function () {
this.storage.del();
this.painter.clear();
return this;
};
这边的清除操作由于是全局清理,所以代码很简单,将各容器置空,并标记所有图层数据均已修改(Painter会根据这个进行具体的清理操作)。
至于部分清除,我们还是晚点再看吧。
// Storage.js
/**
* 删除,shapeId不指定则全清空
*
* @param {string= | Array} idx 唯一标识
*/
Storage.prototype.del = function (shapeId) {
if (typeof shapeId != 'undefined') {
// ......
}
else{
// 不指定shapeId清空
this._elements = {};
this._zElements = [];
this._hoverElements = [];
this._maxZlevel = 0; //最大zlevel
this._changedZlevel = { //有数据改变的zlevel
all : true
};
} return this;
};
入口3:storage中添加图形
// zrender.js
/**
* 添加图形形状
*
* @param {Object} shape 形状对象,可用属性全集,详见各shape
*/
ZRender.prototype.addShape = function (shape) {
this.storage.add(shape);
return this;
};
添加的shape属性如下:
调用shape/Base的updateNeedTransform更新transform
将shape添加到上面提到的容器中
// Storage.js
/**
* 添加
*
* @param {Shape} shape 参数
*/
Storage.prototype.add = function (shape) {
shape.updateNeedTransform();
shape.style.__rect = null;
this._elements[shape.id] = shape;
this._zElements[shape.zlevel] = this._zElements[shape.zlevel] || [];
this._zElements[shape.zlevel].push(shape); this._maxZlevel = Math.max(this._maxZlevel, shape.zlevel);
this._changedZlevel[shape.zlevel] = true; return this;
};
如上代码,依次更新了所有常规形状容器、根据zlevel排列的容器(二维数组);更新maxZlevel;标记level: 0需要更新。
最后我们看下添加好图形后的storage对象
显然已成功将circle添加。
最新文章
- shane祝大家新年快乐
- CLR via C# 3rd - 05 - Primitive, Reference, and Value Types
- WEB前端开发学习:源码canvas 雪
- spark资料
- DzzOffice结合office web Apps私有部署的实例
- HDU-4738 Caocao's Bridges 边联通分量
- linuxcon-europe 2015 linux大会
- C# Get Desktop Screenshot ZZ
- Razor引擎的转换数据类型
- webstorm中关于vue的一些问题
- [Ext.Net] 1.x GridPanel列数过多给Menu菜单加滚动条
- Qt5.7 实现Https 认证全过程解析(亲自动手版)
- 【Python3爬虫】使用异步协程编写爬虫
- MySQL数据库的安装教程及相关问题
- 简单的 FastDFS + Nginx 应用实例
- C# 连接数据库实现增删改查
- UEFI、BIOS、Secure Boot的关系和知识介绍
- AEAI DP创建弹窗
- 空间管理 您的位置: 51Testing软件测试网 » lilisx2006的个人空间 » 日志 在一个没有测试经理的小公司如何做好测试
- Mysql分区表及自动创建分区Partition