Handle different aspect ratio images and screens. Add additional counts on fields and thicken lines. Resolves #19
This commit is contained in:
parent
9b2ed018bf
commit
ac1da17b8d
app
|
@ -31,8 +31,8 @@
|
||||||
display: none;
|
display: none;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
top: 50%;
|
||||||
top: 0;
|
transform: translate(-50%,-50%);
|
||||||
}
|
}
|
||||||
#can.show{
|
#can.show{
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -116,26 +116,39 @@
|
||||||
}
|
}
|
||||||
async function onField (evt, arg) {
|
async function onField (evt, arg) {
|
||||||
console.log('field guide')
|
console.log('field guide')
|
||||||
console.dir(arg)
|
|
||||||
const can = document.getElementById('can')
|
const can = document.getElementById('can')
|
||||||
const dpr = window.devicePixelRatio || 1
|
const dpr = window.devicePixelRatio || 1
|
||||||
|
const screen = window.outerWidth / window.outerHeight
|
||||||
let ctx;
|
let ctx;
|
||||||
if (!can.classList.contains('show')) {
|
if (!can.classList.contains('show')) {
|
||||||
can.classList.add('show')
|
can.classList.add('show')
|
||||||
}
|
}
|
||||||
if (arg.ratio) {
|
if (arg.ratio) {
|
||||||
|
if (arg.ratio < screen) {
|
||||||
can.width = (window.innerHeight * arg.ratio) * dpr
|
can.width = (window.innerHeight * arg.ratio) * dpr
|
||||||
|
can.height = window.innerHeight * dpr
|
||||||
} else {
|
} else {
|
||||||
can.width =window.innerWidth * dpr
|
can.width =window.innerWidth * dpr
|
||||||
|
can.height = (window.innerWidth / arg.ratio) * dpr
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
can.width = window.innerWidth * dpr
|
||||||
can.height = window.innerHeight * dpr
|
can.height = window.innerHeight * dpr
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
if (arg.ratio) {
|
if (arg.ratio) {
|
||||||
|
if (arg.ratio < screen) {
|
||||||
can.style.width = `${window.innerHeight * arg.ratio}px`
|
can.style.width = `${window.innerHeight * arg.ratio}px`
|
||||||
|
can.style.height = `${window.innerHeight}px`
|
||||||
|
} else {
|
||||||
|
can.style.width = `${window.inneWidth}px`
|
||||||
|
can.style.height = `${window.innerWidth / arg.ratio}px`
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
can.style.width = `${window.innerWidth}px`
|
can.style.width = `${window.innerWidth}px`
|
||||||
}
|
|
||||||
can.style.height = `${window.innerHeight}px`
|
can.style.height = `${window.innerHeight}px`
|
||||||
|
}
|
||||||
|
|
||||||
ctx = can.getContext('2d')
|
ctx = can.getContext('2d')
|
||||||
ctx.scale(dpr, dpr)
|
ctx.scale(dpr, dpr)
|
||||||
|
@ -156,7 +169,9 @@
|
||||||
const wsec = w / count
|
const wsec = w / count
|
||||||
const hsec = h / count
|
const hsec = h / count
|
||||||
const spacer = 12
|
const spacer = 12
|
||||||
const fontSize = 18;
|
const fontSize = 18
|
||||||
|
|
||||||
|
ctx.lineWidth = 2
|
||||||
|
|
||||||
ctx.moveTo(w / 2, 0)
|
ctx.moveTo(w / 2, 0)
|
||||||
ctx.lineTo(w / 2, h)
|
ctx.lineTo(w / 2, h)
|
||||||
|
@ -173,12 +188,19 @@
|
||||||
ctx.lineTo(w - (wsec * i), hsec * i)
|
ctx.lineTo(w - (wsec * i), hsec * i)
|
||||||
ctx.stroke()
|
ctx.stroke()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ctx.lineWidth = 1
|
||||||
|
|
||||||
ctx.font = `${fontSize}px Arial`
|
ctx.font = `${fontSize}px Arial`
|
||||||
for (let i = 0; i < half; i++) {
|
for (let i = 0; i < half; i++) {
|
||||||
|
//left count
|
||||||
ctx.fillText(`${(half - i)}`, (wsec * i) + spacer, (h / 2) - spacer)
|
ctx.fillText(`${(half - i)}`, (wsec * i) + spacer, (h / 2) - spacer)
|
||||||
//ctx.fillText(`${(half - i)}`, (w - (wsec * i)) - spacer, (h / 2) - spacer)
|
//right count
|
||||||
|
ctx.fillText(`${(half - i)}`, (w - (wsec * i)) - (spacer * 2), (h / 2) + (spacer * 2))
|
||||||
|
//up count
|
||||||
ctx.fillText(`${(half - i)}`, (w / 2) + spacer, (hsec * i) + spacer + (fontSize / 2) )
|
ctx.fillText(`${(half - i)}`, (w / 2) + spacer, (hsec * i) + spacer + (fontSize / 2) )
|
||||||
//ctx.fillText(`${(half - i)}`, (w / 2) + spacer, (h - (hsec * i)) - spacer)
|
//down count
|
||||||
|
ctx.fillText(`${(half - i)}`, (w / 2) - (spacer * 2), (h - (hsec * i)) - spacer)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
async function onDigital (event, arg) {
|
async function onDigital (event, arg) {
|
||||||
|
|
Loading…
Reference in New Issue