API文檔
https://ecomfe.github.io/zrender-doc/public/api.html
一低缩、 創(chuàng)建和銷毀
// html
<div id="main" style={{ height: '500px', width: '700px' }} />
// 初始化 react放在componentDidMount
var main = document.getElementById('main');
var zr = zrender.init(main);
// 銷毀 放在componentWillUnmount
zrender.dispose(zr);
二唱矛、形狀
https://ecomfe.github.io/zrender-doc/public/api.html#zrendercircle
常用的
- zrender.Rect(opts) 傳左上角的點和寬高
- zrender.Circle(opts) 傳圓心坐標和半徑
- zrender.Line(opts) 起點終點坐標
- zrender.Text(opts) 文字
- zrender.Polygon(opts) 填充多邊形
- zrender.Polyline(opts) 描邊多邊形
var circle = new zrender.Circle({
position: [100, 100],
scale: [1, 1],
shape: {
cx: 50,
cy: 50,
r: 50,
},
style: {
fill: gradient,
lineWidth: 5,
text: 'circle',
textPosition: 'inside',
},
});
Group 和 getBoundingRect
- 組。Group 是一個容器瞧掺，可以插入子節(jié)點，Group 的變換也會被應(yīng)用到子節(jié)點上。
- getBoundingRect // 包圍盒
動畫
- start()
- stop()
- when()
- pause() // 暫停
- done() // 結(jié)束回調(diào)
- zrender.Animator.during(callback) // 關(guān)鍵幀回調(diào)
el.animate('style', false)
.when(1000, {x: 10})
.done(function () {
// Animation done
})
.start()
元素的添加銷毀
- add(el) // zr.add(circle);
- remove(el)
- clear() // 清除所有對象和畫布
- dispose() // 清除自身
- flush() // 立即觸發(fā)refresh和refreshHover所標記的重繪操作
綁定解綁觸發(fā)事件
// 事件名稱企锌，支持： 'click'、 'mousedown'于未、 'mouseup'撕攒、 'mousewheel'、 'dblclick'沉眶、 'contextmenu'
- on()
- off()
- trigger() // zrender.Eventful.trigger(event)
回調(diào)事件
- zrender.Element.beforeUpdate
- zrender.Element.afterUpdate
- zrender.Element.attr(key, value) // 會觸發(fā)重繪事件打却，element.xxx = ... 不會觸發(fā)重繪事件
element.attr('position', [100, 200]);
element.attr({
style: {
fill: 'red'
},
shape: {
x: 100
}
});
常用util
- bind() 修改執(zhí)行上下文
- clone() 深拷貝對象
