ZRender 强大的二维绘图引擎 - 文章教程

ZRender 强大的二维绘图引擎

发布于 2020-04-20 字数 6457 浏览 1941 评论 0

ZRender 强大的二维绘图引擎,一个轻量级的 Canvas 类库,使用 MVC 封装,数据驱动,提供类 Dom 事件模型,让 Canvas 绘图大不同。

Architecture

MVC 核心封装实现图形仓库、视图渲染和交互控制:

  • Stroage(M) : shape数据CURD管理
  • Painter(V) : canvas 元素生命周期管理,视图渲染,绘画,更新控制
  • Handler(C) : 事件交互处理,实现完整dom事件模拟封装
  • shape : 图形实体,分而治之的图形策略,可定义扩展
  • tool : 绘画扩展相关实用方法,工具及脚手架

特色

简单

无需 Canvas 基础,精简的接口方法,符合 AMD 标准,易学易用。

require(
  ['zrender/zrender'],
  function(zrender) {
    // just init to get a zrender Instance
    var zr = zrender.init(document.getElementById('main'));
    // zr can be used now!
    ...
  }
);

数据驱动

利用 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('catch you!')}
});

// 全局事件
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't worry! Is merge!

zr.refresh();  
// Just the level 1 canvas has been refresh~

丰富的图形选项

当前内置多种图形元素(圆形、椭圆、圆环、扇形、矩形、多边形、直线、曲线、心形、水滴、路径、文字、图片等),统一且丰富的图形属性充分满足你的个性化需求。

var myShape = {
  shape : 'circle',   // sector | ring | rectangle | ...
  zlevel : 1,
  style : {
    ... // color | strokeColor | text | textFont | ... 
  },
  draggable : true
};

强大的动画支持

提供 promise 式的动画接口和常用缓动函数,轻松实现各种动画需求。

var circle = {
  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 派生后仅实现你所关心的图形细节。

function MyShape() { ... }

var shape = require('zrender/shape');
shape.define('myShape', new MyShape());   // define your shape

zr.addShape({                 // and use it!
  shape : 'myShape',
  ...
});

开始使用 ZRender

ZRender 是二维绘图引擎,它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。

下载 ZRender

ZRender 项目在 GitHub 上的地址是:https://github.com/ecomfe/zrender。也可以使用 npm install zrender 下载。

dist 目录下找到 zrender.jszrender.min.js,前者是开发版,后者是发布版。

引入 ZRender

在使用 ZRender 前,需要在 HTML 中加载对应 JavaScript 文件:

<script src="./dist/zrender.js"></script>

初始化 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);

创建了一个圆心在 [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 将保持不变。
});

请参考文档了解更多。

相关资料

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0