HTML5 Canvas类库中的ZRender什么
本文主要介绍"HTML5 Canvas类库中的ZRender什么"，希望能够解决您遇到有关问题，下面我们一起来看这篇 "HTML5 Canvas类库中的ZRender什么" 文章。
一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，让canvas绘图大不同！
Architecture
MVC核心封装实现图形仓库、视图渲染和交互控制：
Stroage(M):shape数据CURD管理
Painter(V):canvas元素生命周期管理，视图渲染，绘画，更新控制
Handler(C):事件交互处理，实现完整dom事件模拟封装
shape:图形实体，分而治之的图形策略，可定义扩展
tool:绘画扩展相关实用方法，工具及脚手架
zrender
特色
简单
无需canvas基础，精简的接口方法，符合AMD标准，易学易用。
require(
['zrender/zrender'],
function(zrender){
//justinittogetazrenderInstance
varzr=zrender.init(document.getElementById('main'));
//zrcanbeusednow!
...
}
);
数据驱动
利用zrender绘图，你只需做的是定义图形数据，剩下的事情就交给zrender吧~
哦，对了，差点忘记告诉你，只要在你定义图形数据时设置draggable属性为true，图形拖拽就已经可用了！
zr.addShape({
shape:'circle',
style:{
x:100,
y:100,
r:50,
color:'rgba(220,20,60,0.8)'
}
});
zr.render();
完整的事件封装
用你再熟悉不过的dom事件模型去操作canvas里的图形元素是件很cool的事情~
你不仅可以响应zrender全局事件，你甚至可以为在特定shape上添加特定事件，后续发生的一切都会按你想的那样去运行~
zr.addShape({
shape:'circle',
style:{...},
//图形元素上绑定事件
onmouseover:function(params){concole.log('catchyou!')}
});
//全局事件
zr.on('click',function(params){alert('Hello,zrender!')});
高效的分层刷新
正如css中zlevel的作用一样，你可以定义把不同的shape分别放在不同的层中，这不仅实现了视觉上的上下覆盖，更重要的是当图形元素发生变化后的refresh将局限在发生了变化的图形层中，这在你利用zrender做各种动画效果时将十分有用，性能自然也更加出色~
zr.addShape(shapeA);//shapeA.zlevel=0;(default)
zr.addShape(shapeB);//shapeB.zlevel=1;
zr.render();
zr.modShape(shapeB.id,{color:'red'});
//Don'tworry!Ismerge!
zr.refresh();
//Justthelevel1canvashasbeenrefresh~
丰富的图形选项
当前内置多种图形元素（圆形、椭圆、圆环、扇形、矩形、多边形、直线、曲线、心形、水滴、路径、文字、图片等），统一且丰富的图形属性充分满足你的个性化需求！
varmyShape={
shape:'circle',//sector|ring|rectangle|...
zlevel:1,
style:{
...//color|strokeColor|text|textFont|...
},
draggable:true
};
强大的动画支持
提供promise式的动画接口和常用缓动函数，轻松实现各种动画需求~
varcircle={
shape:'circle',
id:zr.newShapeId(),
style:{
x:0,
y:0,
r:50
}
};
zr.addShape(circle);
zr.animate(circle.id)
.when(1000,{
position:[100,100]
})
.when(2000,{
rotation:[Math.PI*2,0,0]
})
.start();
易于扩展
分而治之的图形定义策略允许你扩展自己独有的图形元素，你既可以完整实现三个接口方法（brush、drift、isCover），也可以通过base派生后仅实现你所关心的图形细节。
functionMyShape(){...}
varshape=require('zrender/shape');
shape.define('myShape',newMyShape());//defineyourshape
zr.addShape({//anduseit!
shape:'myShape',
...
});
关于 "HTML5 Canvas类库中的ZRender什么" 就介绍到这。希望大家多多支持编程宝库。
基于html5 Canvas图表库的ECharts怎么用：本文主要介绍"基于html5 Canvas图表库的ECharts如何用"，希望能够解决您遇到有关问题，下面我们一起来看这篇 "基于html5 Canvas图表库的ECharts如何用 ...