一个项目需要对图片上的动物、车等进行标注,用于算法训练。本文基于项目实践,总结了下使用Canvas怎么做到绘制一个矩形,并能拖动此矩形。
绘制实现思路:
1、鼠标按下,记住鼠标起始位置,矩形起点(x1,y1)
2、鼠标移动过程中,鼠标最后的点作为矩形的终点(x2,y2)
3、移动过程中重绘矩形
拖拽实现思路:
1、鼠标按下,判断是否按在矩形区域
2、按在矩形区域,记住鼠标坐标(x1,y1)
3、鼠标移动过程中,鼠标坐标(x2,y2)
4、鼠标偏移量(x2-x1,y2-y1)
5、矩形的起点和终点都加上相应的偏移量
6、重绘矩形
demo实现效果如下:
源码github路径:
https://github.com/lesliefish/WebDevelopment/blob/master/Demos/Canvas/DrawRectAndDrag.html
源码
<!--
* @Author: lesliefish
* @Date: 2021-06-07 20:35:56
* @LastEditTime: 2021-06-07 20:40:25
* @LastEditors: Please set LastEditors
* @Description: using canvas draw a rect and drag it
* @FilePath: \WebDevelopment\Demos\Canvas\DrawRectAndDrag.html
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas 绘制形状,绘图拖拽</title>
</head>
<body>
<div class="main">
<canvas id="myCanvas" width="500px" height="300px"></canvas>
<canvas id="myCanvas2" width="500px" height="300px"></canvas>
</div>
<script>
class CavansDemo {
/**
* @description: 构造函数
* @param {*} canvasId 要操作的canvasid
* @param {*} drawColor 绘制颜色
* @param {*} imageUrl 背景图片url
* @return {*}
*/
constructor(canvasId, drawColor, imageUrl) {
this.oCanvas = document.getElementById(canvasId);
this.ctx = this.oCanvas.getContext("2d");
this.imageUrl = imageUrl;
this.drawColor = drawColor;
this.oShape = null;
this.bDrawState = false; // 绘制状态默认false
this.bDragState = false; // 拖拽状态默认true
// 初始化图片对象
this<