鼠标移动框选动态绘制图形，基于zrender

本文只介绍根据鼠标事件动态绘制矩形方法
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相关推荐

OpenCV-Python实战（番外篇）——OpenCV中利用鼠标事件动态绘制图形
OpenCV-Python实战(番外篇)--OpenCV中利用鼠标事件动态绘制图形使用鼠标事件动态绘制动态绘制图形动态绘制图形和文本相关链接使用鼠标事件动态绘制我们已经在<OpenC ...
esri-leaflet入门教程（5）- 动态绘制图形
esri-leaflet入门教程(5)- 动态绘制图形 by 李远祥在上一章节中已经说明了esr-leaflet是如何加载ArcGIS Server提供的各种服务,这些都是服务本身来决定的,API脚 ...
Leaflet学习之路五——动态绘制图形(点、线、圆、多边形)
leaflet动态绘制图形动态绘点动态绘线动态绘多边形动态绘制矩形 2020.3.16更新更新日志: 2019.1.14:更新了绘制多边形时tmpline没有移除的问题 2019.1.15: ...
css svg做动图,用svg动态绘制图形
以此前对svg的了解,就是通过rect/circle/line--等绘制规则图形,或者利用path路径来绘制更复杂的图形.但是这种绘制是,当我们写好svg的xml文件嵌入html代码,页面载入的时候, ...
动态绘制图形的基本思路
动态图形绘制的基本思路是,创建一个类继承View类(或者继承SurfaceView类).覆盖onCreate()方法,使用Canvas对象在界面上绘制不同的图形,使用invalidate()方法刷新界 ...
python之cv2动态绘制图形
本文部分参考了以下链接内容:https://blog.csdn.net/Vertira/article/details/123631185 代码如下: 说明:按下'c'键实现绘制圆功能:按下'r'键实 ...
屏幕上绘制图形——基于C语言绘制图形（点、线、矩形、圆）
文章目录一.点二.线二.矩形二.圆主要描述了,点.线.矩形.圆的图形绘制实现方法,供大家了解熟悉. 在调用时注意屏幕宽高的设置以及osd地址的修改. 宏定义图形叠加地址:osd_addre ...
基于SVG的鼠标动态绘制矩形和动态放置图片
web开发中经常会遇到需要在图片上或画布上使用鼠标动态绘制图形,或者用图形或者小图片标注位置的需求,这里选择使用svg来实现. 一.在html中添加svg标签,并在其中放置图片(做背景) <sv ...
基于Fixed定位的框选功能
最近项目涉及到一个支持批量操作的小需求,交互上需要使用框选来触发.在查阅了一些资料后发现,网上的方案基本都是基于绝对定位布局的,此方案如果是针对全局(在body上)的框选,还是可用的.但是现实需求里几 ...

鼠标移动框选动态绘制图形，基于zrender

鼠标移动框选动态绘制图形，基于zrender相关推荐

最新文章

热门文章