提交

src/view/easyDiffusion/components/imageEdit.vue

@@ -23,27 +23,56 @@
                 @click="select[0] = 1"
                 :class="{ dark: true, active: select[0] === 1 }"
               >
-                <el-icon><EditPen /></el-icon>
+                <svg
+                  t="1681957131845"
+                  viewBox="0 0 1024 1024"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  p-id="2773"
+                  width="16"
+                  height="16"
+                >
+                  <path
+                    d="M567.8 776.8l4.2 4.2c3.5 3.5 8.1 5.3 12.7 5.3s9.2-1.8 12.7-5.3l296.1-296.1c30.3-30.3 30.3-79.7 0-110L639.7 121c-14.7-14.7-34.2-22.8-55-22.8s-40.3 8.1-55 22.8L233.6 417.2c-3.4 3.4-5.3 7.9-5.3 12.7 0 4.8 1.9 9.3 5.3 12.7l4.2 4.2-97.3 97.3c-14.7 14.7-22.8 34.2-22.8 55s8.1 40.3 22.8 55l220 220c10.6 10.6 23.7 17.7 37.9 20.8H131.6c-9.9 0-17.9 8-17.9 17.9s8 17.9 17.9 17.9h729.9c9.9 0 17.9-8 17.9-17.9s-8-17.9-17.9-17.9h-429c14.2-3.2 27.3-10.3 37.9-20.8l97.4-97.3z m-12.7-630.4c16.3-16.3 42.9-16.3 59.2 0l253.8 253.8c7.9 7.9 12.3 18.4 12.3 29.6s-4.4 21.7-12.3 29.6L584.7 742.9l-4.2-4.2-304.6-304.6-4.2-4.2 283.4-283.5zM415.5 860.9c-11.2 0-21.7-4.4-29.6-12.3l-220-220c-7.9-7.9-12.3-18.4-12.3-29.6 0-11.2 4.4-21.7 12.3-29.6l97.3-97.3 279.2 279.2-97.3 97.3c-7.9 8-18.4 12.3-29.6 12.3z"
+                    fill="#ffffff"
+                    p-id="2774"
+                  ></path>
+                </svg>
                 橡皮擦
               </span>
             </el-col>
           </el-row>
           <el-row style="margin-top: 1em">
-            <el-col :span="12">
+            <!-- <el-col :span="12">
               <span
-                @click="select[0] = 2"
+                @click="fillColor"
                 :class="{ dark: true, active: select[0] === 2 }"
               >
-                <el-icon><EditPen /></el-icon>
+                <svg
+                  t="1681957205411"
+                  class="icon"
+                  viewBox="0 0 1024 1024"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  p-id="3923"
+                  width="16"
+                  height="16"
+                >
+                  <path
+                    d="M903.77742 538.320685a246.196888 246.196888 0 0 0-99.597831-158.9089L456.146716 130.976744 290.523355 12.914146a49.239378 49.239378 0 1 0-55.953838 80.013988l74.418604 55.953838L80.136924 465.580696a245.637349 245.637349 0 0 0 55.953838 341.877951l239.482427 170.659206a245.637349 245.637349 0 0 0 341.87795-55.953838l142.122749-199.755202a245.077811 245.077811 0 0 0 44.203532-184.088128zM160.150912 522.653611l227.732121-319.496416 245.077811 174.575975 111.907676 81.133065a147.158594 147.158594 0 0 1 55.953838 148.277671 1941.598182 1941.598182 0 0 1-327.889491 37.489072A1690.924987 1690.924987 0 0 1 133.852608 619.453751a144.920441 144.920441 0 0 1 26.298304-96.80014zM911.610958 731.361427s-163.385207 268.578423 0 292.638573c0 0 167.301976-7.273999 0-292.638573z"
+                    fill="#ffffff"
+                    p-id="3924"
+                  ></path>
+                </svg>
                 填充
               </span>
-            </el-col>
+            </el-col> -->
             <el-col :span="12">
               <span
                 @click="select[0] = 3"
                 :class="{ dark: true, active: select[0] === 3 }"
               >
-                <el-icon><EditPen /></el-icon>
+                <el-icon><Filter /></el-icon>
                 取色器
               </span>
             </el-col>
@@ -152,23 +181,23 @@
         </el-col>
         <el-col :span="12">
           <div
-            style="
-              position: relative;
-              width: 512px;
-              height: 512px;
-              margin: 0 auto;
-            "
+            :style="{
+              position: 'relative',
+              width: waith + 'px',
+              height: height + 'px',
+              margin: '0 auto',
+            }"
           >
             <canvas
               class="canvasBg"
-              :width="512"
-              :height="512"
+              :width="waith"
+              :height="height"
               ref="canvasBg"
             ></canvas>
             <canvas
               class="canvas"
