zrender原始碼分析初探如何畫乙個圓

今天是想看看使用zrender框架如何去，畫乙個圓，再加「circle」的文字在圓心。

然後開始**：

準備工作如下：

dom中新建乙個容器用於繪圖：

然後直接寫**就可以了。

呼叫zrender的init介面初始化

// zrender_demo.html
var zr = zrender.init(document.getelementbyid('main'));

進入init方法，發現做2件事情：a、初始化zrender；b、將其存入zrender例項map索引

/**
* zrender初始化
* 不讓外部直接new zrender例項，為啥？
* 不為啥，提供全域性可控同時減少全域性汙染和降低命名衝突的風險！
* * @param  dom dom物件，不幫你做document.getelementbyid了
* @param  params 個性化引數，如自定義shape集合，帶進來就好
* * @return  zrender例項
*/zrender.init = function(dom, params) );
_instances[zi.id] = zi;
return zi;
};

其中guid()是zrender統一的id生成機制，通過esl載入，然後按需呼叫：

// zrender.js
var guid = require('./tool/guid');
guid();
// tool/guid.js
/** * zrender: 生成唯一id
* * @author errorrik ([email protected])
*/define(
function() ;});

進入zrender介面類，這邊體現官網提到的「mvc核心封裝實現圖形倉庫、檢視渲染和互動控制」

* zrender介面類，對外可用的所有介面都在這裡！！

* storage（m）、painter（v）、handler（c）為內部私有類，外部介面不可見

* 非get介面統一返回支援鏈式呼叫~

* * @param id 唯一標識

* @param dom dom物件，不幫你做document.getelementbyid

* * @return zrender例項

*/function zrender(id, dom)

});this.animation.start();

}這邊storage、painter、handler、animation的初始化暫時不細究跳過

好習慣是每次繪圖前，都清空畫布

// zrender_demo.html
zr.clear();

zrender執行清空時，清空storage後，再執行painter的clear()方法

// zrender.js
/** * 清除當前zrender下所有類圖的資料和顯示，clear後mvc和已繫結事件均還存在在，zrender可用
*/zrender.prototype.clear = function () ;

同樣暫不細究storage、painter的清除機制

接下來開始繪圖，新增乙個圓形

// zrender_demo.html
var color = require('zrender/tool/color');
var coloridx = 0;
var width = math.ceil(zr.getwidth());    // 檢視寬度
var height = math.ceil(zr.getheight());    // 檢視高度

f11檢視getwidth()，呼叫painter的方法。getheight類似實現

// zrender.js
/** * 獲取檢視寬度
*/zrender.prototype.getwidth = function() ;

// zrender_demo.html
var circle = new circleshape(,
hoverable : true,   // default true
draggable : true,   // default false
clickable : true,   // default false
// 可自帶任何有效自定義屬性
_name : 'hello~',
onclick: function(params),
// 響應事件並動態修改圖形元素
onmousewheel: function(params);
zr.modshape(params.target.id, })
zr.refresh();
eventtool.stop(params.event);
}});

初始化圓circle，直接呼叫基類

// shape/circle.js
function circle(options)

base中先對各屬性進行預設值初始化，而後使用傳入值覆蓋

// shape/base.js
function base( options ) 
this.style = this.style || {};
}

往storage中新增圖形形狀

// zrender_demo.html
zr.addshape(circle);

// zrender.js
/** * 新增圖形形狀
*  * @param  shape 形狀物件，可用屬性全集，詳見各shape
*/zrender.prototype.addshape = function (shape) ;

執行繪圖

// zrender_demo.html
zr.render();

zrender直接呼叫painter介面渲染

// zrender.js 
/** * 渲染
*  * @param  callback  渲染結束後**函式
* todo:增加緩動函式
*/zrender.prototype.render = function (callback) ;

storage、 painter、handler等未完待續。

golang初探與命令原始碼分析

前段時間有群友在群裡問乙個go語言的問題就是有乙個main.go的main函式裡呼叫了另乙個demo.go裡的hello 函式。其中main.go和hello.go同屬於main包。但是在main.go的目錄下執行go run main.go卻報hello函式沒有定義的錯結構如下 gopath ...

golang初探與命令原始碼分析

OkHttp原始碼初探

在之前的文章我中我們介紹了okhttp的基本使用方法並簡單說明了原始碼下各個module的功能作用，從這篇開始我們將要開始分析okhttp的原始碼。首先，我們先來回憶一下okhttp的使用過程 1.建立乙個okhttpclient物件 2.建立乙個request物件 3.呼叫okhttpclient...

zrender原始碼分析 初探如何畫乙個圓

golang初探與命令原始碼分析

golang初探與命令原始碼分析

OkHttp原始碼初探

相關推薦

zrender原始碼分析初探如何畫乙個圓