Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
# Conflicts:
#	dist/widget-qrcode.min.js
  • Loading branch information
zhenghaole committed Aug 15, 2024
2 parents 8bb394b + 3d09587 commit ca95a0f
Show file tree
Hide file tree
Showing 8 changed files with 135 additions and 9 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
</thead>
<tbody>
<tr><td>value</td><td>二维码内容</td></tr>
<tr><td>template</td><td>样式模板,可选:'default','water','diamond','hexagon','star','rect','bar','heart','glitter','fusion'</td></tr>
<tr><td>template</td><td>样式模板,可选:'default','water','diamond','hexagon','star','rect','bar','heart','glitter','stroke','fusion'</td></tr>
<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>
Expand Down
8 changes: 7 additions & 1 deletion dist/widget-qrcode.min.js

Large diffs are not rendered by default.

7 changes: 6 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,10 @@
<input type="radio" name="template" value="glitter"/>
<span>闪烁</span>
</label>
<label>
<input type="radio" name="template" value="stroke"/>
<span>描边</span>
</label>
<label>
<input type="radio" name="template" value="fusion"/>
<span>融合</span>
Expand Down Expand Up @@ -163,7 +167,7 @@
</thead>
<tbody>
<tr><td>value</td><td>二维码内容</td></tr>
<tr><td>template</td><td>样式模板,可选:'default','water','diamond','hexagon','star','rect','bar','heart','glitter','fusion'</td></tr>
<tr><td>template</td><td>样式模板,可选:'default','water','diamond','hexagon','star','rect','bar','heart','glitter','stroke','fusion'</td></tr>
<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>
Expand Down Expand Up @@ -211,6 +215,7 @@
<widget-qrcode template="glitter" foreground-color="#fe4365,#fc9d9a,#6d9d88,#490a3d" background-color="#f9f1f1" inner-color="#881600" outer-color="#343838"></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>
<widget-qrcode template="stroke" foreground-color="#150f3f,#fb3242,#018bf8" background-color="#edfaff"></widget-qrcode>
</div>
<script type="text/javascript">
let $show = document.querySelector('widget-qrcode#show');
Expand Down
7 changes: 5 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "qrcode-tool",
"version": "1.0.0",
"name": "widget-qrcode",
"version": "1.0.4",
"description": "qrcode component",
"author": "HaoLe Zheng",
"license": "MIT",
Expand All @@ -22,6 +22,9 @@
"yarn": "please-use-npm",
"npm": ">=8"
},
"files":[
"dist"
],
"devDependencies": {
"@babel/core": "^7.23.2",
"@babel/plugin-syntax-import-attributes": "^7.22.5",
Expand Down
2 changes: 1 addition & 1 deletion rollup.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const commonPlugins = [
input: './src/widget-qrcode.js',
output:[{
file: './dist/widget-qrcode.min.js',
format: 'iife',
format: 'umd',
banner
}],
acornInjectPlugins: [ importAssertions ],
Expand Down
4 changes: 3 additions & 1 deletion src/module/draw.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import _bar from './template/bar.js';
import _heart from './template/heart.js';
import _glitter from './template/glitter.js';
import _fusion from './template/fusion.js';
import _stroke from './template/stroke.js';

//基础绘制
export default {
Expand All @@ -20,5 +21,6 @@ export default {
'bar':_bar,
'heart':_heart,
'glitter':_glitter,
'fusion':_fusion
'fusion':_fusion,
'stroke':_stroke
};
111 changes: 111 additions & 0 deletions src/module/template/stroke.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
import getAPI from '../method/DrawUtil.js';

export default function(context,data,options){
let len = data.length;
let margin = context.canvas.width*0.05;
let pxWidth = (context.canvas.width-2*margin)/len;
let x = margin;
let y = margin;
let api = getAPI(context,data,options);
let resourcesMap = {};
if(options.foregroundImage){
resourcesMap['foregroundImage'] = options.foregroundImage;
}
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';
let colors = foregroundColor.split(',');
let foregroundImage = colors[0];
if(!options.foregroundColor&&resources.foregroundImage){
foregroundImage = api.getImageBrush(resources.foregroundImage);
}
let innerColor = options.innerColor||foregroundImage;
let outerColor = options.outerColor||colors?.[1]||foregroundImage;
let backgroundImage = backgroundColor;
if(!options.backgroundColor&&resources.backgroundImage){
backgroundImage = api.getImageBrush(resources.backgroundImage);
}
context.save();
context.fillStyle = backgroundImage;
context.fillRect(0,0,context.canvas.width,context.canvas.height);
context.restore();
context.save();
context.translate(x,y);
context.fillStyle = colors[0];
for(let i=0;i<len;i++){
for(let j=0;j<len;j++){
if(api.getValue(i,j)==1){
if((i+j)%2&&!api.getValue(i-1,j)&&!api.getValue(i+1,j)&&!api.getValue(i,j-1)&&!api.getValue(i,j+1)){
context.beginPath();
context.arc((i+0.5)*pxWidth,(j+0.5)*pxWidth,0.25*pxWidth,0,2*Math.PI);
context.closePath();
context.fill();
}else{
for(let m=9;m;m--){
for(let n=9;n;n--){
if(api.getRangeTrue(i,j,m,n)){
context.fillRect((i+0.05)*pxWidth,(j+0.05)*pxWidth,(m-0.1)*pxWidth,(n-0.1)*pxWidth);
break;
}
}
}
}
}
}
}
let map = JSON.parse(JSON.stringify(data));
let render = function(i,j){
if(api.getValue(i,j)&&map[i][j]==1){
if((i+j)%2&&!api.getValue(i-1,j)&&!api.getValue(i+1,j)&&!api.getValue(i,j-1)&&!api.getValue(i,j+1)){
}else{
for(let m=9;m;m--){
for(let n=9;n;n--){
if(api.getRangeTrue(i,j,m,n)){
context.fillRect((i+0.15)*pxWidth,(j+0.15)*pxWidth,(m-0.3)*pxWidth,(n-0.3)*pxWidth);
break;
}
}
}
}
//寻找附近
map[i][j]=2;
render(i-1,j);
render(i+1,j);
render(i,j-1);
render(i,j+1);
}
};
context.lineWidth = 1;
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 fillColor = colors[1+(i*j)%(colors.length-1)];
if(!options.foregroundColor&&resources.foregroundImage){
fillColor = foregroundImage;
}
context.fillStyle = fillColor;
}
render(i,j);
}
}
}
context.restore();
context.save();
api.setText();
if(resources.logo){
api.setLogo(resources.logo);
}
context.restore();
});
};
3 changes: 1 addition & 2 deletions static/style/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -434,12 +434,11 @@ a:hover{
}
.mod-sample .bd{
padding: 20px;
text-align: center;
}
.mod-sample .bd widget-qrcode{
width: 172px;
height: 172px;
margin: 6px;
margin: 8px 6px;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.075);
}
Expand Down

0 comments on commit ca95a0f

Please sign in to comment.