-              :width="512"
-              :height="512"
+              :width="waith"
+              :height="height"
               @mousedown="mousedownFunc"
               @mousemove="drawPen"
               @mouseover="mouseover"
@@ -189,9 +218,9 @@
               margin-left: auto;
               margin-right: auto;
             "
-            @click="canvas.width = canvas.width"
+            @click="clearAll"
           >
-            <el-icon><EditPen /></el-icon>
+            <el-icon><Close /></el-icon>
             清除
           </span>
           <span
@@ -227,8 +256,8 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits, ref, onMounted } from 'vue';
-defineProps({
+import { defineProps, defineEmits, ref, onMounted, nextTick } from 'vue';
+const props = defineProps({
   file: Object,
 });
 
@@ -279,17 +308,47 @@ const canvas = ref(null);
 const canvasBg = ref(null);
 let ctx = undefined;
 let ctxBg = undefined;
-const select = ref([0, 'rgb(241, 194, 50)', 6, 1, 0]);
+const select = ref([0, 'rgb(241, 194, 50)', 48, 1, 0]);
 const emit = defineEmits(['closemain']);
 const close = () => {
   emit('closemain');
 };
 
+const waith = ref(512);
+const height = ref(512);
+const img = new Image(); // 传入图片
+
 // 线条集合
-const pathList = [];
+let pathList = [];
 // 粗细
 const width = [6, 14, 16, 24, 30, 40, 48, 64];
 
+// 填充
+// const fillColor = () => {
+//   select.value[0] = 2;
+//   ctxBg.beginPath();
+//   ctxBg.fillRect(0, 0, waith.value, height.value);
+// };
+const fillAll = () => {
+  const conf = {
+    globalAlpha: select.value[3],
+    shadowBlur: select.value[4] * 5,
+    strokeStyle: select.value[1],
+    shadowColor: select.value[1],
+    lineWidth: select.value[2],
+    lineCap: 'round',
+    lineJoin: 'round',
+    type: 'rect',
+  };
+  ctxBg.fillRect(0, 0, waith.value, height.value);
+};
+// 清除
+const clearAll = () => {
+  pathList = [];
+  canvas.value.width = waith.value;
+  canvasBg.value.width = waith.value;
+};
+
 const selectBTM = index => {
   select.value[3] = index;
 };
@@ -304,33 +363,57 @@ const colorSelect = color => {
 
 const drawPen = ele => {
   // 绘制
-  if (select.value[0] !== 0 || !mouseDown || !pathList.length) return;
-  pathList[pathList.length - 1].path.push({
+  const n = !(select.value[0] === 0 || select.value[0] === 1);
+  if (n || !mouseDown || !pathList.length) return;
+  const w = canvas.value.width;
+  canvas.value.width = w;
+  ctx.beginPath();
+  const o = pathList[pathList.length - 1] || {};
+  o.path.push({
     x: ele.offsetX,
     y: ele.offsetY,
   });
-  const len = pathList[pathList.length - 1].path.length;
-  const last = {
-    offsetX: pathList[pathList.length - 1].path[len - 1].x,
-    offsetY: pathList[pathList.length - 1].path[len - 1].y,
-  };
-  ctx.quadraticCurveTo(last.offsetX, last.offsetY, ele.offsetX, ele.offsetY);
+  ctx.lineCap = o.lineCap;
+  ctx.lineJoin = o.lineJoin;
+  ctx.shadowBlur = o.shadowBlur;
+  ctx.shadowColor = o.shadowColor;
+  ctx.strokeStyle = o.strokeStyle;
+  ctx.globalAlpha = o.globalAlpha;
+  ctx.lineWidth = o.lineWidth;
+  for (let i = 1; i < o.path.length; i++) {
+    const v = o.path[i];
+    const ov = o.path[i - 1];
+    ctx.quadraticCurveTo(ov.x, ov.y, v.x, v.y);
+  }
   ctx.stroke();
+  ctx.closePath();
 };
 
 const mousedownFunc = ele => {
   // 鼠标按下
-  if (select.value[0] !== 0) return;
+  if (select.value[0] === 3) {
+    // 取色
+    const colorList =
+      ctxBg.getImageData(0, 0, waith.value, height.value).data || [];
+    const starts = (ele.offsetY * waith.value + ele.offsetX) * 4;
+    select.value[1] =
+      'rgb(' +
+      [colorList[starts], colorList[starts + 1], colorList[starts + 2]].join(
+        ','
+      ) +
+      ')';
+    return;
+  }
+  if (!(select.value[0] === 0 || select.value[0] === 1)) return;
   mouseDown = true;
   start(ele);
 };
 
 const mouseup = () => {
   // 鼠标松开
-  if (select.value[0] !== 0) return;
-  mouseDown = false;
-  ctx.closePath();
+  if (!(select.value[0] === 0 || select.value[0] === 1)) return;
   drawBg();
+  mouseDown = false;
 };
 
 const mouseover = ele => {
@@ -341,58 +424,65 @@ const mouseover = ele => {
 const start = ele => {
   if (!mouseDown) return;
   ctx.beginPath();
-  ctx.lineCap = 'round';
-  ctx.lineJoin = 'round';
-  ctx.shadowBlur = select.value[4] / 4 + 1;
-  ctx.shadowColor = select.value[1];
-  ctx.strokeStyle = select.value[1];
-  ctx.globalAlpha = select.value[3];
-  ctx.lineWidth = select.value[2];
-  ctx.moveTo(ele.offsetX, ele.offsetY);
-  pathList.push({
+  const conf = {
     globalAlpha: select.value[3],
-    shadowBlur: select.value[4] / 4 + 1,
+    shadowBlur: select.value[4] * 5,
     strokeStyle: select.value[1],
     shadowColor: select.value[1],
     lineWidth: select.value[2],
     lineCap: 'round',
     lineJoin: 'round',
+    type: 'line',
     path: [{ x: ele.offsetX, y: ele.offsetY }],
-  });
+  };
+  if (select.value[0] === 1) {
+    // 橡皮擦  绘制白色背景线条
+    conf.shadowColor = 'rgb(255,255,255)';
+    conf.strokeStyle = 'rgb(255,255,255)';
+  }
+  ctx.lineCap = conf.lineCap;
+  ctx.lineJoin = conf.lineJoin;
+  ctx.shadowBlur = conf.shadowBlur;
+  ctx.shadowColor = conf.shadowColor;
+  ctx.strokeStyle = conf.strokeStyle;
+  ctx.globalAlpha = conf.globalAlpha;
+  ctx.lineWidth = conf.lineWidth;
+  ctx.moveTo(conf.path[0].x, conf.path[0].y);
+  pathList.push(conf);
+  ctx.closePath();
 };
 
 const mouseout = () => {
   // 鼠标移出
-  if(!mouseDown) return;
-  ctx.closePath();
+  if (!mouseDown) return;
   drawBg();
 };
 
 //将线条绘制到背景canvas上
 const drawBg = () => {
   if (!pathList.length) return;
-  const config = pathList[pathList.length - 1];
-  ctxBg.beginPath();
-  ctxBg.lineCap = config.lineCap;
-  ctxBg.lineJoin = config.lineJoin;
-  ctxBg.shadowBlur = config.shadowBlur;
-  ctxBg.shadowColor = config.shadowColor;
-  ctxBg.strokeStyle = config.strokeStyle;
-  ctxBg.globalAlpha = config.globalAlpha;
-  ctxBg.lineWidth = config.lineWidth;
-  ctxBg.moveTo(config.path[0].x, config.path[0].y);
-  for (let i = 1; i < config.path[0].length; i++) {
-    const v = config.path[0][i];
-    ctxBg.quadraticCurveTo(
-      config.path[0][i - 1].x,
-      config.path[0][i - 1].y,
-      v.x,
-      v.y
-    );
+  const wbg = canvasBg.value.width;
+  canvasBg.value.width = wbg;
+  for (let o = 0; o < pathList.length; o++) {
+    const config = pathList[o];
+    // if(config.type !== 'line') 
+    ctxBg.beginPath();
+    ctxBg.lineCap = config.lineCap;
+    ctxBg.lineJoin = config.lineJoin;
+    ctxBg.shadowBlur = config.shadowBlur;
+    ctxBg.shadowColor = config.shadowColor;
+    ctxBg.strokeStyle = config.strokeStyle;
+    ctxBg.globalAlpha = config.globalAlpha;
+    ctxBg.lineWidth = config.lineWidth;
+    ctxBg.moveTo(config.path[0].x, config.path[0].y);
+    for (let i = 1; i < config.path.length; i++) {
+      const v = config.path[i];
+      const ov = config.path[i - 1];
+      ctxBg.quadraticCurveTo(ov.x, ov.y, v.x, v.y);
+    }
+    ctxBg.stroke();
+    ctxBg.closePath();
   }
-  ctxBg.stroke();
-  console.log("---",config,ctxBg,canvasBg)
-  ctxBg.closePath();
   const w = canvas.value.width;
   canvas.value.width = w;
 };
@@ -400,6 +490,16 @@ const drawBg = () => {
 onMounted(() => {
   ctx = canvas.value.getContext('2d');
   ctxBg = canvasBg.value.getContext('2d');
+
+  if (props.file.fileResult) {
+    img.src = props.file.fileResult + '';
+    img.onload = () => {
+      height.value = (img.height * waith.value) / img.width;
+      nextTick(() => {
+        ctxBg.drawImage(img, 0, 0, waith.value, height.value);
+      });
+    };
+  }
 });
 </script>