canvas优化

src/views/modelLibrary/components/canvasVehicleConfiguration.vue

@@ -66,28 +66,35 @@ export default {
     methods: {
         draw(data) {
             if (data.x === "" || data.y === "" || data.h === "") return;
-            this.imgIcon.src = this.sensorSrc;
-
-            let rate = this.rate;
-            // 摄像头从自己左上角的原点开始绘制，需要移到自己的中心点
-            let x = +data.x * rate;
-            let y = +data.y * rate;
-            let h1 = 90 - +data.h / 2;
-            let h2 = 90 + +data.h / 2;
 
-            this.ctx.clearRect(-250, -40, 500, 1000);
-            // this.ctx.drawImage(this.imgIcon, x - 6, y - 6, 20.5, 14.5);
-            this.ctx.drawImage(this.imgIcon, x - 6, y - 6, 20, 20);
-            this.ctx.beginPath();
-
-            //定义起点
-            this.ctx.moveTo(x, y);
-            //以起点为圆心，画一个半径为100的圆弧
-            this.ctx.arc(x, y, 100, (h1 * Math.PI) / 180, (h2 * Math.PI) / 180);
-            // this.ctx.arc(0, 0, 100, (30 * Math.PI) / 180, (60 * Math.PI) / 180);
-            this.ctx.closePath();
-            this.ctx.fillStyle = "rgba(252,222,147,0.54)";
-            this.ctx.fill();
+            this.imgIcon.src = this.sensorSrc;
+            this.imgIcon.onload = () => {
+                let rate = this.rate;
+                // 摄像头从自己左上角的原点开始绘制，需要移到自己的中心点
+                let x = +data.x * rate;
+                let y = +data.y * rate;
+                let h1 = 90 - +data.h / 2;
+                let h2 = 90 + +data.h / 2;
+
+                this.ctx.clearRect(-250, -40, 500, 1000);
+                // this.ctx.drawImage(this.imgIcon, x - 6, y - 6, 20.5, 14.5);
+                this.ctx.drawImage(this.imgIcon, x - 24, y - 20, 40, 40);
+                this.ctx.beginPath();
+
+                //定义起点
+                this.ctx.moveTo(x, y);
+                //以起点为圆心，画一个半径为100的圆弧
+                this.ctx.arc(
+                    x,
+                    y,
+                    400,
+                    (h1 * Math.PI) / 180,
+                    (h2 * Math.PI) / 180
+                );
+                this.ctx.closePath();
+                this.ctx.fillStyle = "rgba(252,222,147,0.54)";
+                this.ctx.fill();
+            };
         },
         clear() {
             this.ctx.clearRect(-250, -40, 500, 1000);

src/views/workManagement/components/canvasProjectInfo.vue

@@ -21,7 +21,10 @@ export default {
             ctx: null,
             ctxBg: null,
             imgBg: null,
-            imgIcon: null,
+            imgIcon1: null,
+            imgIcon2: null,
+            imgIcon3: null,
+            imgIcon5: null,
             rate: 70, // 换算比例
         };
     },
@@ -49,7 +52,7 @@ export default {
     },
 
     methods: {
-        draw(data, src) {
+        draw(data, type) {
             let rate = this.rate;
 
             data.x = data.sensorX;
@@ -57,7 +60,7 @@ export default {
             data.h = data.sensorH;
             if (data.x === "" || data.y === "" || data.h === "") return;
 
-            this.imgIcon.src = src;
+            // this.imgIcon.src = src;
 
             let x = +data.x * rate;
             let y = +data.y * rate;
@@ -65,13 +68,24 @@ export default {
             let h2 = 90 + +data.h / 2;
 
             // this.ctx.drawImage(this.imgIcon, x - 6, y - 6, 20.5, 14.5);
-            this.ctx.drawImage(this.imgIcon, x - 6, y - 6, 20, 20);
+            let icon = null;
+            if (type === 1) {
+                icon = this.imgIcon1;
+            } else if (type === 2) {
+                icon = this.imgIcon2;
+            } else if (type === 3) {
+                icon = this.imgIcon3;
+            } else if (type === 5) {
+                icon = this.imgIcon5;
+            }
+
+            this.ctx.drawImage(icon, x - 6, y - 6, 20, 20);
             this.ctx.beginPath();
 
             //定义起点
             this.ctx.moveTo(x, y);
             //以起点为圆心，画一个半径为100的圆弧
-            this.ctx.arc(x, y, 100, (h1 * Math.PI) / 180, (h2 * Math.PI) / 180);
+            this.ctx.arc(x, y, 200, (h1 * Math.PI) / 180, (h2 * Math.PI) / 180);
             this.ctx.closePath();
             this.ctx.fillStyle = "rgba(252,222,147,0.54)";
             this.ctx.fill();
@@ -100,24 +114,35 @@ export default {
             this.imgBg.onload = () => {
                 this.ctxBg.drawImage(this.imgBg, 0, 0, 1000, 500);
 
-                this.imgIcon = new Image();
-                this.imgIcon.src = this.sensorSrc1;
-
-                this.imgIcon.onload = () => {
+                this.imgIcon1 = new Image();
+                this.imgIcon1.src = this.sensorSrc1;
+                this.imgIcon1.onload = () => {
                     this.configList.camera.forEach((i) => {
-                        this.draw(i, this.sensorSrc1);
+                        this.draw(i, 1);
                     });
+                };
 
+                this.imgIcon2 = new Image();
+                this.imgIcon2.src = this.sensorSrc2;
+                this.imgIcon2.onload = () => {
                     this.configList.ogt.forEach((i) => {
-                        this.draw(i, this.sensorSrc2);
+                        this.draw(i, 2);
                     });
+                };
 
+                this.imgIcon3 = new Image();
+                this.imgIcon3.src = this.sensorSrc3;
+                this.imgIcon3.onload = () => {
                     this.configList.lidar.forEach((i) => {
-                        this.draw(i, this.sensorSrc3);
+                        this.draw(i, 3);
                     });
+                };
 
+                this.imgIcon5 = new Image();
+                this.imgIcon5.src = this.sensorSrc5;
+                this.imgIcon5.onload = () => {
                     this.configList.gps.forEach((i) => {
-                        this.draw(i, this.sensorSrc5);
+                        this.draw(i, 5);
                     });
                 };
             };