DarkCat09/qr-mask
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add highlight for id, align, timing patterns

Browse source
This commit is contained in:
DarkCat09 2024-07-11 18:39:08 +04:00
parent f911c7bd2a
commit 4931cdc097
Signed by: DarkCat09
GPG key ID: 0A26CD5B3345D6E3
1 changed files with 91 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
script.js
View file

@ -3,6 +3,50 @@ function intDiv(a, b) {
return ~~(a / b)
}
let getCodeVersion
const alignmentCoords = [
[6, 18],
[6, 22],
[6, 26],
[6, 30],
[6, 34],
[6, 22, 38],
[6, 24, 42],
[6, 26, 46],
[6, 28, 50],
[6, 30, 54],
[6, 32, 58],
[6, 34, 62],
[6, 26, 46, 66],
[6, 26, 48, 70],
[6, 26, 50, 74],
[6, 30, 54, 78],
[6, 30, 56, 82],
[6, 30, 58, 86],
[6, 34, 62, 90],
[6, 28, 50, 72, 94],
[6, 26, 50, 74, 98],
[6, 30, 54, 78, 102],
[6, 28, 54, 80, 106],
[6, 32, 58, 84, 110],
[6, 30, 58, 86, 114],
[6, 34, 62, 90, 118],
[6, 26, 50, 74, 98, 122],
[6, 30, 54, 78, 102, 126],
[6, 26, 52, 78, 104, 130],
[6, 30, 56, 82, 108, 134],
[6, 34, 60, 86, 112, 138],
[6, 30, 58, 86, 114, 142],
[6, 34, 62, 90, 118, 146],
[6, 30, 54, 78, 102, 126, 150],
[6, 24, 50, 76, 102, 128, 154],
[6, 28, 54, 80, 106, 132, 158],
[6, 32, 58, 84, 110, 136, 162],
[6, 26, 54, 82, 110, 138, 166],
[6, 30, 58, 86, 114, 142, 170],
]
addEventListener('DOMContentLoaded', () => {
const canvas = document.getElementById("canvas")
const ctx = canvas.getContext("2d")
@ -24,6 +68,8 @@ addEventListener('DOMContentLoaded', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = "black"
for (let row = 0; row < size; row++) {
for (let col = 0; col < size; col++) {
if (eval(mask) == 0) {
@ -31,6 +77,50 @@ addEventListener('DOMContentLoaded', () => {
}
}
}
const idSize = 8 * scale
{ // finder pattern
ctx.fillStyle = "rgba(224, 63, 102, 0.5)"
ctx.fillRect(0, 0, idSize, idSize)
ctx.fillRect(canvas.width - idSize, 0, idSize, idSize)
ctx.fillRect(0, canvas.height - idSize, idSize, idSize)
}
const ver = getCodeVersion()
if (ver > 1) { // alignment pattern
ctx.fillStyle = "rgba(209, 63, 224, 0.5)"
const alignSize = 5 * scale
const coords = alignmentCoords[ver - 2] // array begins with version 2
const len = coords.length
for (let i = 0; i < len; i++) {
for (let j = 0; j < len; j++) {
const row = coords[i], col = coords[j]
if (row < 8 && col < 8 || row < 8 && col > size - 8 || row > size - 8 && col < 8) {
// do not overlap with finder pattern
continue
}
ctx.fillRect((row - 2) * scale, (col - 2) * scale, alignSize, alignSize)
}
}
}
{ // timing pattern
ctx.fillStyle = "rgba(76, 63, 224, 0.5)"
const idEndPos = 6 * scale
const betweenIds = canvas.width - idSize * 2
ctx.fillRect(idSize, idEndPos, betweenIds, scale)
ctx.fillRect(idEndPos, idSize, scale, betweenIds)
}
{ // format info
// TODO
}
})
{ // Choose best scale for screen height
@ -45,7 +135,7 @@ addEventListener('DOMContentLoaded', () => {
const MIN_VER = 1
const MAX_VER = 40
const getCodeVersion = () => {
getCodeVersion = () => {
const size = options.size.value
return Math.floor((size - MICRO_4) / DIFF)
}