Skip to content

Commit

Permalink
updated 添加文本展示及logo移入canvas
Browse files Browse the repository at this point in the history
  • Loading branch information
@mumuy
mumuy committed May 28, 2024
1 parent 060dc1d commit 90ea2bd
Show file tree
Hide file tree
Showing 16 changed files with 140 additions and 26 deletions.
9 changes: 6 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,15 @@
<tr><td>level</td><td>纠错等级,可选：'M','L','Q','H'</td></tr>
<tr><td>width</td><td>二维码宽度，默认：300</td></tr>
<tr><td>height</td><td>二维码高度，默认：300</td></tr>
<tr><td>logo</td><td>logo图片地址</td></tr>
<tr><td>background-image</td><td>背景图片地址</td></tr>
<tr><td>foreground-image</td><td>前景图片地址</td></tr>
<tr><td>background-color</td><td>背景色，默认：#ffffff</td></tr>
<tr><td>foreground-color</td><td>前景色，默认：#000000;（多色用逗号分隔）</td></tr>
<tr><td>inner-color</td><td>定位点内层颜色，默认：#000000</td></tr>
<tr><td>outer-color</td><td>定位点外层颜色，默认：#000000</td></tr>
<tr><td>background-image</td><td>背景图片地址</td></tr>
<tr><td>foreground-image</td><td>前景图片地址</td></tr>
<tr><td>logo</td><td>logo图片地址</td></tr>
<tr><td>text</td><td>悬浮文本内容</td></tr>
<tr><td>text-color</td><td>悬浮文本颜色</td></tr>
<tr><td>text-stroke</td><td>悬浮文本描边</td></tr>
</tbody>
</table>
4 changes: 2 additions & 2 deletions dist/widget-qrcode.min.js
View file

Large diffs are not rendered by default.

