Tengo un lienzo absolutamente posicionado sobre una página web. El lienzo tiene algunos elementos creados con Paper.js. Quiero que el lienzo (o la vista) se mueva en sincronía con el desplazamiento de la página web.
El lienzo cubre toda la pantalla (1920 x 1080) no la página web (1920 x longitud variable). Por lo tanto, simplemente cambiar la posición fija del lienzo no funciona. Ya no se superpone en toda la pantalla.
Más tarde, descubrí vistas en Paper.js y puedo usar la siguiente línea para desplazarme por la vista:
project.view.scrollBy(new Point(0, 450));El problema es que no puedo averiguar el valor que necesito poner en 450 para que el desplazamiento esté siempre sincronizado.
Utilizo el siguiente JavaScript para animar la acción de desplazamiento en la página web cuando se presionan las teclas arriba y abajo:
$("section.scrollable").animate({scrollTop : $("section.scrollable").scrollTop() + 300 }) Sin embargo, poner 300 en los valores de scrollBy tampoco mueve el lienzo y la página web en la sincronización adecuada.
Este bolígrafo es un ejemplo mínimo para mostrar mi problema. Es posible que prefiera verlo en modo de depuración .
Puede arrastrar sobre el lienzo para crear líneas naranjas.
Hay tres encabezados y tres líneas correspondientes dibujadas en un lienzo superpuesto. El lienzo tiene 1920 px de ancho y 1080 px de alto.
El tercer encabezado cae por debajo de 1080 px, por lo que su línea no es visible en el lienzo. Sin embargo, se vuelve visible cuando me desplazo dentro de la vista Papel usando la siguiente línea:
project.view.scrollBy(new Point(0, 600));Aquí está mi problema con las siguientes restricciones:
Debe escuchar el evento de desplazamiento y cada vez que suceda, actualice su escena y posición de paper.js.
En lugar de usar la vista, descubrí que usar la capa activa era más conveniente, pero teóricamente podría hacer lo mismo con la vista.
Aquí hay un violín simple que debería ponerlo en la pista.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Debug Paper.js</title> <script src="https://unpkg.com/acorn"></script> <script src="https://unpkg.com/paper"></script> <style> html, body { margin : 0; height : 100%; } canvas { position : fixed; top : 0; left : 0; width : 100vw; height : 100vh; } section { max-width : 500px; margin : auto; } </style> </head> <body> <section> <div> <h1>title 1</h1> <p>...</p> </div> <div> <h1>title 2</h1> <p>...</p> </div> </section> <canvas id="canvas" resize></canvas> <script> paper.setup('canvas'); new paper.Path.Circle({ center: paper.view.center, radius: 50, fillColor: 'orange' }); const originalY = paper.view.center.y; const update = () => { const yOffset = document.scrollingElement.scrollTop; paper.view.center.y = originalY - yOffset; }; window.addEventListener('scroll', update); </script> </body> </html>