zrender实现图形缩放功能

一、绘制一个矩形图

<div id="main-container"></div>

#main-container {width: 500px;height: 300px;border: 1px solid #888;
}

import * as zrender from 'zrender'const container = document.querySelector('#main-container')
const zr = zrender.init(container)
const rect = new zrender.Rect({shape: {x: 100,y: 100,height: 100,width: 100},style: {fill: '#128bed'}
})
const group = new zrender.Group()
group.add(rect)
zr.add(group)

如下图：
在这里插入图片描述

二、实现缩放功能

这里我们需要引入echarts的两个辅助类：RoamController、roamHelper

import RoamController from 'echarts/src/component/helper/RoamController'
import * as roamHelper from 'echarts/src/component/helper/roamHelper'// 继续第一步的代码...const groupOpt = group.getBoundingRect()
const controller = new RoamController(zr)
const controllerHost = { target: group, zoom: 1, zoomLimit: { min: 0.2, max: 3 },// 配置缩放的范围originX: groupOpt.x + groupOpt.width / 2, originY: groupOpt.y + groupOpt.height / 2 
}controller
.off('pan')
.off('zoom')
.on('pan', function (e) {roamHelper.updateViewOnPan(controllerHost, e.dx, e.dy)
})
.on('zoom', function (e) {controllerHost.originX = e.originXcontrollerHost.originY = e.originYroamHelper.updateViewOnZoom(controllerHost, e.scale, e.originX, e.originY)
})

现在还不能缩放，还需要以下操作才可实现

controller.enable(true)
controller.setPointerChecker(function(){ return true })

效果如下图：
在这里插入图片描述

按钮实现放大、缩小

在这里插入图片描述

const zoomIn = document.querySelector('#zoom-in')
const zoomOut = document.querySelector('#zoom-out')
const reset = document.querySelector('#reset')zoomIn.onclick = () => {roamHelper.updateViewOnZoom(controllerHost, 1.2, controllerHost.originX, controllerHost.originY)
}
zoomOut.onclick = () => {roamHelper.updateViewOnZoom(controllerHost, 0.8, controllerHost.originX, controllerHost.originY)
}
reset.onclick = () => {group.scale[0] = 1group.scale[1] = 1group.position[0] = 0group.position[1] = 0group.dirty()
}