ZRender

介绍

ZRender 是一个轻量级的 Canvas 渲染引擎，专为图形和图表绘制设计。它通常与 ECharts 配合使用，用于绘制交互式图形、地图和各种可视化效果。ZRender 提供了简单的 API，用于绘制基本图形、处理动画、交互以及事件。

安装 ZRender

npm

npm install zrender --save

CDN

<script src="https://cdn.jsdelivr.net/npm/zrender@5.0.0/dist/zrender.min.js"></script>

创建 ZRender 实例

要使用 ZRender，首先需要创建一个实例。ZRender 会与一个 HTML DOM 元素绑定来进行渲染。

// 获取目标 DOM 元素
const dom = document.getElementById('main')

// 创建 ZRender 实例
const zr = zrender.init(dom)

绘制基本图形

ZRender 提供了多种图形元素，如矩形、圆形、线条、文本等。以下是绘制一个简单矩形和圆形的示例：

// 创建一个矩形
const rect = new zrender.Rect({
  shape: {
    x: 50,
    y: 50,
    width: 200,
    height: 100,
  },
  style: {
    fill: '#00DC82',
    stroke: '#000',
    lineWidth: 2,
  },
})

// 创建一个圆形
const circle = new zrender.Circle({
  shape: {
    cx: 300,
    cy: 150,
    r: 50,
  },
  style: {
    fill: '#FF0000',
    stroke: '#000',
    lineWidth: 2,
  },
})

// 将图形添加到 ZRender 实例中
zr.add(rect)
zr.add(circle)

添加事件监听

ZRender 提供了对图形元素的交互事件支持，如点击、拖拽、鼠标移动等。你可以为元素添加事件监听器。

rect.on('click', function (event) {
  console.log('矩形被点击了')
})

circle.on('mouseover', function () {
  circle.attr({
    style: {
      fill: '#00F',
    },
  })
  zr.refresh() // 刷新渲染
})

动画效果

ZRender 支持基本的动画操作，可以通过 animate 方法进行元素的动态更新。

rect
  .animate('shape', true)
  .when(1000, {
    x: 100,
    y: 100,
    width: 250,
    height: 150,
  })
  .start()

使用 ZRender 的分层功能

ZRender 支持层的概念，可以通过 Group 类将多个图形元素组织到一起，这些元素会作为一个整体进行处理。

const group = new zrender.Group()

// 向组中添加图形
group.add(rect)
group.add(circle)

// 将组添加到 ZRender 实例
zr.add(group)

销毁 ZRender 实例

当你不再需要 ZRender 实例时，应该销毁它以释放内存资源。

zr.dispose()

参阅

• ZRender 官方文档