Determinar la distancia desplazada en la página web para el desplazamiento sincronizado de la vista de Paper.js.

12 Jun, 2023 Programación 0

Tengo un canvas con posición absoluta encima de una página web. El canvas tiene algunos elementos creados utilizando Paper.js. Quiero que el canvas (o la vista) se mueva en sincronía con el desplazamiento de la página web.

El canvas cubre toda la pantalla (1920 x 1080) y no la página web (1920 x longitud variable). Por lo tanto, simplemente desplazar la posición fija del canvas no funciona. Ya no está superpuesto en toda la pantalla.

Más tarde, descubrí acerca de las vistas en Paper.js y puedo usar la siguiente línea para desplazar la vista:

project.view.scrollBy(new Point(0, 450));

El problema es que no puedo averiguar el valor que necesito poner en el lugar de 450 para que el desplazamiento siempre esté sincronizado.

Utilizo el siguiente JavaScript para animar la acción de desplazamiento en la página web cada vez que se presionan las teclas de arriba y abajo:

$(“section.scrollable”).animate({scrollTop : $(“section.scrollable”).scrollTop() + 300 })

Sin embargo, poner 300 en los valores de scrollBy no mueve el canvas y la página web en una sincronización adecuada tampoco.

Este bolígrafo es un ejemplo muy minimalista para mostrar mi problema. Es posible que prefieras verlo en modo de depuración.

Puedes arrastrar sobre el canvas para crear líneas naranjas.

Hay tres encabezados y tres líneas correspondientes dibujadas en un canvas superpuesto. El canvas es de 1920 píxeles de ancho y 1080 píxeles de alto.

El tercer encabezado cae debajo de 1080 píxeles, por lo que su línea no es visible en el canvas. Sin embargo, se vuelve visible cuando desplazo la vista dentro de Paper utilizando la siguiente línea:

project.view.scrollBy(new Point(0, 600));

Aquí está mi problema con las siguientes limitaciones:

La posición del canvas tiene que permanecer fija. Por lo tanto, no se desplazará con el resto del documento.
Sin embargo, la vista de Paper.js tiene que desplazarse en sincronía con el documento para que las líneas, caminos y otros elementos no cambien sus posiciones relativas con respecto a la página web. Por ejemplo, las líneas siguen estando debajo de los mismos encabezados.

// Obtener la posición del lienzo var canvasPos = $('#canvas').offset().top; // Obtener la posición superior actual del documento var docTop = $(document).scrollTop(); // Calcular la diferencia entre la posición del lienzo y la parte superior del documento var diff = canvasPos - docTop; // Mover la vista de Paper.js por la misma cantidad project.view.scrollBy(new Point(0, diff));

// Función para sincronizar la vista de Paper.js con el desplazamiento de la página function syncView() { // Obtener la posición del lienzo var canvasPos = $('#canvas').offset().top; // Obtener la posición superior actual del documento var docTop = $(document).scrollTop(); // Calcular la diferencia entre la posición del lienzo y la parte superior del documento var diff = canvasPos - docTop; // Mover la vista de Paper.js por la misma cantidad project.view.scrollBy(new Point(0, diff)); } // Llamar a syncView() cuando se desplace el documento $(document).scroll(function() { syncView(); }); // Llamar a syncView() cuando se redimensione el lienzo $('#canvas').resize(function() { syncView(); });

Answer

davy.ai

June 12, 2023 at 3:11 am
Solución para sincronizar la vista de Paper.js con el desplazamiento de la página

Para sincronizar la vista de Paper.js con el desplazamiento de la página, necesitamos calcular la diferencia entre la posición del lienzo y la parte superior del documento. Podemos utilizar esta diferencia para determinar la cantidad por la que necesitamos mover la vista de Paper.js de manera que se mantenga sincronizada con el desplazamiento de la página.

Aquí está el código que hace esto:
```
// Obtener la posición del lienzo
var canvasPos = $('#canvas').offset().top;

// Obtener la posición superior actual del documento
var docTop = $(document).scrollTop();

// Calcular la diferencia entre la posición del lienzo y la parte superior del documento
var diff = canvasPos - docTop;

// Mover la vista de Paper.js por la misma cantidad
project.view.scrollBy(new Point(0, diff));
```
Podemos poner este código dentro de una función y llamarla cada vez que se desplace el documento o se redimensione el lienzo. Aquí está el código completo que hace esto:
```
// Función para sincronizar la vista de Paper.js con el desplazamiento de la página
function syncView() {
  // Obtener la posición del lienzo
  var canvasPos = $('#canvas').offset().top;

  // Obtener la posición superior actual del documento
  var docTop = $(document).scrollTop();

  // Calcular la diferencia entre la posición del lienzo y la parte superior del documento
  var diff = canvasPos - docTop;

  // Mover la vista de Paper.js por la misma cantidad
  project.view.scrollBy(new Point(0, diff));
}

// Llamar a syncView() cuando se desplace el documento
$(document).scroll(function() {
  syncView();
});

// Llamar a syncView() cuando se redimensione el lienzo
$('#canvas').resize(function() {
  syncView();
});
```
Ahora, la vista de Paper.js se mantiene sincronizada con el desplazamiento de la página incluso cuando la posición del lienzo está fija.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Determinar la distancia desplazada en la página web para el desplazamiento sincronizado de la vista de Paper.js.

Answer

davy.ai