Spaces:
Running
Running
| const board = document.getElementById("board"); | |
| const parent = board.parentElement; | |
| let transforms = { x: 0, y: 0, scale: 1 }; | |
| const panzoom = Panzoom(board, { | |
| startScale: transforms.scale, | |
| startX: transforms.x, | |
| startY: transforms.y, | |
| canvas: true, | |
| }); | |
| parent.addEventListener("wheel", panzoom.zoomWithWheel); | |
| // No function bind needed | |
| // This demo binds to shift + wheel | |
| parent.addEventListener("wheel", function (event) { | |
| if (!event.shiftKey) return; | |
| panzoom.zoomWithWheel(event); | |
| }); | |
| board.addEventListener("panzoomchange", (event) => { | |
| transforms = event.detail; // => { x: 0, y: 0, scale: 1 } | |
| }); | |
| setTimeout(() => { | |
| html2canvas(board, { useCORS: true }).then((canvas) => { | |
| document.body.appendChild(canvas); | |
| }); | |
| }, 4000); | |