Created
September 30, 2019 21:20
-
-
Save branflake2267/73ac0f9c1b26bce1627667b9b720112e to your computer and use it in GitHub Desktop.
Canvas scrolling poc
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Canvas Scrolling</title> | |
| <style> | |
| </style> | |
| </head> | |
| <body> | |
| <style> | |
| canvas { | |
| border: 1px solid gray; | |
| padding: 2px; | |
| /* cursor: pointer; */ | |
| } | |
| </style> | |
| <canvas id="canvas" width="20px" height="512px"></canvas> | |
| <span>position: </span> | |
| <span id="position">0 </span> | |
| <span> </span> | |
| <span>value: </span> | |
| <span id="value">0 </span> | |
| <script> | |
| var canvas = document.getElementById('canvas'); | |
| var ctx = canvas.getContext('2d'); | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| var width = 20; | |
| var height = 500; | |
| var scrollbarSize = 20; | |
| var max = 100; | |
| var drag = false; | |
| var value = 0; | |
| var positionY = 0; | |
| function drawScrollbarInFrame() { | |
| console.log("drawScrollbarInFrame: positionY=" + positionY); | |
| window.requestAnimationFrame(drawScrollbar); | |
| } | |
| function drawScrollbarByValue(value) { | |
| positionY = ((height - scrollbarSize) / max) * value; | |
| drawScrollbarInFrame(); | |
| } | |
| function drawScrollbar() { | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| ctx.fillStyle = '#aaa'; | |
| ctx.fillRect(0, positionY, width, scrollbarSize); | |
| drawPosition(); | |
| } | |
| function drawPosition() { | |
| value = Math.ceil(max / height * positionY); | |
| var positionEl = document.getElementById('position'); | |
| positionEl.innerHTML = positionY; | |
| var valueEl = document.getElementById('value'); | |
| valueEl.innerHTML = value; | |
| } | |
| function onMouseDown(event) { | |
| //console.log("mouseDown"); | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| drag = true; | |
| } | |
| function onMouseUp(event) { | |
| console.log("mouseUp"); | |
| drag = false; | |
| } | |
| function onMouseMove(event) { | |
| if (!drag) { | |
| return; | |
| } | |
| positionY = event.pageY; | |
| drawScrollbarInFrame(); | |
| } | |
| function onMouseWheel(event) { | |
| //console.log("mouseWheel=", event); | |
| // Invert can be done here? | |
| var delta = 1; | |
| if (event.deltaY < 0) { | |
| delta = 1; | |
| } else { | |
| delta *= -1; | |
| } | |
| positionY = positionY - delta; | |
| drawScrollbarInFrame(); | |
| return false; | |
| } | |
| canvas.addEventListener('mousedown', onMouseDown, false); | |
| canvas.addEventListener('mouseup', onMouseUp, false); | |
| canvas.addEventListener('mousemove', onMouseMove, false); | |
| canvas.addEventListener('wheel', onMouseWheel, false); | |
| // initial draw with value of 0 | |
| drawScrollbarByValue(0); | |
| </script> | |
| </body> | |
| </html> |
Author
branflake2267
commented
Sep 30, 2019
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment