1、开始使用
描述
ZRender是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。
下载
ZRender 项目在 gitHub ,也可以使用 npm install zrender 下载。
在 dist 目录下找到 zrender.js 和 zrender.min.js，前者是开发版，后者是发布版。
初始化 ZRender
在使用 ZRender 前需要初始化实例，具体方式是传入一个 DOM 容器：
var zr = zrender.init(document.getElementById('main'));
创建出的这个实例对应文档中 zrender 实例部分的方法和属性。
在场景中添加元素
ZRender 提供了将近 20 种图形类型，可以在文档 zrender.Displayable 下找到。如果想创建其他图形，也可以通过 zrender.Path.extend 进行扩展。
以创建一个圆为例：
//圆
var circle = new zrender.Circle({shape: {cx: 150,cy: 50,r: 40},style: {fill: 'none',stroke: '#F00'}
});
zr.add(circle);//圆弧
var arc=new zrender.Arc({style:{stroke:'none',fill:'red'},shape:{cx:300,cy:300,r:140,startAngle:0, //开始角度endAngle:Math.PI/3 //结束角度}});zr.add(arc);//扇形var sector=new zrender.Sector({style:{fill:'red'},shape:{cx:300,cy:300,r:80, //外半径r0:0, //内半径startAngle:0, //开始角度endAngle:Math.PI/3, //结束角度clockwise:true //顺时针}});zr.add(sector);//椭圆var ellipse=new zrender.Ellipse({style:{fill:'red'},shape:{cx:200,cy:200,rx:80, //横向半径ry:40 //纵向半径}})zr.add(ellipse);//心型var heart =new zrender.Heart({style:{fill:'red'},shape:{cx:200,cy:200,width:80,height:100}});zr.add(heart);//多边形var Polygon=new zrender.Polygon({style:{fill:'red'},shape:{points:[[100,100],[200,80],[300,160],[150,130],[20,300]] //坐标集合}})zr.add(Polygon)
创建了一个圆心在 [150, 50] 位置，半径为 40 像素的圆，并将其添加到画布中。
修改图形元素属性
通过 a = new zrender.XXX 方法创建了图形元素之后，可以用 a.shape 等形式获取到创建时输入的属性，但是如果需要对其进行修改，应该使用 a.attr(key, value) 的形式修改，否则不会触发图形的重绘。例子：
var circle = new zrender.Circle({shape: {cx: 150,cy: 50,r: 40}
});
zr.add(circle);
console.log(circle.shape.r); // 40
circle.attr('shape', {r: 50 // 只更新 r。cx、cy 将保持不变。
});
图形里的文字
text:'图形文字', //文字
textFill:'#333', //文字颜色
fontSize:12, //文字大小
fontFamily:'', //字体
fontStyle:'normal', //字形
fontWeight:'normal', //加粗
textStroke:'yellow', //文字描边
textWidth:1, //字体线宽
textHeight:12, //字体高度
textLineWidth:1, //字体描边线宽
textLineHeight:14, //字体行高
textPosition:'inside', //字体位置
textPadding:[0,0,0,0], //文字内边距
transformText:true //字体跟随变换效果
//图形里的文字circle.attr({style:{text:'江西理工大学', //文字textFill:'yellow', //文字颜色fontSize:10, //文字大小textPosition:'inside', //字体位置textPadding:[3,3,3,3], //文字内边距// transformText:true //字体跟随变换效果}})
如何给图形添加事件响应？
ZRender支持的事件有： ‘click’、 ‘mousedown’、 ‘mouseup’、 ‘mousewheel’、 ‘dblclick’、 ‘contextmenu’。
//添加事件rect.on('click',function(e){alert('点击了矩形')})
完整代码：
<template><div id="zrCircle"></div>
</template>
<script>
import zrender from 'zrender'
export default {mounted(){//初始化zrendervar zr=zrender.init(document.getElementById("zrCircle"),{renderer:'canvas', //渲染方式width:'600', //画布宽度height:'600' //画布高度});// opts.height=600//在场景中添加元素，一个半径为40的圆var circle=new zrender.Circle({shape:{cx:150, cy:150,r:40},style:{fill:'none', //圆背景色不设置，即白色stroke:'blue' //圆的边框颜色}});//图形里的文字circle.attr({style:{text:'江西理工大学', //文字textFill:'yellow', //文字颜色fontSize:10, //文字大小textPosition:'inside', //字体位置textPadding:[3,3,3,3], //文字内边距// transformText:true //字体跟随变换效果}})//向画布中添加已经定义图形zr.add(circle); //修改图形元素属性 console.log('更新后：',circle.shape.r); // 40circle.attr('shape', { //改变shape中的属性r: 50 // 只更新 r。cx、cy 将保持不变。});console.log('更新前：',circle.shape.r); // 40circle.attr('style',{ //改变style中的属性fill:'skyblue'})}
}
</script>
2、动画
给图形添加动画支持
animate函数 animate(path, loop)：
path 对该对象的哪个元素执行动画
loop 为boolean类型，表示是否循环动画
//给图形添加动画circle.animate('shape',true).when(1000,{cx:200,r:30}).when(2000,{cx:250,r:20}).when(3000,{cx:300,r:30}).when(4000,{cx:350,r:40}).start(); //表示动画开始执行circle.animate('style',true).when(1000,{opacity:0.8}).when(2000,{opacity:0.5}).when(3000,{opacity:0.3}).when(4000,{opacity:0.6}).when(4000,{opacity:0.9}).start();
animateTo 函数
animateTo(target, time, delay, easing, callback, forceAnimate)：为属性设置动画。
部分参数可缺省，支持以下形式的调用：
animateTo(target, time, delay, easing, callback, forceAnimate) //属性，时长，延迟，缓动函数。回调函数，相同属性是否强制执行
animateTo(target, time, delay, easing, callback)
animateTo(target, time, easing, callback)
animateTo(target, time, delay, callback)
animateTo(target, time, callback)
animateTo(target, callback)
animateTo(target)
参数
target 设置动画的对象
time 动画时长
delay 动画延迟执行的时长
easing 缓动函数名称
callback 动画执行完成后的回调函数
forceAnimate 对于相同的属性，是否强制执行
//将圆的半径缓慢的增加至100，颜色改变为红色circle.animateTo({shape:{r:100},style:{fill:'red'},position:[10,10] //x,y轴分别平移10},3000,100,'cubicOut',function(){console.log('done')});
旋转，放大，缩小，平移
//旋转，放大，缩小，平移rect.animateTo({// rotation:Math.PI/3, //正值代表逆时针旋转，负值代表顺时针旋转rotation:Math.PI,origin:[240,190],scale:[1.5,1.5], //x,y轴方向放大至1.5倍position:[100,100] //x,y轴分别平移100})
stopAnimation(forwardToLast)函数
.stopAnimation(Boolean) 是否将动画跳到最后一帧。 true为跳到最后，false为不跳，设置了该函数，不论Boolean为什么，动画停止
circle.stopAnimation(true); //跳到动画最后一帧
animate函数 动画对象
delay(time) 延迟开始时间
done(callback) 设置动画结束的回调函数
during(callback) 为关键帧添加回调函数，在关键帧运行后执行
isPaused() 获得动画是否处于暂停状态。Boolean类型
pause() 暂停动画
resume() 恢复动画
start(easing) 执行动画（缓动函数）
stop(forwardToLast) 停止动画（boolean,是否将动画跳到最后一帧）
when(time,props) 定义关键帧，即动画对象在某个时刻的属性。
3、组的概念
组。Group 是一个容器，可以插入子节点，Group 的变换也会被应用到子节点上。
//getBoundingRect() 获取元素包围盒var g=new zrender.Group({slient:true //组内子孙元素是否响应鼠标事件});var rect=new zrender.Rect({style:{fill:'blue'},shape:{x:10,y:10,width:50,height:40}});var circle=new zrender.Circle({style:{fill:'blue'},shape:{cx:200,cy:50,r:30}});g.add(rect); //添加子节点g.add(circle);zr.add(g);//.getBoundingRect()得到组内所有元素的包围盒console.log(g.getBoundingRect());//返回所有子元素，类型：Element[]。console.log('cc',g.children());//返回特定名字的子元素console.log('circle',g.childOfName('circle'));//返回子元素个数console.log('num',g.childCount());//遍历所有子节点g.eachChild(function(item){ console.log('a',item);}) //在组内删除元素// g.remove(circle) //指定删除// g.removeAll() //清空组内所有元素//整体变换，如g.attr({position:[100,100], //x轴，y轴分别平移100})
4、线
//直线var line =new zrender.Line({style:{stroke:'red', //线的颜色lineWidth:3, //线宽lineDash:[0] //虚线样式},shape:{x1:30, //起始点横坐标y1:30, //起始点纵坐标x2:100, //结束点横坐标y2:100, //结束点横坐标percent:1 //已显示的百分比，用于绘制动画。}});zr.add(line);//多边形折线段var polyline=new zrender.Polyline({style:{stroke:'blue', //线的颜色lineWidth:1, //线宽lineDash:[0] },shape:{points:[[10,20],[100,120],[100,200]] //点集}})zr.add(polyline)//贝塞尔曲线var bezierCurve=new zrender.BezierCurve({style:{stroke:'yellow',lineWidth:3},shape:{x1:70, //起始点横坐标y1:10, //起始点纵坐标x2:150, //结束点横坐标y2:150, //结束点横坐标cpx1:60, //控制点横坐标cpy1:50 //控制点纵坐标}});zr.add(bezierCurve)
5、文字
//初始化zrendervar zr=zrender.init(document.getElementById("zrCircle"),{renderer:'canvas', //渲染方式width:'600', //画布宽度height:'600' //画布高度});var text=new zrender.Text({style:{text:'这是一段文字'+'\n'+'换行',textPadding:[3,5,3,5],fontSize:16}});zr.add(text);//可以通过getBoundingRect()获取文字所占的空间console.log('文字所占空间',text.getBoundingRect());//特别注意的是rect必须设置宽高，才能获取到其所占的空间var rect=new zrender.Rect({style:{text:'这是文字',fontSize:16,textFill:'skyblue' //字体颜色},shape:{x:150,y:150}})zr.add(rect);console.log(rect.getBoundingRect())//返回{x: 10, y: 10, width: 0, height: 0}//文字包围盒var text=new zrender.Text({style:{text:'这是一段文字',textBackgroundColor:'red', //包围盒背景textBorderColor:'#ccc', //包围盒描边颜色textBorderWidth:1, //包围盒描边线宽textPadding:[10,20,10,20] //文字内边距，同css Padding}});
6、线性渐变
zrender.LinearGradient(x, y, x2, y2, colorStops, globalCoord) 起始横坐标，起始纵坐标，结束横坐标，结束纵坐标，组成渐变色的颜色，取值范围
//线性渐变var linearColor = new zrender.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#efe3ff'},{offset: 1,color: '#6cb3e9'}]);var rect = new zrender.Rect({shape: {x: 0, y: 0, width: 100, height:100},style: {fill:linearColor},position: [10,10]});zr.add(rect );