9 changes: 6 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,13 +153,16 @@ <h1>二维码组件<span class="tag">开源算法</span></h1>
<tr><td>level</td><td>纠错等级,可选：'M','L','Q','H'</td></tr>
<tr><td>width</td><td>二维码宽度，默认：300</td></tr>
<tr><td>height</td><td>二维码高度，默认：300</td></tr>
<tr><td>logo</td><td>logo图片地址</td></tr>
<tr><td>background-image</td><td>背景图片地址</td></tr>
<tr><td>foreground-image</td><td>前景图片地址</td></tr>
<tr><td>background-color</td><td>背景色，默认：#ffffff</td></tr>
<tr><td>foreground-color</td><td>前景色，默认：#000000;（多色用逗号分隔）</td></tr>
<tr><td>inner-color</td><td>定位点内层颜色，默认：#000000</td></tr>
<tr><td>outer-color</td><td>定位点外层颜色，默认：#000000</td></tr>
<tr><td>background-image</td><td>背景图片地址</td></tr>
<tr><td>foreground-image</td><td>前景图片地址</td></tr>
<tr><td>logo</td><td>logo图片地址</td></tr>
<tr><td>text</td><td>悬浮文本内容</td></tr>
<tr><td>text-color</td><td>悬浮文本颜色</td></tr>
<tr><td>text-stroke</td><td>悬浮文本描边</td></tr>
</tbody>
</table>
</div>
Expand Down
20 changes: 20 additions & 0 deletions src/module/method/DrawUtil.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,26 @@ export default function(context,data,options) {
context.closePath();
context.fill();
context.stroke();
},
setText(){
if(options.text){
let fontSize = Math.ceil(context.canvas.height/12.5);
let lineWidth = Math.ceil(context.canvas.height/50);
context.textAlign = 'center';
context.textBaseline = 'middle';
context.font = `bold ${fontSize}px 微软雅黑`;
context.lineWidth = lineWidth;
context.strokeStyle = options.textStroke||'#ffffff';
context.strokeText(options.text,context.canvas.width/2,context.canvas.height/2);
context.fillStyle = options.textColor||'#000000';
context.fillText(options.text,context.canvas.width/2,context.canvas.height/2);
}
},
setLogo(image){
let logoSize = Math.ceil(context.canvas.width/4);
let x = (context.canvas.width-logoSize)/2;
let y = (context.canvas.height-logoSize)/2;
context.drawImage(image,x,y,logoSize,logoSize);
}
};
};
9 changes: 9 additions & 0 deletions src/module/template/bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ export default function(context,data,options){
if(options.backgroundImage){
resourcesMap['backgroundImage'] = options.backgroundImage;
}
if(options.logo){
resourcesMap['logo'] = options.logo;
}
api.imageReady(resourcesMap).then(function(resources){
let backgroundColor = options.backgroundColor||'#ffffff';
let foregroundColor = options.foregroundColor||'#000000';
Expand Down Expand Up @@ -85,5 +88,11 @@ export default function(context,data,options){
}
}
context.restore();
context.save();
api.setText();
if(resources.logo){
api.setLogo(resources.logo);
}
context.restore();
});
}
9 changes: 9 additions & 0 deletions src/module/template/default.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ export default function(context,data,options){
if(options.backgroundImage){
resourcesMap['backgroundImage'] = options.backgroundImage;
}
if(options.logo){
resourcesMap['logo'] = options.logo;
}
api.imageReady(resourcesMap).then(function(resources){
let backgroundColor = options.backgroundColor||'#ffffff';
let foregroundColor = options.foregroundColor||'#000000';
Expand Down Expand Up @@ -57,5 +60,11 @@ export default function(context,data,options){
}
}
context.restore();
context.save();
api.setText();
if(resources.logo){
api.setLogo(resources.logo);
}
context.restore();
});
};
9 changes: 9 additions & 0 deletions src/module/template/diamond.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ export default function(context,data,options){
if(options.backgroundImage){
resourcesMap['backgroundImage'] = options.backgroundImage;
}
if(options.logo){
resourcesMap['logo'] = options.logo;
}
api.imageReady(resourcesMap).then(function(resources){
let backgroundColor = options.backgroundColor||'#ffffff';
let foregroundColor = options.foregroundColor||'#000000';
Expand Down Expand Up @@ -116,5 +119,11 @@ export default function(context,data,options){
}
}
context.restore();
context.save();
api.setText();
if(resources.logo){
api.setLogo(resources.logo);
}
context.restore();
});
}
9 changes: 9 additions & 0 deletions src/module/template/fusion.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ export default function(context,data,options){
if(options.backgroundImage){
resourcesMap['backgroundImage'] = options.backgroundImage;
}
if(options.logo){
resourcesMap['logo'] = options.logo;
}
api.imageReady(resourcesMap).then(function(resources){
let backgroundColor = options.backgroundColor||'#ffffff';
let foregroundColor = options.foregroundColor||'#000000';
Expand Down Expand Up @@ -77,5 +80,11 @@ export default function(context,data,options){
}
}
context.restore();
context.save();
api.setText();
if(resources.logo){
api.setLogo(resources.logo);
}
context.restore();
});
};
9 changes: 9 additions & 0 deletions src/module/template/glitter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ export default function(context,data,options){
if(options.backgroundImage){
resourcesMap['backgroundImage'] = options.backgroundImage;
}
if(options.logo){
resourcesMap['logo'] = options.logo;
}
api.imageReady(resourcesMap).then(function(resources){
let backgroundColor = options.backgroundColor||'#ffffff';
let foregroundColor = options.foregroundColor||'#000000';
Expand Down Expand Up @@ -88,5 +91,11 @@ export default function(context,data,options){
}
}
context.restore();
context.save();
api.setText();
if(resources.logo){
api.setLogo(resources.logo);
}
context.restore();
});
};
9 changes: 9 additions & 0 deletions src/module/template/heart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ export default function(context,data,options){
if(options.backgroundImage){
resourcesMap['backgroundImage'] = options.backgroundImage;
}
if(options.logo){
resourcesMap['logo'] = options.logo;
}
api.imageReady(resourcesMap).then(function(resources){
let backgroundColor = options.backgroundColor||'#ffffff';
let foregroundColor = options.foregroundColor||'#000000';
Expand Down Expand Up @@ -85,5 +88,11 @@ export default function(context,data,options){
}
}
}
context.save();
api.setText();
if(resources.logo){
api.setLogo(resources.logo);
}
context.restore();
});
}
9 changes: 9 additions & 0 deletions src/module/template/hexagon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ export default function(context,data,options){
if(options.backgroundImage){
resourcesMap['backgroundImage'] = options.backgroundImage;
}
if(options.logo){
resourcesMap['logo'] = options.logo;
}
api.imageReady(resourcesMap).then(function(resources){
let backgroundColor = options.backgroundColor||'#ffffff';
let foregroundColor = options.foregroundColor||'#000000';
Expand Down Expand Up @@ -117,5 +120,11 @@ export default function(context,data,options){
}
}
context.restore();
context.save();
api.setText();
if(resources.logo){
api.setLogo(resources.logo);
}
context.restore();
});
}
9 changes: 9 additions & 0 deletions src/module/template/rect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ export default function(context,data,options){
if(options.backgroundImage){
resourcesMap['backgroundImage'] = options.backgroundImage;
}
if(options.logo){
resourcesMap['logo'] = options.logo;
}
api.imageReady(resourcesMap).then(function(resources){
let backgroundColor = options.backgroundColor||'#ffffff';
let foregroundColor = options.foregroundColor||'#000000';
Expand Down Expand Up @@ -125,5 +128,11 @@ export default function(context,data,options){
}
}
context.restore();
context.save();
api.setText();
if(resources.logo){
api.setLogo(resources.logo);
}
context.restore();
});
};
9 changes: 9 additions & 0 deletions src/module/template/star.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ export default function(context,data,options){
if(options.backgroundImage){
resourcesMap['backgroundImage'] = options.backgroundImage;
}
if(options.logo){
resourcesMap['logo'] = options.logo;
}
api.imageReady(resourcesMap).then(function(resources){
let backgroundColor = options.backgroundColor||'#ffffff';
let foregroundColor = options.foregroundColor||'#000000';
Expand Down Expand Up @@ -74,5 +77,11 @@ export default function(context,data,options){
}
}
context.restore();
context.save();
api.setText();
if(resources.logo){
api.setLogo(resources.logo);
}
context.restore();
});
};
9 changes: 9 additions & 0 deletions src/module/template/water.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ export default function(context,data,options){
if(options.backgroundImage){
resourcesMap['backgroundImage'] = options.backgroundImage;
}
if(options.logo){
resourcesMap['logo'] = options.logo;
}
api.imageReady(resourcesMap).then(function(resources){
let backgroundColor = options.backgroundColor||'#ffffff';
let foregroundColor = options.foregroundColor||'#000000';
Expand Down Expand Up @@ -99,5 +102,11 @@ export default function(context,data,options){
}
}
context.restore();
context.save();
api.setText();
if(resources.logo){
api.setLogo(resources.logo);
}
context.restore();
});
};
8 changes: 0 additions & 8 deletions src/style/default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,3 @@
background: #ffffff;
vertical-align: middle;
}
.mod-qrcode .logo{
position: absolute;
left: 0;
top: 0;
z-index: 9;
width: 100%;
height: 100%;
}
26 changes: 16 additions & 10 deletions src/widget-qrcode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ class WidgetQRCode extends HTMLElement {
super();
}
static get observedAttributes(){
return ['value','template','level','width','height','logo','foreground-image','background-image','foreground-color','background-color','inner-color','outer-color'];
return ['value','template','level','width','height','logo','text','text-color','text-stroke','foreground-image','background-image','foreground-color','background-color','inner-color','outer-color'];
}
get value(){
return this.getAttribute('value')||'https://passer-by.com/';
Expand All @@ -27,6 +27,15 @@ class WidgetQRCode extends HTMLElement {
get logo(){
return this.getAttribute('logo')||'';
}
get text(){
return this.getAttribute('text')||'';
}
get textColor(){
return this.getAttribute('text-color')||'';
}
get textStroke(){
return this.getAttribute('text-stroke')||'';
}
get foregroundImage(){
return this.getAttribute('foreground-image')||'';
}
Expand Down Expand Up @@ -85,7 +94,6 @@ class WidgetQRCode extends HTMLElement {
let _ = this;
_.shadowRoot.innerHTML = `<div class="mod-qrcode">
<canvas></canvas>
<div class="logo"></div>
</div>`;
_.$module = _.shadowRoot.querySelector('.mod-qrcode');
_.$canvas = _.$module.querySelector('canvas');
Expand All @@ -111,13 +119,7 @@ class WidgetQRCode extends HTMLElement {
}
drawQRCode(){
let _ = this;
let level = _.level;
if(_.logo){
level = 'H';
_.$module.querySelector('.logo').style = `background: url(${_.logo}) center center/ 25% 25% no-repeat;`;
}else{
_.$module.querySelector('.logo').style = ``;
}
let level =_.logo:'H':_.level;
let data = QRCode(_.value, level);
_.context.clearRect(0,0,_.$canvas.width,_.$canvas.height);
(Draw[_.template]||Draw['default'])(_.context, data, {
Expand All @@ -126,7 +128,11 @@ class WidgetQRCode extends HTMLElement {
'foregroundColor':_.foregroundColor,
'backgroundColor':_.backgroundColor,
'innerColor':_.innerColor,
'outerColor':_.outerColor
'outerColor':_.outerColor,
'logo':_.logo,
'text':_.text,
'textColor':_.textColor,
'textStroke':_.textStroke
});
}
}
Expand Down

0 comments on commit 90ea2bd

Please sign in to comment.