updated 融合模板等地方优化

mumuy · May 26, 2024 · 060dc1d · 060dc1d
1 parent cea5308
commit 060dc1d
Show file tree

Hide file tree

Showing 13 changed files with 166 additions and 152 deletions.
diff --git a/dist/widget-qrcode.min.js b/dist/widget-qrcode.min.js
diff --git a/src/module/method/DrawUtil.js b/src/module/method/DrawUtil.js
@@ -91,18 +91,28 @@ export default function(context,data,options) {
                 }
             }
         },
-        // 前景图片笔刷
-        getForegroundImageBrush:function(image){
+        // 图片笔刷
+        getImageBrush:function(image,fill='default'){
             let brush;
             if(image.width>context.canvas.width||image.height>context.canvas.height){
                 let $canvas = document.createElement('canvas');
                 let contextTemp = $canvas.getContext('2d');
-                if(image.width>context.canvas.width){
-                    $canvas.width = context.canvas.width;
-                    $canvas.height = image.height/image.width*context.canvas.width;
+                if(image.width>context.canvas.width&&image.height>context.canvas.height){
+                    if(image.width/image.height<context.canvas.width/context.canvas.height){
+                        $canvas.width = context.canvas.width;
+                        $canvas.height = image.height/image.width*context.canvas.width;
+                    }else{
+                        $canvas.width = image.width/image.height*context.canvas.height;
+                        $canvas.height = context.canvas.height;
+                    }
                 }else{
-                    $canvas.width = image.width/image.height*context.canvas.height;
-                    $canvas.height = context.canvas.height;
+                    if(image.width>context.canvas.width){
+                        $canvas.width = context.canvas.width;
+                        $canvas.height = image.height/image.width*context.canvas.width;
+                    }else{
+                        $canvas.width = image.width/image.height*context.canvas.height;
+                        $canvas.height = context.canvas.height;
+                    }
                 }
                 contextTemp.drawImage(image,0,0,$canvas.width,$canvas.height);
                 brush = context.createPattern($canvas,'repeat');

diff --git a/src/module/template/bar.js b/src/module/template/bar.js
@@ -18,19 +18,19 @@ export default function(context,data,options){
         let backgroundColor = options.backgroundColor||'#ffffff';
         let foregroundColor = options.foregroundColor||'#000000';
         let colors = foregroundColor.split(',');
-        let color = colors[0];
+        let foregroundImage = colors[0];
         if(!options.foregroundColor&&resources.foregroundImage){
-            color = api.getForegroundImageBrush(resources.foregroundImage);
+            foregroundImage = api.getImageBrush(resources.foregroundImage);
         }
-        let innerColor = options.innerColor||colors?.[1]||color;
-        let outerColor = options.outerColor||color;
-        context.save();
+        let innerColor = options.innerColor||colors?.[1]||foregroundImage;
+        let outerColor = options.outerColor||foregroundImage;
+        let backgroundImage = backgroundColor;
         if(!options.backgroundColor&&resources.backgroundImage){
-            context.drawImage(resources.backgroundImage,0,0,context.canvas.width,context.canvas.height);
-        }else{
-            context.fillStyle = backgroundColor;
-            context.fillRect(0,0,context.canvas.width,context.canvas.height);
+            backgroundImage = context.drawImage(resources.backgroundImage,0,0,context.canvas.width,context.canvas.height);
         }
+        context.save();
+        context.fillStyle = backgroundImage;
+        context.fillRect(0,0,context.canvas.width,context.canvas.height);
         context.restore();
         context.save();
         context.translate(x+0.5*pxWidth,y+0.5*pxWidth);
@@ -52,11 +52,11 @@ export default function(context,data,options){
                     }else if(api.isPositionPoint(i,j)==2){
                         context.fillStyle = outerColor;
                     }else{
-                        let color = colors[(i+j)%colors.length];
+                        let fillColor = colors[(i+j)%colors.length];
                         if(!options.foregroundColor&&resources.foregroundImage){
-                            color = context.createPattern(resources.foregroundImage,'repeat');
+                            fillColor = foregroundImage;
                         }
-                        context.fillStyle = color;
+                        context.fillStyle = fillColor;
                     }
                     if(api.isPositionPoint(i,j)){
                         context.beginPath();

diff --git a/src/module/template/default.js b/src/module/template/default.js
@@ -18,27 +18,27 @@ export default function(context,data,options){
         let backgroundColor = options.backgroundColor||'#ffffff';
         let foregroundColor = options.foregroundColor||'#000000';
         let colors = foregroundColor.split(',');
-        let color = colors[0];
+        let foregroundImage = colors[0];
         if(!options.foregroundColor&&resources.foregroundImage){
-            color = api.getForegroundImageBrush(resources.foregroundImage);
+            foregroundImage = api.getImageBrush(resources.foregroundImage);
         }
         if(colors.length>1){
             let gradient = context.createLinearGradient(0,0,context.canvas.width,context.canvas.height);
             let length = colors.length-1;
             colors.forEach(function(value,index){
                 gradient.addColorStop(index/length,value);
             });
-            color = gradient;
+            foregroundImage = gradient;
         }
-        let innerColor = options.innerColor||color;
-        let outerColor = options.outerColor||color;
-        context.save();
+        let innerColor = options.innerColor||foregroundImage;
+        let outerColor = options.outerColor||foregroundImage;
+        let backgroundImage = backgroundColor;
         if(!options.backgroundColor&&resources.backgroundImage){
-            context.drawImage(resources.backgroundImage,0,0,context.canvas.width,context.canvas.height);
-        }else{
-            context.fillStyle = backgroundColor;
-            context.fillRect(0,0,context.canvas.width,context.canvas.height);
+            backgroundImage = context.drawImage(resources.backgroundImage,0,0,context.canvas.width,context.canvas.height);
         }
+        context.save();
+        context.fillStyle = backgroundImage;
+        context.fillRect(0,0,context.canvas.width,context.canvas.height);
         context.restore();
         context.save();
         context.translate(x,y);
@@ -50,7 +50,7 @@ export default function(context,data,options){
                     }else if(api.isPositionPoint(i,j)==2){
                         context.fillStyle = outerColor;
                     }else{
-                        context.fillStyle = color;
+                        context.fillStyle = foregroundImage;
                     }
                     context.fillRect(Math.ceil(i*pxWidth)-0.5,Math.ceil(j*pxWidth)-0.5,Math.ceil(pxWidth)+1,Math.ceil(pxWidth)+1);
                 }

diff --git a/src/module/template/diamond.js b/src/module/template/diamond.js
@@ -18,27 +18,27 @@ export default function(context,data,options){
         let backgroundColor = options.backgroundColor||'#ffffff';
         let foregroundColor = options.foregroundColor||'#000000';
         let colors = foregroundColor.split(',');
-        let color = colors[0];
+        let foregroundImage = colors[0];
         if(!options.foregroundColor&&resources.foregroundImage){
-            color = api.getForegroundImageBrush(resources.foregroundImage);
+            foregroundImage = api.getImageBrush(resources.foregroundImage);
         }
         if(colors.length>1){
             let gradient = context.createLinearGradient(0,0,context.canvas.width,context.canvas.height);
             let length = colors.length-1;
             colors.forEach(function(value,index){
                 gradient.addColorStop(index/length,value);
             });
-            color = gradient;
+            foregroundImage = gradient;
         }
-        let innerColor = options.innerColor||color;
-        let outerColor = options.outerColor||color;
-        context.save();
+        let innerColor = options.innerColor||foregroundImage;
+        let outerColor = options.outerColor||foregroundImage;
+        let backgroundImage = backgroundColor;
         if(!options.backgroundColor&&resources.backgroundImage){
-            context.drawImage(resources.backgroundImage,0,0,context.canvas.width,context.canvas.height);
-        }else{
-            context.fillStyle = backgroundColor;
-            context.fillRect(0,0,context.canvas.width,context.canvas.height);
+            backgroundImage = context.drawImage(resources.backgroundImage,0,0,context.canvas.width,context.canvas.height);
         }
+        context.save();
+        context.fillStyle = backgroundImage;
+        context.fillRect(0,0,context.canvas.width,context.canvas.height);
         context.restore();
         context.save();
         context.translate(x+pxWidth/2,y+pxWidth/2);
@@ -51,8 +51,8 @@ export default function(context,data,options){
                     context.fillStyle = outerColor;
                     context.strokeStyle = outerColor;
                 }else{
-                    context.fillStyle = color;
-                    context.strokeStyle = color;
+                    context.fillStyle = foregroundImage;
+                    context.strokeStyle = foregroundImage;
                 }
                 if(api.getValue(i,j)){
                     context.beginPath();

diff --git a/src/module/template/fusion.js b/src/module/template/fusion.js
@@ -18,51 +18,53 @@ export default function(context,data,options){
         let backgroundColor = options.backgroundColor||'#ffffff';
         let foregroundColor = options.foregroundColor||'#000000';
         let colors = foregroundColor.split(',');
-        let color = colors[0];
+        let foregroundImage = colors[0];
         if(!options.foregroundColor&&resources.foregroundImage){
-            color = api.getForegroundImageBrush(resources.foregroundImage);
+            foregroundImage = api.getImageBrush(resources.foregroundImage);
         }
         if(colors.length>1){
             let gradient = context.createLinearGradient(0,0,context.canvas.width,context.canvas.height);
             let length = colors.length-1;
             colors.forEach(function(value,index){
                 gradient.addColorStop(index/length,value);
             });
-            color = gradient;
+            foregroundImage = gradient;
         }
-        let innerColor = options.innerColor||color;
-        let outerColor = options.outerColor||color;
-        context.save();
+        let innerColor = options.innerColor||foregroundColor;
+        let outerColor = options.outerColor||foregroundColor;
         if(resources.backgroundImage){
-            context.drawImage(resources.backgroundImage,0,0,context.canvas.width,context.canvas.height);
-        }else{
-            context.fillStyle = backgroundColor;
-            context.fillRect(0,0,context.canvas.width,context.canvas.height);
+            foregroundColor = foregroundColor.replace(/#([0-9a-fA-F]{6}).*/,'#$188');
+            backgroundColor = backgroundColor.replace(/#([0-9a-fA-F]{6}).*/,'#$188');
+            innerColor = innerColor.replace(/#([0-9a-fA-F]{6}).*/,'#$188');
+            outerColor = outerColor.replace(/#([0-9a-fA-F]{6}).*/,'#$188');
         }
+        let innerImage = innerColor||foregroundImage;
+        let outerImage = outerColor||foregroundImage;
+        let backgroundImage = resources.backgroundImage?api.getImageBrush(resources.backgroundImage):backgroundColor;
+        context.save();
+        context.fillStyle = backgroundImage;
+        context.fillRect(0,0,context.canvas.width,context.canvas.height);
         context.restore();
         context.save();
         context.translate(x,y);
         for(let i=0;i<len;i++){
             for(let j=0;j<len;j++){
-                if(api.isPositionPoint(i,j)==1){
-                    let fillColor = api.getValue(i,j)==1?(options.innerColor||options.foregroundColor||'#000000'):(options.backgroundColor||'#ffffff');
-                    if(resources.backgroundImage){
-                        fillColor = fillColor.replace(/#([0-9a-fA-F]{6}).*/,'#$188');
-                    }
-                    context.fillStyle = fillColor;
-                    context.fillRect(i*pxWidth,j*pxWidth,pxWidth,pxWidth);
-                }else if(api.isPositionPoint(i,j)==2){
-                    let fillColor = api.getValue(i,j)==1?(options.outerColor||options.foregroundColor||'#000000'):(options.backgroundColor||'#ffffff');
-                    if(resources.backgroundImage){
-                        fillColor = fillColor.replace(/#([0-9a-fA-F]{6}).*/,'#$188');
+                if(api.isPositionPoint(i,j)){
+                    if(api.getValue(i,j)==1){
+                        context.fillStyle = outerImage;
+                        context.fillRect(i*pxWidth,j*pxWidth,7*pxWidth,7*pxWidth);
+                        context.fillStyle = backgroundImage;
+                        context.fillRect((i+1)*pxWidth,(j+1)*pxWidth,5*pxWidth,5*pxWidth);
+                        context.fillStyle = backgroundColor;
+                        context.fillRect((i+1)*pxWidth,(j+1)*pxWidth,5*pxWidth,5*pxWidth);
+                        context.fillStyle = backgroundImage;
+                        context.fillRect((i+2)*pxWidth,(j+2)*pxWidth,3*pxWidth,3*pxWidth);
+                        context.fillStyle = innerImage;
+                        context.fillRect((i+2)*pxWidth,(j+2)*pxWidth,3*pxWidth,3*pxWidth);
+                        api.setRangeDisabled(i,j,7,7);
                     }
-                    context.fillStyle = fillColor;
-                    context.fillRect(i*pxWidth,j*pxWidth,pxWidth,pxWidth);
                 }else{
-                    let fillColor = api.getValue(i,j)==1?(options.foregroundColor||'#000000'):(options.backgroundColor||'#ffffff');
-                    if(resources.backgroundImage){
-                        fillColor = fillColor.replace(/#([0-9a-fA-F]{6}).*/,'#$188');
-                    }
+                    let fillColor = api.getValue(i,j)==1?foregroundColor:backgroundColor;
                     context.fillStyle = fillColor;
                     context.beginPath();
                     context.arc(i*pxWidth,j*pxWidth,0.5*pxWidth,0,0.5*Math.PI);

diff --git a/src/module/template/glitter.js b/src/module/template/glitter.js
@@ -18,19 +18,19 @@ export default function(context,data,options){
         let backgroundColor = options.backgroundColor||'#ffffff';
         let foregroundColor = options.foregroundColor||'#000000';
         let colors = foregroundColor.split(',');
-        let color = colors[0];
+        let foregroundImage = colors[0];
         if(!options.foregroundColor&&resources.foregroundImage){
-            color = api.getForegroundImageBrush(resources.foregroundImage);
+            foregroundImage = api.getImageBrush(resources.foregroundImage);
         }
-        let innerColor = options.innerColor||colors?.[1]||color;
-        let outerColor = options.outerColor||color;
-        context.save();
+        let innerColor = options.innerColor||colors?.[1]||foregroundImage;
+        let outerColor = options.outerColor||foregroundImage;
+        let backgroundImage = backgroundColor;
         if(!options.backgroundColor&&resources.backgroundImage){
-            context.drawImage(resources.backgroundImage,0,0,context.canvas.width,context.canvas.height);
-        }else{
-            context.fillStyle = backgroundColor;
-            context.fillRect(0,0,context.canvas.width,context.canvas.height);
+            backgroundImage = context.drawImage(resources.backgroundImage,0,0,context.canvas.width,context.canvas.height);
         }
+        context.save();
+        context.fillStyle = backgroundImage;
+        context.fillRect(0,0,context.canvas.width,context.canvas.height);
         context.restore();
         context.save();
         context.translate(x,y);
@@ -42,11 +42,11 @@ export default function(context,data,options){
                 }else if(api.isPositionPoint(i,j)==2){
                     context.fillStyle = outerColor;
                 }else{
-                    let color = colors[(i+j)%colors.length];
+                    let fillColor = colors[(i+j)%colors.length];
                     if(!options.foregroundColor&&resources.foregroundImage){
-                        color = context.createPattern(resources.foregroundImage,'repeat');
+                        fillColor = foregroundImage;
                     }
-                    context.fillStyle = color;
+                    context.fillStyle = fillColor;
                 }
                 if(api.getValue(i,j)==1){
                     if(api.isPositionPoint(i,j)){

diff --git a/src/module/template/heart.js b/src/module/template/heart.js
@@ -18,19 +18,19 @@ export default function(context,data,options){
         let backgroundColor = options.backgroundColor||'#ffffff';
         let foregroundColor = options.foregroundColor||'#000000';
         let colors = foregroundColor.split(',');
-        let color = colors[0];
+        let foregroundImage = colors[0];
         if(!options.foregroundColor&&resources.foregroundImage){
-            color = api.getForegroundImageBrush(resources.foregroundImage);
+            foregroundImage = api.getImageBrush(resources.foregroundImage);
         }
-        let innerColor = options.innerColor||colors?.[1]||color;
-        let outerColor = options.outerColor||color;
-        context.save();
+        let innerColor = options.innerColor||colors?.[1]||foregroundImage;
+        let outerColor = options.outerColor||foregroundImage;
+        let backgroundImage = backgroundColor;
         if(!options.backgroundColor&&resources.backgroundImage){
-            context.drawImage(resources.backgroundImage,0,0,context.canvas.width,context.canvas.height);
-        }else{
-            context.fillStyle = backgroundColor;
-            context.fillRect(0,0,context.canvas.width,context.canvas.height);
+            backgroundImage = context.drawImage(resources.backgroundImage,0,0,context.canvas.width,context.canvas.height);
         }
+        context.save();
+        context.fillStyle = backgroundImage;
+        context.fillRect(0,0,context.canvas.width,context.canvas.height);
         context.restore();
         let unit = pxWidth;
         for(let i=0;i<len;i++){
@@ -42,11 +42,11 @@ export default function(context,data,options){
                     }else if(api.isPositionPoint(i,j)==2){
                         context.fillStyle = outerColor;
                     }else{
-                        let color = colors[(i+j)%colors.length];
+                        let fillColor = colors[(i+j)%colors.length];
                         if(!options.foregroundColor&&resources.foregroundImage){
-                            color = context.createPattern(resources.foregroundImage,'repeat');
+                            fillColor = foregroundImage;
                         }
-                        context.fillStyle = color;
+                        context.fillStyle = fillColor;
                     }
                     if(api.getRangeTrue(i,j,3,3)){
                         unit = 0.92*pxWidth;