提交

src/view/easyDiffusion/components/imageEdit.vue

@@ -13,6 +13,7 @@
               <span
                 @click="select[0] = 0"
                 :class="{ dark: true, active: select[0] === 0 }"
+                style="border-radius: 0"
               >
                 <el-icon><EditPen /></el-icon>
                 绘制
@@ -22,6 +23,7 @@
               <span
                 @click="select[0] = 1"
                 :class="{ dark: true, active: select[0] === 1 }"
+                style="border-radius: 0"
               >
                 <svg
                   t="1681957131845"
@@ -71,6 +73,7 @@
               <span
                 @click="select[0] = 3"
                 :class="{ dark: true, active: select[0] === 3 }"
+                style="border-radius: 0"
               >
                 <el-icon><Filter /></el-icon>
                 取色器
@@ -147,34 +150,34 @@
             </div>
             <div class="rav">
               <div
-                :class="{ item: true, active: select[4] === 1 }"
+                :class="{ active: select[4] === 1 }"
                 @click="() => selectQXD(1)"
               >
-                <div class="qxd" style="filter: blur(1px)"></div>
+                <div class="qxd item" style="filter: blur(1px)"></div>
               </div>
             </div>
             <div class="rav">
               <div
-                :class="{ item: true, active: select[4] === 2 }"
+                :class="{ active: select[4] === 2 }"
                 @click="() => selectQXD(2)"
               >
-                <div class="qxd" style="filter: blur(3px)"></div>
+                <div class="qxd item" style="filter: blur(3px)"></div>
               </div>
             </div>
             <div class="rav">
               <div
-                :class="{ item: true, active: select[4] === 3 }"
+                :class="{ active: select[4] === 3 }"
                 @click="() => selectQXD(3)"
               >
-                <div class="qxd" style="filter: blur(6px)"></div>
+                <div class="qxd item" style="filter: blur(6px)"></div>
               </div>
             </div>
             <div class="rav">
               <div
-                :class="{ item: true, active: select[4] === 4 }"
+                :class="{ active: select[4] === 4 }"
                 @click="() => selectQXD(4)"
               >
-                <div class="qxd" style="filter: blur(9px)"></div>
+                <div class="qxd item" style="filter: blur(9px)"></div>
               </div>
             </div>
           </div>
@@ -350,7 +353,7 @@ const width = [6, 14, 16, 24, 30, 40, 48, 64];
 const fillAll = () => {
   const conf = {
     globalAlpha: select.value[3],
-    shadowBlur: select.value[4] * 50,
+    filter: select.value[4] * 50,
     strokeStyle: select.value[1],
     shadowColor: select.value[1],
     lineWidth: select.value[2],
@@ -358,18 +361,18 @@ const fillAll = () => {
     lineJoin: 'round',
     type: 'rect',
   };
+  ctxBg.beginPath();
   ctxBg.lineCap = conf.lineCap;
   ctxBg.lineJoin = conf.lineJoin;
-  //   ctxBg.shadowBlur = conf.shadowBlur;
-  ctxBg.filter = 'blur(' + conf.shadowBlur + 'px)';
+  conf.filter && (ctxBg.filter = 'blur(' + conf.filter + 'px)');
   ctxBg.shadowColor = conf.shadowColor;
-  ctxBg.shadowOffsetX = 10;
   ctxBg.fillStyle = conf.strokeStyle;
   ctxBg.globalAlpha = conf.globalAlpha;
-  ctxBg.lineWidth = conf.lineWidth;
+  console.log('填充',conf,waith.value, height.value);
   pathList.push(conf);
   indexBase = pathList.length;
   ctxBg.fillRect(0, 0, waith.value, height.value);
+  ctxBg.closePath();
 };
 
 // 上一步下一步
@@ -420,8 +423,7 @@ const drawPen = ele => {
   });
   ctx.lineCap = o.lineCap;
   ctx.lineJoin = o.lineJoin;
-  //   ctx.shadowBlur = o.shadowBlur;
-  ctx.filter = 'blur(' + o.shadowBlur + 'px)';
+  ctx.filter = 'blur(' + o.filter + 'px)';
   ctx.shadowColor = o.shadowColor;
   ctx.strokeStyle = o.strokeStyle;
   ctx.fillStyle = o.strokeStyle;
