Skip to content

Commit

Permalink
updated 优化部分模板的表现
Browse files Browse the repository at this point in the history
  • Loading branch information
@mumuy
mumuy committed May 26, 2024
1 parent cc81b79 commit cea5308
Show file tree
Hide file tree
Showing 7 changed files with 87 additions and 57 deletions.
2 changes: 1 addition & 1 deletion dist/widget-qrcode.min.js
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,13 +183,13 @@ <h1>二维码组件<span class="tag">开源算法</span></h1>
<div class="bd">
<widget-qrcode template="fusion" level="M" background-image="./static/image/bg/girl.jpeg" background-color="#ffcc60"></widget-qrcode>
<widget-qrcode template="fusion" background-image="./static/image/bg/monkey.jpeg" background-color="#ece8dd" foreground-color="#000000"></widget-qrcode>
<widget-qrcode template="diamond" foreground-image="./static/image/skin/lowploy.jpg" background-color="#f1f8ff"></widget-qrcode>
<widget-qrcode template="diamond" logo="./static/image/logo/snail.png" foreground-image="./static/image/skin/grass.png" background-color="#fff2dc" inner-color="#094304"></widget-qrcode>
<widget-qrcode template="water" logo="./static/image/logo/earth.png" foreground-color="#6d327c,#485DA6,#00a1ba,#00BF98,#36C486" background-color="#f1f8ff" inner-color="#845EC2"></widget-qrcode>
<widget-qrcode template="heart" logo="./static/image/logo/octopus.png" foreground-color="#ff9999" background-color="#fff7f7" inner-color="#ce5050"></widget-qrcode>
<widget-qrcode template="hexagon" foreground-color="#17252a,#2b7a78,#3aafa9" background-color="#def2f1" inner-color="#17252a"></widget-qrcode>
<widget-qrcode template="bar" foreground-color="#3b8686,#79bd9a,#f8ca00,#008c9e" background-color="#f0f5f9" inner-color="#3B4E32"></widget-qrcode>
<widget-qrcode template="glitter" foreground-color="#fe4365,#fc9d9a,#6d9d88,#490a3d" background-color="#f9f1f1" inner-color="#881600" outer-color="#343838"></widget-qrcode>
<widget-qrcode template="water" logo="./static/image/logo/earth.png" foreground-color="#6d327c,#485DA6,#00a1ba,#00BF98,#36C486" background-color="#f1f8ff" inner-color="#845EC2"></widget-qrcode>
<widget-qrcode template="diamond" logo="./static/image/logo/snail.png" foreground-image="./static/image/skin/grass.png" background-color="#fff2dc" inner-color="#094304"></widget-qrcode>
<widget-qrcode template="rect" foreground-color="#4abdac,#fc4a1a,#f7b733" background-color="#f9f6f3" inner-color="#d66c44" outer-color="#037584"></widget-qrcode>
<widget-qrcode template="star" level="L" foreground-color="#fc9000,#ffa935,#ffb756" background-color="#034690"></widget-qrcode>
</div>
</div>
Expand Down
47 changes: 15 additions & 32 deletions src/module/template/bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,16 @@ export default function(context,data,options){
context.restore();
context.save();
context.translate(x+0.5*pxWidth,y+0.5*pxWidth);
let drawItem = function(x,y,width,height){
context.beginPath();
context.arc(x*pxWidth,y*pxWidth,0.4*pxWidth,1*Math.PI,1.5*Math.PI);
context.arc((x+width-1)*pxWidth,y*pxWidth,0.4*pxWidth,1.5*Math.PI,0*Math.PI);
context.arc((x+width-1)*pxWidth,(y+height-1)*pxWidth,0.4*pxWidth,0*Math.PI,0.5*Math.PI);
context.arc(x*pxWidth,(y+height-1)*pxWidth,0.4*pxWidth,0.5*Math.PI,1*Math.PI);
context.closePath();
context.fill();
api.setRangeDisabled(x,y,width,height);
};
for(let i=0;i<len;i++){
for(let j=0;j<len;j++){
if(api.getValue(i,j)==1){
Expand Down Expand Up @@ -64,39 +74,12 @@ export default function(context,data,options){
context.closePath();
context.fill();
api.setRangeDisabled(i,j,7,7);
}else if(api.getRangeTrue(i,j,3,1)){
context.beginPath();
context.arc(i*pxWidth,j*pxWidth,0.4*pxWidth,0.5*Math.PI,1.5*Math.PI);
context.arc((i+2)*pxWidth,j*pxWidth,0.4*pxWidth,-0.5*Math.PI,0.5*Math.PI);
context.closePath();
context.fill();
api.setRangeDisabled(i,j,3,1);
}else if(api.getRangeTrue(i,j,2,1)){
context.beginPath();
context.arc(i*pxWidth,j*pxWidth,0.4*pxWidth,0.5*Math.PI,1.5*Math.PI);
context.arc((i+1)*pxWidth,j*pxWidth,0.4*pxWidth,-0.5*Math.PI,0.5*Math.PI);
context.closePath();
context.fill();
api.setRangeDisabled(i,j,2,1);
}else if(api.getRangeTrue(i,j,1,3)){
context.beginPath();
context.arc(i*pxWidth,j*pxWidth,0.4*pxWidth,Math.PI,2*Math.PI);
context.arc(i*pxWidth,(j+2)*pxWidth,0.4*pxWidth,0,Math.PI);
context.closePath();
context.fill();
api.setRangeDisabled(i,j,1,3);
}else if(api.getRangeTrue(i,j,1,2)){
context.beginPath();
context.arc(i*pxWidth,j*pxWidth,0.4*pxWidth,Math.PI,2*Math.PI);
context.arc(i*pxWidth,(j+1)*pxWidth,0.4*pxWidth,0,Math.PI);
context.closePath();
context.fill();
api.setRangeDisabled(i,j,1,2);
}else{
context.beginPath();
context.arc(i*pxWidth,j*pxWidth,0.4*pxWidth,0,2*Math.PI);
context.closePath();
context.fill();
[[4,4],[4,3],[4,3],[4,1],[3,4],[3,3],[3,2],[3,1],[2,4],[2,3],[2,2],[2,1],[1,4],[1,3],[1,2],[1,1]].forEach(function(coord){
if(api.getRangeTrue(i,j,coord[0],coord[1])){
drawItem(i,j,coord[0],coord[1]);
}
});
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/module/template/heart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,8 @@ export default function(context,data,options){
context.fillStyle = color;
}
if(api.getRangeTrue(i,j,3,3)){
unit = 0.8*pxWidth;
context.translate(x+(i+1.5)*pxWidth,y+(j+1.1)*pxWidth);
unit = 0.92*pxWidth;
context.translate(x+(i+1.45)*pxWidth,y+(j+0.95)*pxWidth);
context.beginPath();
context.arc(-unit,0,unit,Math.PI,0,false);
context.arc(unit,0,unit,Math.PI,0,false); //貝塞尔曲线画心
Expand Down
63 changes: 55 additions & 8 deletions src/module/template/rect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,25 +54,72 @@ export default function(context,data,options){
context.fillRect(i*pxWidth+pxWidth,j*pxWidth+pxWidth,5*pxWidth,5*pxWidth);
context.fillStyle = innerColor;
context.beginPath();
context.moveTo(i*pxWidth+3.5*pxWidth,j*pxWidth+pxWidth);
context.lineTo(i*pxWidth+6*pxWidth,j*pxWidth+3.5*pxWidth);
context.lineTo(i*pxWidth+3.5*pxWidth,j*pxWidth+6*pxWidth);
context.lineTo(i*pxWidth+pxWidth,j*pxWidth+3.5*pxWidth);
context.moveTo((i+3.5)*pxWidth,(j+1)*pxWidth);
context.lineTo((i+6)*pxWidth,(j+3.5)*pxWidth);
context.lineTo((i+3.5)*pxWidth,(j+6)*pxWidth);
context.lineTo((i+1)*pxWidth,(j+3.5)*pxWidth);
context.closePath();
context.fill();
api.setRangeDisabled(i,j,7,7);
}else if(api.getRangeTrue(i,j,1,1)&&api.getRangeTrue(i-1,j+1,3,1)&&api.getRangeTrue(i,j+2,1,1)){
context.beginPath();
context.moveTo((i+0.5)*pxWidth,j*pxWidth);
context.lineTo((i+2)*pxWidth,(j+1.5)*pxWidth);
context.lineTo((i+0.5)*pxWidth,(j+3)*pxWidth);
context.lineTo((i-1)*pxWidth,(j+1.5)*pxWidth);
context.closePath();
context.fill();
api.setRangeDisabled(i,j,1,1);
api.setRangeDisabled(i-1,j+1,3,1);
api.setRangeDisabled(i,j+2,1,1);
}else if(api.getRangeTrue(i,j,3,2)){
context.fillRect(i*pxWidth,j*pxWidth,3*pxWidth,2*pxWidth);
api.setRangeDisabled(i,j,3,2);
}else if(api.getRangeTrue(i,j,2,3)){
context.fillRect(i*pxWidth,j*pxWidth,2*pxWidth,3*pxWidth);
api.setRangeDisabled(i,j,2,3);
}else if(api.getRangeTrue(i,j,2,2)){
context.fillRect(i*pxWidth,j*pxWidth,2*pxWidth,2*pxWidth);
api.setRangeDisabled(i,j,2,2);
}
}
}
}
for(let i=0;i<len;i++){
for(let j=0;j<len;j++){
if(api.getValue(i,j)==1){
if(api.isPositionPoint(i,j)==1){
context.fillStyle = innerColor;
}else if(api.isPositionPoint(i,j)==2){
context.fillStyle = outerColor;
}else{
let color = colors[(i+j)%colors.length];
if(!options.foregroundColor&&resources.foregroundImage){
color = context.createPattern(resources.foregroundImage,'repeat');
}
context.fillStyle = color;
}
if(api.getValue(i-1,j)!=2&&api.getValue(i,j-1)!=2&&api.getValue(i+1,j)!=2&&api.getValue(i,j+1)!=2){
if((i+j)%2){
context.beginPath();
context.moveTo(i*pxWidth+0.5*pxWidth,j*pxWidth);
context.lineTo(i*pxWidth+pxWidth,j*pxWidth+0.5*pxWidth);
context.lineTo(i*pxWidth+0.5*pxWidth,j*pxWidth+pxWidth);
context.lineTo(i*pxWidth,j*pxWidth+0.5*pxWidth);
context.moveTo((i+0.5)*pxWidth,j*pxWidth);
context.lineTo((i+1)*pxWidth,(j+0.5)*pxWidth);
context.lineTo((i+0.5)*pxWidth,(j+1)*pxWidth);
context.lineTo(i*pxWidth,(j+0.5)*pxWidth);
context.closePath();
context.fill();
}else{
context.fillRect(i*pxWidth,j*pxWidth,pxWidth,pxWidth);
api.setRangeDisabled(i,j,1,1);
}
}else{
context.beginPath();
context.moveTo((i+0.5)*pxWidth,j*pxWidth);
context.lineTo((i+1)*pxWidth,(j+0.5)*pxWidth);
context.lineTo((i+0.5)*pxWidth,(j+1)*pxWidth);
context.lineTo(i*pxWidth,(j+0.5)*pxWidth);
context.closePath();
context.fill();
}
}
}
Expand Down
22 changes: 11 additions & 11 deletions src/module/template/star.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,6 @@ export default function(context,data,options){
let x = margin;
let y = margin;
let api = getAPI(context,data,options);
let drawItem = function(x,y,pxWidth){
let unit = pxWidth*0.6;
let unit_p = pxWidth*0.55;
context.beginPath();
for (let n = 0; n < 5; n++) {
context.lineTo(x+Math.cos((18+n*72)/180*Math.PI)*unit+unit_p,y-Math.sin((18+n*72)/180*Math.PI)*unit+unit_p);
context.lineTo(x+Math.cos((54+n*72)/180*Math.PI)*0.4*unit+unit_p,y-Math.sin((54+n*72)/180*Math.PI)*0.4*unit+unit_p);
}
context.closePath();
context.fill();
};
let resourcesMap = {};
if(options.foregroundImage){
resourcesMap['foregroundImage'] = options.foregroundImage;
Expand Down Expand Up @@ -45,6 +34,17 @@ export default function(context,data,options){
context.restore();
context.save();
context.translate(x,y);
let drawItem = function(x,y,pxWidth){
let unit = pxWidth*0.6;
let unit_p = pxWidth*0.55;
context.beginPath();
for (let n = 0; n < 5; n++) {
context.lineTo(x+Math.cos((18+n*72)/180*Math.PI)*unit+unit_p,y-Math.sin((18+n*72)/180*Math.PI)*unit+unit_p);
context.lineTo(x+Math.cos((54+n*72)/180*Math.PI)*0.4*unit+unit_p,y-Math.sin((54+n*72)/180*Math.PI)*0.4*unit+unit_p);
}
context.closePath();
context.fill();
};
for(let i=0;i<len;i++){
for(let j=0;j<len;j++){
if(api.getValue(i,j)==1){
Expand Down
Binary file removed static/image/skin/lowploy.jpg
View file
Binary file not shown.

0 comments on commit cea5308

Please sign in to comment.