Skip to content

Commit 51925d9

Browse files
ushelpushelp
committed
Add dotSacale for Timing and Alignment
Add dotSacale for Timing and Alignment.
1 parent 8c8077f commit 51925d9

File tree

4 files changed

+144
-38
lines changed

4 files changed

+144
-38
lines changed

‎dist/easy.qrcode.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "easyqrcodejs",
3-
"version": "4.0.0",
3+
"version": "4.1.0",
44
"description": "Cross-browser QRCode generator for pure javascript. Support Canvas, SVG and Table drawing methods. Support Dot style, Logo, Background image, Colorful, Title etc. settings. Support Angular, Vue.js, React, Next.js framework. Support binary(hex) data mode.(Running with DOM on client side)",
55
"main": "dist/easy.qrcode.min.js",
66
"scripts": {},

‎readme.md‎

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -195,12 +195,24 @@ var qrcode = new QRCode(DOM_object, options_object);
195195
colorDark : "#000000",
196196
colorLight : "#ffffff",
197197
correctLevel : QRCode.CorrectLevel.H, // L, M, Q, H
198-
dotScale: 1 // Must be greater than 0, less than or equal to 1. default is 1
199198

199+
// ====== dotScale
200+
/*
201+
dotScale: 1, // For body block, must be greater than 0, less than or equal to 1. default is 1
202+
203+
dotScaleTiming: 1, // Dafault for timing block , must be greater than 0, less than or equal to 1. default is 1
204+
dotScaleTiming_H: undefined, // For horizontal timing block, must be greater than 0, less than or equal to 1. default is 1
205+
dotScaleTiming_V: undefined, // For vertical timing block, must be greater than 0, less than or equal to 1. default is 1
206+
207+
dotScaleA: 1, // Dafault for alignment block, must be greater than 0, less than or equal to 1. default is 1
208+
dotScaleAO: undefined, // For alignment outer block, must be greater than 0, less than or equal to 1. default is 1
209+
dotScaleAI: undefined, // For alignment inner block, must be greater than 0, less than or equal to 1. default is 1
210+
*/
211+
200212
// ====== Quiet Zone
201213
/*
202214
quietZone: 0,
203-
quietZoneColor: 'transparent',
215+
quietZoneColor: "rgba(0,0,0,0)",
204216
*/
205217

206218
// ====== Logo
@@ -297,13 +309,22 @@ var qrcode = new QRCode(DOM_object, options_object);
297309
| **text** | Y | String |`''` | Text |   |
298310
| **width** | N | Number | `256` | Width |   |
299311
| **height** | N | Number | `256` | Height |   |
300-
| **colorDark** | N | String | `#000000` | Dark CSS color, `transparent`|   |
301-
| **colorLight** | N | String | `#ffffff` | Light CSS color, `transparent` |   |
312+
| **colorDark** | N | String | `#000000` | Dark CSS color, `rgba(0,0,0,0)`|   |
313+
| **colorLight** | N | String | `#ffffff` | Light CSS color, `rgba(0,0,0,0)` |   |
302314
| **correctLevel** | N | Enum | `QRCode.CorrectLevel.H` | `QRCode.CorrectLevel.H`<br/>`QRCode.CorrectLevel.Q` <br/> `QRCode.CorrectLevel.M` <br/> `QRCode.CorrectLevel.L`| &nbsp; |
303-
| **dotScale** | N | Number | `1.0` |Dot style required Patterns. Ranges: `0-1.0` | &nbsp; |
315+
| Dot style| --- | ---|---|---|---|
316+
| **dotScale** | N | Number | `1.0` |Dot style scale. Ranges: `0-1.0` | &nbsp; |
317+
| **dotScaleTiming** | N | Number | `1.0` |Dot style scale for timing. Ranges: `0-1.0` | &nbsp; |
318+
| **dotScaleTiming_V** | N | Number | `undefined` |Dot style scale for horizontal timing. Ranges: `0-1.0` | &nbsp; |
319+
| **dotScaleTiming_H** | N | Number | `undefined` |Dot style scale for vertical timing. Ranges: `0-1.0` | &nbsp; |
320+
| **dotScaleA** | N | Number | `1.0` |Dot style scale for alignment. Ranges: `0-1.0` | &nbsp; |
321+
| **dotScaleAO** | N | Number | `undefined` |Dot style scale for alignment outer. Ranges: `0-1.0` | &nbsp; |
322+
| **dotScaleAI** | N | Number | `undefined` |Dot style scale for alignment inner. Ranges: `0-1.0` | &nbsp; |
323+
| Quiet Zone| --- | ---|---|---|---|
324+
| **quietZoneColor** | N | String | `rgba(0,0,0,0)` | Background CSS color to Quiet Zone | &nbsp; |
304325
| Quiet Zone| --- | ---|---|---|---|
305326
| **quietZone** | N | Number | `0` | Quiet Zone size | &nbsp; |
306-
| **quietZoneColor** | N | String | `transparent` | Background CSS color to Quiet Zone | &nbsp; |
327+
| **quietZoneColor** | N | String | `rgba(0,0,0,0)` | Background CSS color to Quiet Zone | &nbsp; |
307328
| Logo options| --- | ---|---|---|---|
308329
| **logo** | N | String | `undefined` | Logo Image Path or Base64 encoded image. If use relative address, relative to `easy.qrcode.min.js` | &nbsp; |
309330
| **logoWidth** | N | Number | `undefined` | Height | &nbsp; |