@@ -457,6 +459,7 @@ const mousedownFunc = ele => {
 
 const mouseup = () => {
   // 鼠标松开
+  if (!mouseDown) return;
   if (!(select.value[0] === 0 || select.value[0] === 1)) return;
   drawBg();
   mouseDown = false;
@@ -471,7 +474,7 @@ const start = ele => {
   if (!mouseDown) return;
   const conf = {
     globalAlpha: select.value[3],
-    shadowBlur: select.value[4] * 5,
+    filter: select.value[4] * 5,
     strokeStyle: select.value[1],
     shadowColor: select.value[1],
     lineWidth: select.value[2],
@@ -495,8 +498,7 @@ const start = ele => {
   if (conf.type === 'line') {
     ctx.lineCap = conf.lineCap;
     ctx.lineJoin = conf.lineJoin;
-    // ctx.shadowBlur = conf.shadowBlur;
-    ctx.filter = 'blur(' + conf.shadowBlur + 'px)';
+    ctx.filter = 'blur(' + conf.filter + 'px)';
     ctx.shadowColor = conf.shadowColor;
     ctx.strokeStyle = conf.strokeStyle;
     ctx.globalAlpha = conf.globalAlpha;
@@ -526,16 +528,23 @@ const drawBg = () => {
 
   for (let o = 0; o < end; o++) {
     const config = pathList[o];
+    console.log(config)
     if (config.type == 'rect') {
+      ctxBg.beginPath();
       ctxBg.fillStyle = config.strokeStyle;
+      ctxBg.lineCap = config.lineCap;
+      ctxBg.lineJoin = config.lineJoin;
+      ctxBg.filter = 'blur(' + config.filter + 'px)';
+      ctxBg.shadowColor = config.shadowColor;
+      ctxBg.globalAlpha = config.globalAlpha;
       ctxBg.fillRect(0, 0, waith.value, height.value);
+      ctxBg.closePath();
     }
     if (config.type !== 'line') continue;
     ctxBg.beginPath();
     ctxBg.lineCap = config.lineCap;
     ctxBg.lineJoin = config.lineJoin;
-    // ctxBg.shadowBlur = config.shadowBlur;
-    ctxBg.filter = 'blur(' + config.shadowBlur + 'px)';
+    ctxBg.filter = 'blur(' + config.filter + 'px)';
     ctxBg.shadowColor = config.shadowColor;
     ctxBg.strokeStyle = config.strokeStyle;
     ctxBg.fillStyle = config.strokeStyle;
@@ -715,6 +724,8 @@ h4:first-child {
 }
 .active {
   border: 1px solid #3584e4;
+  display: inline-block;
+  border-radius: 50%;
 }
 
 .canvas {

src/view/easyDiffusion/components/listItem.vue

@@ -275,7 +275,6 @@ const props = defineProps({
   downlist: Array,
 });
 const change = e => {
-  console.log(e.target.value);
   if (e.target.value > 200) {
     jindu.value = 200;
     return;
@@ -294,7 +293,6 @@ const zipconfig = ref({
 });
 
 const setConfig = item => {
-  console.log(item);
   emit('setconfig', item);
 };
 

src/view/easyDiffusion/index.vue

@@ -5,7 +5,7 @@
         id="logo_img"
         :src="config.base.easyDiffusion + '/media/images/icon-512x512.png'"
       />
-      <span style="vertical-align: middle"> Easy Diffusion </span>
+      <span style="vertical-align: middle">GPT绘图</span>
     </h1>
     <el-row class="body">
       <el-col :span="8">
@@ -447,7 +447,7 @@ const numlist = [
   128, 192, 256, 320, 384, 448, 512, 576, 640, 704, 768, 832, 896, 960, 1024,
   1280, 1536, 1792, 2048,
 ];
-document.title = ' Easy Diffusion ';
+document.title = 'GPT绘图';
 getPaintingStyle({}).then(r => {
   list.value = r || [];
 });
@@ -508,7 +508,6 @@ const ajax = () => {
           if (ajaxList[0].imageNum - ajaxList[0].status <= 0) {
             ajaxList.shift();
             downlist.value[0].list = l;
-            console.log(downlist);
             l = [];
             loading.value = false;
             // 当前图已经生成结束
@@ -587,7 +586,6 @@ const rangechidu = e => {
 };
 
 const makeimg = item => {
-  console.log(item);
   const active_tags = [];
   loading.value = true;
   for (const key in item.tags || {}) {