canvas-demo

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

@@ -25,7 +25,7 @@ const imagesData = ref([]);
 const selectColor = ref("");
 const getColor = (e) => {
   // 获取当前颜色
-  let pixel = ctx.value.getImageData(e.pageX - canvas.value.offsetLeft, e.pageY - canvas.value.offsetTop, 1, 1);
+  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;
@@ -37,7 +37,7 @@ const init = () => {
   canvas.value?.addEventListener("mousemove", getColor, false);
   /** 当前点击的信息 */
   let clickCoordinate = { x: 0, y: 0 };
-  let target = ref('');
+  let target = ref("");
 
   imgs.forEach((item) => {
     let img = new Image();
@@ -49,7 +49,6 @@ const init = () => {
       const x = Math.random() * (width.value - w);
       const y = Math.random() * (height.value - h);
       const obj = { img, name, x, y, w, h };
-      console.log(imagesData.value);
       imagesData.value.push(obj);
       drawByObj(obj);
     };
@@ -67,8 +66,9 @@ const init = () => {
 
   canvas.value.addEventListener("mousedown", mousedownFn, false);
   function mousedownFn(e) {
-    clickCoordinate.x = e.pageX - canvas.value.offsetLeft;
-    clickCoordinate.y = e.pageY - canvas.value.offsetTop;
+    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;
@@ -82,103 +82,39 @@ const init = () => {
     imagesData.value.forEach((item, index) => {
       drawGuideByObj(item);
       if (ctx.value.isPointInPath(clickCoordinate.x, clickCoordinate.y)) {
-        // console.log("点击的元素是：", item.name);
+        console.log("点击的元素是：", item.name);
         target.value = index;
       }
     });
   }
   function mousemoveFn(e) {
-    console.log(imagesData.value,target.value,'222');
     // 计算点击位置和图片原点位置的差
     let sx = clickCoordinate.x - imagesData.value[target.value].x;
     let sy = clickCoordinate.y - imagesData.value[target.value].y;
     // 计算移动元素的坐标
-    imagesData.value[target.value].x = e.pageX - canvas.value.offsetLeft - sx;
-    imagesData.value[target.value].y = e.pageY - canvas.value.offsetTop - sy;
-    console.log(imagesData.value[target.value],'222');
+    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.pageX - canvas.value.offsetLeft;
-    clickCoordinate.y = e.pageY - canvas.value.offsetTop;
+    clickCoordinate.x = e.offsetX - canvas.value.offsetLeft;
+    clickCoordinate.y = e.offsetY - canvas.value.offsetTop;
     // 清空画布
     ctx.value.clearRect(0, 0, width.value, height.value);
     // 清空画布以后重新绘制
     imagesData.value.forEach((i) => drawByObj(i));
   }
   function mouseupFn(e) {
-    console.log(e.pageX + "----" + e.pageY,'111');
+    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);
   }
 };
-const imgOnPage = (ref < HTMLImageElement) | (null > null);
-// const save = () => {
-//   // 将canvas转换成base64的url
-//   let url = canvas.value.toDataURL("image/png");
-//   // console.log(url);
-
-//   // 把Canvas 转化为图片
-//   imgOnPage.value.src = url;
-
-//   // 将base64转换为文件对象
-//   let arr = url.split(",");
-//   let mime = arr[0].match(/:(.*?);/)![1];
-//   // console.log(arr);
-//   // console.log(mime);
-//   // console.log(arr);
-
-//   let binaryString = window.atob(arr[1]);
-//   let binaryLen = binaryString.length;
-//   let bytes = new Uint8Array(binaryLen);
-//   for (let i = 0; i < bytes.length; i++) {
-//     bytes[i] = binaryString.charCodeAt(i);
-//   }
-//   console.log(bytes);
-//   // saveByteArray(bytes);
-//   let file = new File([bytes], "filename", { type: mime });
-//   // 虚拟点击
-//   const link = document.createElement("a");
-//   link.download = file.name;
-//   let href = URL.createObjectURL(file);
-//   link.href = href;
-//   document.body.appendChild(link);
-//   link.click();
-//   document.body.removeChild(link);
-//   URL.revokeObjectURL(href);
-// };
-// const filter1 = () => {
-//   const imgData = ctx.value.getImageData(0, 0, width.value, height.value);
-//   const data = imgData.data;
-//   for (let i = 0; i < data.length; i += 4) {
-//     let avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
-//     data[i] = avg; // red
-//     data[i + 1] = avg; // green
-//     data[i + 2] = avg; // blue
-//   }
-//   ctx.value.putImageData(imgData, 0, 0);
-// };
-// const filter2 = () => {
-//   const imgData = ctx.value.getImageData(0, 0, width.value, height.value);
-//   const data = imgData.data;
-//   for (let i = 0; i < data.length; i += 4) {
-//     data[i] = 255 - data[i]; // red
-//     data[i + 1] = 255 - data[i + 1]; // green
-//     data[i + 2] = 255 - data[i + 2]; // blue
-//   }
-//   ctx.value.putImageData(imgData, 0, 0);
-// };
-// const backToOriginal = () => {
-//   imagesData.value.forEach(obj => ctx.value.drawImage(obj.img, obj.x, obj.y, obj.w, obj.h));
-// };
-
 onMounted(() => {
-  // init1();
-  // init2();
   init();
 });
 </script>