Browse Source

fix: canvas点击地图

chenzhen2 2 years ago
parent
commit
289289dda6
1 changed files with 28 additions and 6 deletions
  1. 28 6
      src/views/mapDataNew/index.vue

+ 28 - 6
src/views/mapDataNew/index.vue

@@ -3,7 +3,14 @@
     <canvas id="myCanvas" class="canvasDom">
       <img
         :style="{ left: item.deviceArr[0].left, top: item.deviceArr[0].top }"
-        style="position: absolute; width: 20px; height: 20px; z-index: 999;left: 20px;top:20px;"
+        style="
+          position: absolute;
+          width: 20px;
+          height: 20px;
+          z-index: 999;
+          left: 20px;
+          top: 20px;
+        "
         :src="parseImgUrl('map-icon', 'device.svg')"
         alt=""
         :key="index"
@@ -92,9 +99,9 @@ export default defineComponent({
             });
             ctx.fillStyle = "#cfefef";
             ctx.fill();
-            // proxyData.drawIcon(ctx, "coffee.svg", deviceArr[0]);
-            // proxyData.drawIcon(ctx, "dev.svg", deviceArr[1]);
-            // proxyData.drawIcon(ctx, "deviceroom.svg", deviceArr[2]);
+            proxyData.drawIcon(ctx, "coffee.svg", deviceArr[0]);
+            proxyData.drawIcon(ctx, "dev.svg", deviceArr[1]);
+            proxyData.drawIcon(ctx, "deviceroom.svg", deviceArr[2]);
           } else {
             let img: any = new Image();
             img.src = require("@/assets/svg/bg_disable.png");
@@ -128,9 +135,24 @@ export default defineComponent({
           let x: any = event.clientX - canvasDom.getBoundingClientRect().left;
           let y: any = event.clientY - canvasDom.getBoundingClientRect().top;
           //   let ctx: any = canvasDom.getContext("2d");
-          proxyData.initCanvas();
+          // proxyData.initCanvas();
           console.log(event);
-          alert("点击了!");
+          // alert("点击了!");
+          proxyData.spaceList.map((item: any) => {
+            let deviceArr: any = item.deviceArr;
+            deviceArr.map((dev: any,index:any) => {
+              if (
+                x >= dev.left &&
+                x <= dev.left + 15 &&
+                y >= dev.top &&
+                y < dev.top + 15
+              ) {
+                // alert("我被点了!");
+                // console.log("我被点了!")
+                alert(`我被点了设备图标!${index}`);
+              }
+            });
+          });
         }
       },
       drawIcon(ctx: any, url: any, iconPerstion: any) {