1

src/views/group/picLibrary/demo/index.vue

@@ -7,13 +7,11 @@
 </template>
 
 <script setup>
-// import { ElMessage, ElMessageBox } from "element-plus";
-
-// const { proxy } = getCurrentInstance();
 const imgs = [
   { name: "p1", url: "/img/miao.png" },
   { name: "p2", url: "/img/miao2.png" },
-  { name: "p3", url: "/img/miao3.png" },
+  // { name: "p3", url: "/img/miao3.png" },
+  { name: "p3", url: "https://os.winfaster.cn/sd/prod/2023/11/14/9481247b7e7145e7bbc38f0823a00fd5.png" },
 ];
 const canvas = ref(null);
 const ctx = ref("");
@@ -21,24 +19,12 @@ const width = ref(500);
 const height = ref(500);
 /** 图片数据 名字 位置等 */
 const imagesData = ref([]);
-/** 选择的颜色 */
-const selectColor = ref("");
-const getColor = (e) => {
-  // 获取当前颜色
-  let pixel = ctx.value.getImageData(e.offsetX - canvas.value.offsetLeft, e.offsetY - canvas.value.offsetTop, 1, 1);
-  let data = pixel.data;
-  const rgba = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3] / 255})`;
-  selectColor.value = rgba;
-};
 /** 图片拖拽 */
 const init = () => {
   ctx.value = canvas.value.getContext("2d");
-
-  canvas.value?.addEventListener("mousemove", getColor, false);
   /** 当前点击的信息 */
   let clickCoordinate = { x: 0, y: 0 };
   let target = ref("");
-
   imgs.forEach((item) => {
     let img = new Image();
     img.src = item.url;
@@ -48,12 +34,16 @@ const init = () => {
       const h = (w / img.width) * img.height;
       const x = Math.random() * (width.value - w);
       const y = Math.random() * (height.value - h);
-      const obj = { img, name, x, y, w, h };
+      const selectStatus = false;
+      const obj = { img, name, x, y, w, h, selectStatus };
       imagesData.value.push(obj);
       drawByObj(obj);
     };
   });
   function drawByObj(obj) {
+    if (obj.selectStatus) {
+      drawGuideByObj(obj);
+    }
     ctx.value.drawImage(obj.img, obj.x, obj.y, obj.w, obj.h);
   }
   function drawGuideByObj(obj) {
@@ -63,19 +53,14 @@ const init = () => {
     ctx.value.rect(obj.x, obj.y, obj.w, obj.h);
     ctx.value.stroke();
   }
-
   canvas.value.addEventListener("mousedown", mousedownFn, false);
   function mousedownFn(e) {
     clickCoordinate.x = e.offsetX - canvas.value.offsetLeft;
     clickCoordinate.y = e.offsetY - canvas.value.offsetTop;
-    console.log(e.offsetX, e.offsetY, canvas.value.offsetLeft, canvas.value.offsetTop, canvas.value, "qqqq");
-    console.log("初次点击位置：" + clickCoordinate.x + "--" + clickCoordinate.y);
     checkElement();
     if (target.value == undefined) return;
     canvas.value.addEventListener("mousemove", mousemoveFn, false);
     canvas.value.addEventListener("mouseup", mouseupFn, false);
-    canvas.value.removeEventListener("mousemove", getColor);
-    selectColor.value = "";
   }
   /** 判断点击的是哪个 */
   function checkElement() {
@@ -84,6 +69,14 @@ const init = () => {
       if (ctx.value.isPointInPath(clickCoordinate.x, clickCoordinate.y)) {
         console.log("点击的元素是：", item.name);
         target.value = index;
+        item.selectStatus = true;
+        return;
+      } else {
+        item.selectStatus = false;
+        // 清空画布
+        ctx.value.clearRect(0, 0, width.value, height.value);
+        // 清空画布以后重新绘制
+        imagesData.value.forEach((i) => drawByObj(i));
       }
     });
   }
@@ -94,7 +87,6 @@ const init = () => {
     // 计算移动元素的坐标
     imagesData.value[target.value].x = e.offsetX - canvas.value.offsetLeft - sx;
     imagesData.value[target.value].y = e.offsetY - canvas.value.offsetTop - sy;
-
     // 重新赋值点击位置
     clickCoordinate.x = e.offsetX - canvas.value.offsetLeft;
     clickCoordinate.y = e.offsetY - canvas.value.offsetTop;
@@ -104,14 +96,10 @@ const init = () => {
     imagesData.value.forEach((i) => drawByObj(i));
   }
   function mouseupFn(e) {
-    console.log(e.offsetX + "----" + e.offsetY, "111");
     // 鼠标抬起以后移除事件
     canvas.value.removeEventListener("mousemove", mousemoveFn, false);
     canvas.value.removeEventListener("mouseup", mouseupFn, false);
-
     target.value = undefined;
-
-    canvas.value.addEventListener("mousemove", getColor, false);
   }
 };
 onMounted(() => {