提交

src/view/easyDiffusion/components/imageEdit.vue

@@ -350,7 +350,7 @@ const width = [6, 14, 16, 24, 30, 40, 48, 64];
 const fillAll = () => {
   const conf = {
     globalAlpha: select.value[3],
-    shadowBlur: select.value[4] * 5,
+    shadowBlur: select.value[4] * 50,
     strokeStyle: select.value[1],
     shadowColor: select.value[1],
     lineWidth: select.value[2],
@@ -360,8 +360,10 @@ const fillAll = () => {
   };
   ctxBg.lineCap = conf.lineCap;
   ctxBg.lineJoin = conf.lineJoin;
-  ctxBg.shadowBlur = conf.shadowBlur;
+  //   ctxBg.shadowBlur = conf.shadowBlur;
+  ctxBg.filter = 'blur(' + conf.shadowBlur + 'px)';
   ctxBg.shadowColor = conf.shadowColor;
+  ctxBg.shadowOffsetX = 10;
   ctxBg.fillStyle = conf.strokeStyle;
   ctxBg.globalAlpha = conf.globalAlpha;
   ctxBg.lineWidth = conf.lineWidth;
@@ -418,9 +420,11 @@ const drawPen = ele => {
   });
   ctx.lineCap = o.lineCap;
   ctx.lineJoin = o.lineJoin;
-  ctx.shadowBlur = o.shadowBlur;
+  //   ctx.shadowBlur = o.shadowBlur;
+  ctx.filter = 'blur(' + o.shadowBlur + 'px)';
   ctx.shadowColor = o.shadowColor;
   ctx.strokeStyle = o.strokeStyle;
+  ctx.fillStyle = o.strokeStyle;
   ctx.globalAlpha = o.globalAlpha;
   ctx.lineWidth = o.lineWidth;
   for (let i = 1; i < o.path.length; i++) {
@@ -465,7 +469,6 @@ const mouseover = ele => {
 
 const start = ele => {
   if (!mouseDown) return;
-  ctx.beginPath();
   const conf = {
     globalAlpha: select.value[3],
     shadowBlur: select.value[4] * 5,
@@ -475,24 +478,34 @@ const start = ele => {
     lineCap: 'round',
     lineJoin: 'round',
     type: 'line',
+    // type: select.value[4] === 0 ? 'line' : 'spray',
     path: [{ x: ele.offsetX, y: ele.offsetY }],
+    isEraser: select.value[0] === 1,
   };
   if (select.value[0] === 1) {
     // 橡皮擦  绘制白色背景线条
     conf.shadowColor = 'rgb(255,255,255)';
     conf.strokeStyle = 'rgb(255,255,255)';
+    ctx.globalCompositeOperation = 'destination-out';
   }
-  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);
   indexBase = pathList.length;
-  ctx.closePath();
+
+  ctx.beginPath();
+  if (conf.type === 'line') {
+    ctx.lineCap = conf.lineCap;
+    ctx.lineJoin = conf.lineJoin;
+    // ctx.shadowBlur = conf.shadowBlur;
+    ctx.filter = 'blur(' + conf.shadowBlur + 'px)';
+    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);
+    ctx.closePath();
+  } else {
+    ctx.filter = 'none';
+  }
 };
 
 const mouseout = () => {
@@ -521,11 +534,16 @@ const drawBg = () => {
     ctxBg.beginPath();
     ctxBg.lineCap = config.lineCap;
     ctxBg.lineJoin = config.lineJoin;
-    ctxBg.shadowBlur = config.shadowBlur;
+    // ctxBg.shadowBlur = config.shadowBlur;
+    ctxBg.filter = 'blur(' + config.shadowBlur + 'px)';
     ctxBg.shadowColor = config.shadowColor;
     ctxBg.strokeStyle = config.strokeStyle;
+    ctxBg.fillStyle = config.strokeStyle;
     ctxBg.globalAlpha = config.globalAlpha;
     ctxBg.lineWidth = config.lineWidth;
+    if (config.isEraser) {
+      ctx.globalCompositeOperation = 'destination-out';
+    }
     ctxBg.moveTo(config.path[0].x, config.path[0].y);
     for (let i = 1; i < config.path.length; i++) {
       const v = config.path[i];
@@ -542,6 +560,7 @@ const drawBg = () => {
 onMounted(() => {
   ctx = canvas.value.getContext('2d');
   ctxBg = canvasBg.value.getContext('2d');
+
   if (props.file.fileResult) {
     img.src = props.file.fileResult + '';
     img.onload = () => {

src/view/easyDiffusion/components/listItem.vue

@@ -128,7 +128,7 @@
         <div class="imagelist">
           <div class="imgbg" v-for="(v, i) in item.list" :key="'son' + i">
             <el-icon
-              @click="() => removeItem(i, index)"
+              @click="() => removeItem(index, i)"
               :size="30"
               class="close"
               ><CircleClose
@@ -156,7 +156,7 @@
               >
                 种子：{{ v.seed }}
               </div>
-              <div style="margin: 5px 0;">
+              <div style="margin: 5px 0">
                 <el-button
                   color="#202225"
                   size="small"
@@ -549,4 +549,11 @@ input {
   font-size: 14px;
   border-radius: 5px;
 }
+
 </style>
+<style scoped>
+.el-input__inner{
+    color: #ffffff!important;
+}
+</style>
+