From d5b604a2beb42f86e4e0314e06be6e71dd2651a0 Mon Sep 17 00:00:00 2001 From: fanluyan <754122931@qq.com> Date: Tue, 11 Jun 2024 14:28:21 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/home/components/drawpic.vue | 63 ++++++++++++++++++++++++--- 1 file changed, 56 insertions(+), 7 deletions(-) diff --git a/src/views/home/components/drawpic.vue b/src/views/home/components/drawpic.vue index cd8b7a2..3a22bb0 100644 --- a/src/views/home/components/drawpic.vue +++ b/src/views/home/components/drawpic.vue @@ -163,7 +163,7 @@ export default { if (isProduction) { // 使用服务器IP或域名作为图片地址 this.hostName = window.location.origin; - console.log(this.hostName) + console.log(this.hostName); console.log("aaaaaaaaaaaa"); } else { // 使用代理的 target 作为图片地址（开发环境） @@ -184,6 +184,7 @@ export default { .then((res) => { console.log(res); this.markOptions = res.data; + this.typeMap = res.data; }) .catch((err) => {}); }, @@ -429,6 +430,44 @@ export default { }, // 画初始数据 drawOldRect() { + var colors = { + 0: "rgb(255, 0, 0)", // 挖掘机 - 红色 + 1: "rgb(0, 128, 0)", // 塔吊 - 深绿色 + 2: "rgb(0, 0, 255)", // 吊车 - 蓝色 + 3: "rgb(255, 165, 0)", // 水泥泵车 - 橙色 + 4: "rgb(255, 0, 255)", // 山火 - 紫色 + 5: "rgb(0, 0, 128)", // 烟雾 - 灰色 + 6: "rgb(0, 255, 255)", // 推土机 - 青色 + 7: "rgb(173, 216, 230)", // 翻斗车 - 浅蓝色 + 8: "rgb(255, 128, 0)", // 异物 - 橙色（与水泥泵车不同） + 9: "rgb(220, 220, 220)", // 防尘网 - 浅灰色 + 10: "rgb(128, 0, 128)", // 压路机 - 紫色（与山火不同） + 11: "rgb(255, 255, 0)", // 搅拌车 - 黄色 + 12: "rgb(100, 149, 237)", // 桩机 - 淡蓝色 + 13: "rgb(255, 192, 203)", // 围挡 - 浅粉色 + 14: "rgb(128, 128, 0)", // 水马 - 黄绿色 + 15: "rgb(240, 128, 128)", // 安全帽 - 浅红色 + 16: "rgb(255, 69, 0)", // 井盖缺失 - 橙色（与翻斗车、水泥泵车不同） + }; + var bgcolors = { + 0: "rgb(255, 0, 0,0.2)", // 挖掘机 - 红色 + 1: "rgb(0, 128, 0,0.2)", // 塔吊 - 深绿色 + 2: "rgb(0, 0, 255,0.2)", // 吊车 - 蓝色 + 3: "rgb(255, 165, 0,0.2)", // 水泥泵车 - 橙色 + 4: "rgb(255, 0, 255,0.2)", // 山火 - 紫色 + 5: "rgb(0, 0, 128,0.2)", // 烟雾 - 灰色 + 6: "rgb(0, 255, 255,0.2)", // 推土机 - 青色 + 7: "rgb(173, 216, 230,0.2)", // 翻斗车 - 浅蓝色 + 8: "rgb(255, 128, 0,0.2)", // 异物 - 橙色（与水泥泵车不同） + 9: "rgb(220, 220, 220,0.2)", // 防尘网 - 浅灰色 + 10: "rgb(128, 0, 128,0.2)", // 压路机 - 紫色（与山火不同） + 11: "rgb(255, 255, 0,0.2)", // 搅拌车 - 黄色 + 12: "rgb(100, 149, 237,0.2)", // 桩机 - 淡蓝色 + 13: "rgb(255, 192, 203,0.2)", // 围挡 - 浅粉色 + 14: "rgb(128, 128, 0,0.2)", // 水马 - 黄绿色 + 15: "rgb(240, 128, 128,0.2)", // 安全帽 - 浅红色 + 16: "rgb(255, 69, 0,0.2)", // 井盖缺失 - 橙色（与翻斗车、水泥泵车不同） + }; let canvasDom = document.getElementById("canvasDom"); let ctx2d = canvasDom.getContext("2d"); const canvasHeight = canvasDom.width; @@ -439,9 +478,18 @@ export default { if (this.recArrs[i].w > 2 && this.recArrs[i].h > 2) { ctx2d.beginPath(); ctx2d.lineWidth = 2; // 矩形框的线条宽度 - ctx2d.strokeStyle = "rgb(255, 0, 0)"; // 矩形框的线条颜色 - // 设置填充样式 - ctx2d.fillStyle = "rgba(22, 158, 140, 0.4)"; // 蓝色，半透明 + + // 根据type设置颜色 + var typeColor = colors[this.recArrs[i].type] || "rgb(255, 0, 0)"; + var bgcolors = + bgcolors[this.recArrs[i].type] || "rgba(22, 158, 140, 0.2)"; + console.log(typeColor); + ctx2d.strokeStyle = typeColor; // 矩形框的线条颜色 + ctx2d.fillStyle = bgcolors; // 矩形框的填充颜色（与线条颜色相同） + + // ctx2d.strokeStyle = "rgb(255, 0, 0)"; // 矩形框的线条颜色 + // // 设置填充样式 + // ctx2d.fillStyle = "rgba(22, 158, 140, 0.4)"; // 蓝色，半透明 ctx2d.strokeRect( this.recArrs[i].x, @@ -457,9 +505,10 @@ export default { ); // 填充矩形 // 如果有文本信息，填充文本信息 if (this.recArrs[i].text) { - ctx2d.font = "100 18px 微软雅黑"; + ctx2d.font = "100 13px 微软雅黑"; ctx2d.lineWidth = 1; - ctx2d.strokeStyle = "rgb(255,0,0)"; + //ctx2d.strokeStyle = "rgb(255,0,0)"; + ctx2d.strokeStyle = colors[this.recArrs[i].type] || "rgb(255,0,0)"; ctx2d.strokeText( this.recArrs[i].text, this.recArrs[i].x + @@ -878,7 +927,7 @@ export default { img { position: absolute; max-width: 100%; - max-height: calc(100% - 10px); + // max-height: calc(100% - 10px); cursor: move; -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/