含山建设局网站,长沙做网站咨询公司,网站页面设计报价,广告策划书模板使用canvas绘制通过多边形标注区域 AI视频项目中需要分析图片#xff0c;需要前台绘制区域#xff0c;后端获取坐标然后识别图像#xff0c;通过canvas 获取点然后连线绘图 HEML代码段 div classareaDrawingimg src/assets/images/snapPhotos…使用canvas绘制通过多边形标注区域 AI视频项目中需要分析图片需要前台绘制区域后端获取坐标然后识别图像通过canvas 获取点然后连线绘图 HEML代码段 div classareaDrawingimg src/assets/images/snapPhotos.png /canvas refcanvas styleposition: absolute; top: 0; left: 0; :widthcanvasWidth:heightcanvasHeight/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
