canvas实现图片标注，绘制区域

使用canvas绘制通过多边形标注区域

AI视频项目中需要分析图片，需要前台绘制区域，后端获取坐标然后识别图像，通过canvas

获取点然后连线绘图

 HEML代码段

   <div class="areaDrawing"><img src="@/assets/images/snapPhotos.png" /><canvas ref="canvas" style="position: absolute; top: 0; left: 0;" :width="canvasWidth":height="canvasHeight"></canvas></div>

 CSS代码段

.areaDrawing {position: relative;width: 400px; // 绘图区域宽度height: 300px; // 绘图区域高度img {position: absolute;top: 0;left: 0;height: 100%;width: 100%;}
}

 script代码段

<script>
// 脚本开始
export default {data() {return {canvasWidth: 400, // 画布的宽度canvasHeight: 300, // 画布的高度imageSrc: 'your_image_url_here', // 图像的URL地址context: null, // 画布上下文points: [], // 用于存储点的数组isDragging: false, // 是否正在拖拽draggingIndex: -1, // 当前拖拽的点的索引Drawing: false,//控制绘制};},methods: {// 处理点击事件，用于添加新点handleCanvasClick(event) {console.log(this.points.length, 'this.points.length');// 检查是否开启绘制if (!this.Drawing || this.points.length >= 4) {return;}// 获取点击点的坐标const rect = this.$refs.canvas.getBoundingClientRect();const x = event.clientX - rect.left;const y = event.clientY - rect.top;// 检查是否有重复点const isDuplicate = this.points.some(point => {return Math.abs(point.x - x) < 5 && Math.abs(point.y - y) < 5;});// 如果没有重复点，则添加新点并重新绘制if (!isDuplicate) {this.points.push({ x, y });this.redraw();}// 如果点的数量大于等于4个，则绘制多边形if (this.points.length >= 4) {this.drawPolygon(this.points);}},// 处理鼠标按下事件handleMouseDown(event) {if (this.Drawing) {return}// 获取鼠标按下点的坐标const rect = this.$refs.canvas.getBoundingClientRect();const x = event.clientX - rect.left;const y = event.clientY - rect.top;// 查找当前拖拽的点的索引this.draggingIndex = this.points.findIndex(point => {return Math.abs(point.x - x) < 5 && Math.abs(point.y - y) < 5;});// 如果存在拖拽的点，则设置拖拽状态为trueif (this.draggingIndex !== -1) {this.isDragging = true;}},// 处理鼠标移动事件handleMouseMove(event) {// 如果正在拖拽，则更新当前拖拽点的坐标并重新绘制if (this.isDragging) {const rect = this.$refs.canvas.getBoundingClientRect();const x = event.clientX - rect.left;const y = event.clientY - rect.top;this.points[this.draggingIndex].x = x;this.points[this.draggingIndex].y = y;this.redraw();}},// 处理鼠标释放事件handleMouseUp() {// 重置拖拽状态和拖拽点的索引this.isDragging = false;this.draggingIndex = -1;},// 绘制点drawPoint(x, y) {this.context.beginPath();this.context.arc(x, y, 5, 0, 2 * Math.PI, false);this.context.fillStyle = 'blue';this.context.fill();this.context.lineWidth = 1;this.context.strokeStyle = 'blue';this.context.stroke();},// 重新绘制画布redraw() {// 清空画布this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);// 绘制多边形this.drawPolygon(this.points);// 绘制所有点，并连接相邻点this.points.forEach((point, index) => {this.drawPoint(point.x, point.y);if (index > 0) {this.context.beginPath();this.context.moveTo(this.points[index - 1].x, this.points[index - 1].y);this.context.lineTo(point.x, point.y);this.context.strokeStyle = 'blue';this.context.lineWidth = 1;this.context.stroke();}});// 连接第一个点和最后一个点，形成闭合的多边形if (this.points.length > 3) {this.context.beginPath();this.context.moveTo(this.points[this.points.length - 1].x, this.points[this.points.length - 1].y);this.context.lineTo(this.points[0].x, this.points[0].y);this.context.strokeStyle = 'blue';this.context.lineWidth = 1;this.context.stroke();}},// 绘制多边形drawPolygon(points) {if (points.length >= 2) {this.context.beginPath();this.context.moveTo(points[0].x, points[0].y);for (let i = 1; i < points.length; i++) {this.context.lineTo(points[i].x, points[i].y);}if (points.length === 4) {this.context.closePath();this.context.strokeStyle = 'red';this.context.lineWidth = 2;this.context.stroke();}}},// 动画方法，用于拖拽时重新绘制画布animate() {if (this.isDragging) {this.redraw();requestAnimationFrame(this.animate);}},//开始绘制handleDrawing() {this.Drawing = true;},//绘制微调resetDrawing() {this.Drawing = false;},//清除绘制clearDrawing() {this.points.length = 0;this.redraw()},},mounted() {// 获取画布上下文this.context = this.$refs.canvas.getContext('2d');// 添加事件监听器this.$refs.canvas.addEventListener('click', this.handleCanvasClick);this.$refs.canvas.addEventListener('mousedown', this.handleMouseDown);this.$refs.canvas.addEventListener('mousemove', this.handleMouseMove);this.$refs.canvas.addEventListener('mouseup', this.handleMouseUp);this.$refs.canvas.addEventListener('mouseleave', this.handleMouseUp);// 绑定动画方法的上下文this.animate = this.animate.bind(this);},
};
// 脚本结束
</script>