1.7-ZRender

API文档

https://ecomfe.github.io/zrender-doc/public/api.html

一、 创建和销毁

// 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 是一个容器，可以插入子节点，Group 的变换也会被应用到子节点上。
• getBoundingRect // 包围盒

动画

• start()
• stop()
• when()
• pause() // 暂停
• done() // 结束回调
• zrender.Animator.during(callback) // 关键帧回调

el.animate('style', false)
    .when(1000, {x: 10})
    .done(function () {
         // Animation done
    })
    .start()

元素的添加销毁

• add(el) // zr.add(circle);
• remove(el)
• clear() // 清除所有对象和画布
• dispose() // 清除自身
• flush() // 立即触发refresh和refreshHover所标记的重绘操作

绑定解绑触发事件

// 事件名称，支持： 'click'、 'mousedown'、 'mouseup'、 'mousewheel'、 'dblclick'、 'contextmenu'

• on()
• off()
• trigger() // zrender.Eventful.trigger(event)

回调事件

• zrender.Element.beforeUpdate
• zrender.Element.afterUpdate
• zrender.Element.attr(key, value) // 会触发重绘事件，element.xxx = ... 不会触发重绘事件

element.attr('position', [100, 200]);
element.attr({
    style: {
        fill: 'red'
    },
    shape: {
        x: 100
    }
});

常用util

• bind() 修改执行上下文
• clone() 深拷贝对象