‎src/easy.qrcode.js‎

Lines changed: 114 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
*
44
* Cross-browser QRCode generator for pure javascript. Support Canvas, SVG and Table drawing methods. Support Dot style, Logo, Background image, Colorful, Title etc. settings. Support Angular, Vue.js, React, Next.js framework. Support binary(hex) data mode.(Running with DOM on client side)
55
*
6-
* Version 4.0.0
6+
* Version 4.1.0
77
*
88
* @author [ [email protected] ]
99
*
@@ -1081,7 +1081,7 @@
10811081
// _htOption.colorDark="rgba(0, 0, 0, .6)";
10821082
// _htOption.colorLight='rgba(255, 255, 255, .7)';
10831083
} else {
1084-
_htOption.colorLight = 'transparent';
1084+
_htOption.colorLight = "rgba(0,0,0,0)";
10851085
}
10861086

10871087

@@ -1495,7 +1495,16 @@
14951495

14961496
var eye = oQRCode.getEye(row, col); // { isDark: true/false, type: PO_TL, PI_TL, PO_TR, PI_TR, PO_BL, PI_BL };
14971497

1498+
var nowDotScale = _htOption.dotScale;
14981499
if (eye) {
1500+
if (eye.type == 'AO') {
1501+
nowDotScale = _htOption.dotScaleAO;
1502+
} else if (eye.type == 'AI') {
1503+
nowDotScale = _htOption.dotScaleAI;
1504+
} else {
1505+
nowDotScale = 1;
1506+
}
1507+
14991508
// Is eye
15001509
bIsDark = eye.isDark;
15011510
var type = eye.type;
@@ -1508,32 +1517,52 @@
15081517
_oContext.strokeStyle = bIsDark ? eyeColorDark : _htOption.colorLight;
15091518
_oContext.fillStyle = bIsDark ? eyeColorDark : _htOption.colorLight;
15101519

1511-
_oContext.fillRect(nLeft, _htOption.titleHeight + nTop, nWidth, nHeight);
1520+
// _oContext.fillRect(nLeft, _htOption.titleHeight + nTop, nWidth, nHeight);
1521+
1522+
1523+
_oContext.fillRect(nLeft + nWidth * (1 - nowDotScale) / 2, _htOption.titleHeight +
1524+
nTop + nHeight * (1 -
1525+
nowDotScale) / 2, nWidth * nowDotScale, nHeight *
1526+
nowDotScale);
15121527

15131528
} else {
15141529
_oContext.lineWidth = 0;
15151530
_oContext.strokeStyle = bIsDark ? _htOption.colorDark : _htOption.colorLight;
15161531
_oContext.fillStyle = bIsDark ? _htOption.colorDark : _htOption.colorLight;
15171532

1518-
var nowDotScale = _htOption.dotScale;
1533+
if (_htOption.backgroundImage) {
1534+
1535+
if (_htOption.autoColor) {
1536+
_oContext.strokeStyle = bIsDark ? "rgba(0, 0, 0, .6)" :
1537+
"rgba(255, 255, 255, .7)";
1538+
_oContext.fillStyle = bIsDark ? "rgba(0, 0, 0, .6)" :
1539+
"rgba(255, 255, 255, .7)";
1540+
} else {
1541+
_oContext.strokeStyle = bIsDark ? _htOption.colorDark :
1542+
"rgba(0,0,0,0)";
1543+
_oContext.fillStyle = bIsDark ? _htOption.colorDark :
1544+
"rgba(0,0,0,0)";
1545+
_oContext.strokeStyle = _oContext.fillStyle;
1546+
}
1547+
1548+
} else {
1549+
_oContext.strokeStyle = _oContext.fillStyle;
1550+
1551+
1552+
}
1553+
15191554
if (row == 6) {
15201555
// Timing Pattern
1521-
nowDotScale = 1;
1522-
var timingHColorDark = _htOption.timing_H || _htOption.timing ||
1523-
_htOption.colorDark;
1524-
_oContext.fillStyle = bIsDark ? timingHColorDark : _htOption.colorLight;
1525-
_oContext.strokeStyle = _oContext.fillStyle;
1556+
nowDotScale = _htOption.dotScaleTiming_H;
1557+
15261558
_oContext.fillRect(nLeft + nWidth * (1 - nowDotScale) / 2, _htOption.titleHeight +
15271559
nTop + nHeight * (1 -
15281560
nowDotScale) / 2, nWidth * nowDotScale, nHeight *
15291561
nowDotScale);
15301562
} else if (col == 6) {
15311563
// Timing Pattern
1532-
nowDotScale = 1;
1533-
var timingVColorDark = _htOption.timing_V || _htOption.timing ||
1534-
_htOption.colorDark;
1535-
_oContext.fillStyle = bIsDark ? timingVColorDark : _htOption.colorLight;
1536-
_oContext.strokeStyle = _oContext.fillStyle;
1564+
nowDotScale = _htOption.dotScaleTiming_V;
1565+
15371566
_oContext.fillRect(nLeft + nWidth * (1 - nowDotScale) / 2, _htOption.titleHeight +
15381567
nTop + nHeight * (1 -
15391568
nowDotScale) / 2, nWidth * nowDotScale, nHeight *
@@ -1542,24 +1571,12 @@
15421571

15431572
if (_htOption.backgroundImage) {
15441573

1545-
if (_htOption.autoColor) {
1546-
_oContext.strokeStyle = bIsDark ? "rgba(0, 0, 0, .6)" :
1547-
"rgba(255, 255, 255, .7)";
1548-
_oContext.fillStyle = bIsDark ? "rgba(0, 0, 0, .6)" :
1549-
"rgba(255, 255, 255, .7)";
1550-
} else {
1551-
_oContext.strokeStyle = bIsDark ? _htOption.colorDark :
1552-
"rgba(0,0,0,0)";
1553-
_oContext.fillStyle = bIsDark ? _htOption.colorDark :
1554-
"rgba(0,0,0,0)";
1555-
_oContext.strokeStyle = _oContext.fillStyle;
1556-
}
15571574
_oContext.fillRect(nLeft + nWidth * (1 - nowDotScale) / 2,
15581575
_htOption.titleHeight + nTop + nHeight * (1 -
15591576
nowDotScale) / 2, nWidth * nowDotScale, nHeight *
15601577
nowDotScale);
15611578
} else {
1562-
_oContext.strokeStyle = _oContext.fillStyle;
1579+
15631580
_oContext.fillRect(nLeft + nWidth * (1 - nowDotScale) / 2,
15641581
_htOption.titleHeight + nTop + nHeight * (1 -
15651582
nowDotScale) / 2, nWidth * nowDotScale, nHeight *
@@ -1795,10 +1812,18 @@
17951812
colorLight: "#ffffff",
17961813
correctLevel: QRErrorCorrectLevel.H,
17971814

1798-
dotScale: 1, // Must be greater than 0, less than or equal to 1. default is 1
1815+
dotScale: 1, // For body block, must be greater than 0, less than or equal to 1. default is 1
1816+
1817+
dotScaleTiming: 1, // Dafault for timing block , must be greater than 0, less than or equal to 1. default is 1
1818+
dotScaleTiming_H: undefined, // For horizontal timing block, must be greater than 0, less than or equal to 1. default is 1
1819+
dotScaleTiming_V: undefined, // For vertical timing block, must be greater than 0, less than or equal to 1. default is 1
1820+
1821+
dotScaleA: 1, // Dafault for alignment block, must be greater than 0, less than or equal to 1. default is 1
1822+
dotScaleAO: undefined, // For alignment outer block, must be greater than 0, less than or equal to 1. default is 1
1823+
dotScaleAI: undefined, // For alignment inner block, must be greater than 0, less than or equal to 1. default is 1
17991824

18001825
quietZone: 0,
1801-
quietZoneColor: 'transparent',
1826+
quietZoneColor: "rgba(0,0,0,0)",
18021827

18031828
title: "",
18041829
titleFont: "bold 16px Arial",
@@ -1883,6 +1908,66 @@
18831908
)
18841909
this._htOption.dotScale = 1;
18851910
}
1911+
1912+
if (this._htOption.dotScaleTiming < 0 || this._htOption.dotScaleTiming > 1) {
1913+
console.warn(this._htOption.dotScaleTiming +
1914+
" , is invalidate, dotScaleTiming must greater than 0, less than or equal to 1, now reset to 1. "
1915+
)
1916+
this._htOption.dotScaleTiming = 1;
1917+
}
1918+
if (this._htOption.dotScaleTiming_H) {
1919+
if (this._htOption.dotScaleTiming_H < 0 || this._htOption.dotScaleTiming_H > 1) {
1920+
console.warn(this._htOption.dotScaleTiming_H +
1921+
" , is invalidate, dotScaleTiming_H must greater than 0, less than or equal to 1, now reset to 1. "
1922+
)
1923+
this._htOption.dotScaleTiming_H = 1;
1924+
}
1925+
} else {
1926+
this._htOption.dotScaleTiming_H = this._htOption.dotScaleTiming;
1927+
}
1928+
1929+
if (this._htOption.dotScaleTiming_V) {
1930+
if (this._htOption.dotScaleTiming_V < 0 || this._htOption.dotScaleTiming_V > 1) {
1931+
console.warn(this._htOption.dotScaleTiming_V +
1932+
" , is invalidate, dotScaleTiming_V must greater than 0, less than or equal to 1, now reset to 1. "
1933+
)
1934+
this._htOption.dotScaleTiming_V = 1;
1935+
}
1936+
} else {
1937+
this._htOption.dotScaleTiming_V = this._htOption.dotScaleTiming;
1938+
}
1939+
1940+
1941+
1942+
if (this._htOption.dotScaleA < 0 || this._htOption.dotScaleA > 1) {
1943+
console.warn(this._htOption.dotScaleA +
1944+
" , is invalidate, dotScaleA must greater than 0, less than or equal to 1, now reset to 1. "
1945+
)
1946+
this._htOption.dotScaleA = 1;
1947+
}
1948+
if (this._htOption.dotScaleAO) {
1949+
if (this._htOption.dotScaleAO < 0 || this._htOption.dotScaleAO > 1) {
1950+
console.warn(this._htOption.dotScaleAO +
1951+
" , is invalidate, dotScaleAO must greater than 0, less than or equal to 1, now reset to 1. "
1952+
)
1953+
this._htOption.dotScaleAO = 1;
1954+
}
1955+
} else {
1956+
this._htOption.dotScaleAO = this._htOption.dotScaleA;
1957+
}
1958+
if (this._htOption.dotScaleAI) {
1959+
if (this._htOption.dotScaleAI < 0 || this._htOption.dotScaleAI > 1) {
1960+
console.warn(this._htOption.dotScaleAI +
1961+
" , is invalidate, dotScaleAI must greater than 0, less than or equal to 1, now reset to 1. "
1962+
)
1963+
this._htOption.dotScaleAI = 1;
1964+
}
1965+
} else {
1966+
this._htOption.dotScaleAI = this._htOption.dotScaleA;
1967+
}
1968+
1969+
1970+
18861971
if (this._htOption.backgroundImageAlpha < 0 || this._htOption.backgroundImageAlpha > 1) {
18871972
console.warn(this._htOption.backgroundImageAlpha +
18881973
" , is invalidate, backgroundImageAlpha must between 0 and 1, now reset to 1. ")

0 commit comments

Comments
 (0)