本文只介紹根據鼠標事件動態繪制矩形方法
zrender實現簡易畫板功能可繪制大部分常用圖形在文章末尾可參考

像下圖這樣，可隨心所欲繪制你想繪制的矩形：

完整代碼：（有詳細注釋，有任何疑問歡迎留言）

<template><div class="zrender"><div id="zrender-canvas"></div></div> </template><script> import zrender from 'zrender' export default {name: 'zrender',data() {return {zr: null,group: null,currentId: null}},created() {},mounted() {this.init()},methods: {init() {this.zr = zrender.init(document.getElementById('zrender-canvas'))this.group = new zrender.Group()this.zr.add(this.group)this.handleMouse()},handleMouse() {// 設置三個變量flag鼠標按下標志、起點坐標組、終點坐標組let flag = falselet startPos = nulllet endPos = null// 給畫布添加鼠標事件this.zr.on('mousedown', e => {// 鼠標按下，獲取按下的坐標點flag = truestartPos = [e.event.zrX, e.event.zrY]})this.zr.on('mousemove', e => {// 鼠標移動時if (!flag) return false// 在鼠標按下的情況下執行以下操作// 獲取鼠標移動的坐標點endPos = [e.event.zrX, e.event.zrY]// group遍歷所有子節點移除當前id對應的元素(此處可跳過先看下文)this.group.eachChild(el => {if (el.id === this.currentId) {this.group.remove(el)}})// 創建一個圓矩形let rect = new zrender.Rect({shape: {x: startPos[0], // 起點橫坐標y: startPos[1], // 起點縱坐標width: endPos[0] - startPos[0], // 寬height: endPos[1] - startPos[1] // 高},style: {fill: 'transparent', // 填充顏色，默認#000stroke: '#000', // 描邊顏色，默認nulllineWidth: 1 // 線寬， 默認1}})// 每一個new出來的實例都有一個自己的id,賦值給currentId// 確保鼠標移動過程中不停的new,同時再移除掉this.currentId = rect.id// 添加圓到group里this.group.add(rect)})this.zr.on('mouseup', e => {// 鼠標抬起的時候，把最后一次賦值的id清空掉，保證畫布上可以留下鼠標事件中最后一個new的實例this.currentId = nullflag = false})}} } </script><style> #zrender-canvas {height:700px; } </style>

如下圖簡易畫板功能可繪制大部分漂亮的圖形，可保存圖片到本地

參考：https://gitlab.com/zhangcw66/draw_board
說明：畫板功能并不嚴謹，可參考學習繪圖，不建議實際使用

總結

以上是生活随笔為你收集整理的鼠标移动框选动态绘制图形，基于zrender的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。