You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.3 KiB
JavaScript
52 lines
1.3 KiB
JavaScript
function renderGridLinesCanvas($canvas, [rows, cols]) {
|
|
$canvas.width = $canvas.offsetWidth * 2
|
|
$canvas.height = $canvas.offsetHeight * 2
|
|
|
|
const g = $canvas.getContext('2d')
|
|
const width = $canvas.width / 2
|
|
const height = $canvas.height / 2
|
|
g.scale(2, 2)
|
|
|
|
g.strokeStyle = '#ddd'
|
|
g.lineWidth = 2
|
|
g.setLineDash([4, 4])
|
|
|
|
for (let i = 0; i < cols + 1; i++) {
|
|
const x = 2 + ((width - 4) / cols) * i
|
|
g.beginPath()
|
|
g.moveTo(x, 0)
|
|
g.lineTo(x, height)
|
|
g.stroke()
|
|
}
|
|
|
|
for (let j = 0; j < rows + 1; j++) {
|
|
const y = 2 + ((height - 4) / rows) * j
|
|
g.beginPath()
|
|
g.moveTo(0, y)
|
|
g.lineTo(width, y)
|
|
g.stroke()
|
|
}
|
|
}
|
|
|
|
export function createGridLineCanvas($roomGrid) {
|
|
const $canvas = document.createElement('canvas')
|
|
$roomGrid.append($canvas)
|
|
|
|
$canvas.style.position = 'absolute'
|
|
$canvas.style.inset = '0'
|
|
$canvas.style.width = '100%'
|
|
$canvas.style.height = '100%'
|
|
$canvas.style.zIndex = '-1'
|
|
|
|
const [rows, cols] = getComputedStyle($roomGrid)
|
|
.getPropertyValue('aspect-ratio')
|
|
.split('/')
|
|
.reverse()
|
|
.map(s => parseInt(s))
|
|
|
|
const render = () => renderGridLinesCanvas($canvas, [rows, cols])
|
|
|
|
window.addEventListener('resize', render)
|
|
requestAnimationFrame(render)
|
|
}
|