Panzoom: El zoom de pellizco aleja la imagen del centro de la pantalla

Gracias por abrir un tema. Probé la demo en iOS y Android y no pude reproducirla. Enumeró los navegadores de escritorio, pero el zoom de pellizco es principalmente para dispositivos móviles (aunque algunos dispositivos tienen un mouse y una pantalla táctil). Puede ser útil saber qué dispositivo está utilizando, aunque probablemente no pueda probarlo.

No hay mucho que pueda hacer sin poder reproducir el problema. Si profundiza y encuentra que un cambio de código en Panzoom lo soluciona (o que un caso de prueba diferente además de la demostración reproduce el problema), comente aquí y consideraré un parche.

Hola señor Willison;

Gracias por su respuesta. Utilicé las versiones de escritorio y móvil de
dichos navegadores. Usé un Redmi Note 8T y un Galaxy 8 para probar esto.

Para ver este problema, ¿quizás puedas echarle un vistazo a la demo que estoy desarrollando?
Simplemente escriba un nombre (no se almacena nada, es solo un juego de niños) y haga clic en
en el botón "Exploració lliure"; será redirigido a Panzoomed
imagen. Como verá, el zoom con la rueda del mouse funciona bien, pero el zoom con los dedos (y
en realidad los botones panzoom.zoomIn() y panzoom.zoomOut() también mueven el
imagen.

http://bake250.isdeveloping.com/objectiuexplora/solsticidelspirineus/

Estoy muy agradecido por su ayuda, y disculpe las molestias.

Atentamente;

Jorge Sánchez Blanco

El lun., 21 sept. 2020 a las 19:45, Timmy Willison (<
[email protected]>) escribió:

Gracias por abrir un tema. Probé la demostración
https://timmywil.com/panzoom/demo en iOS y Android y no pudo
reproducir. Enumeró los navegadores de escritorio, pero el zoom de pellizco es principalmente para
móvil (aunque algunos dispositivos tienen un mouse y una pantalla táctil). Que podría
ser útil saber qué dispositivo está utilizando, aunque probablemente sería
incapaz de probarlo.

No hay mucho que pueda hacer sin poder reproducir el problema. Si
profundiza y descubre que un cambio de código en Panzoom lo soluciona (o que un
otro caso de prueba además de la demostración reproduce el problema), por favor
comenta aquí y consideraré un parche.

—
Usted está recibiendo esto porque usted fue el autor del hilo.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/timmywil/panzoom/issues/512#issuecomment-696267620 ,
o darse de baja
https://github.com/notifications/unsubscribe-auth/AOF4EAOK6YQVAHINOAQ3JZTSG6GMRANCNFSM4RUT4P7A
.

Tengo el mismo problema. Parece que el punto focal no se calculó correctamente y está completamente en la parte inferior.

@jsblanco Ya veo. Panzoom se basa en transform-origin: 50% 50% , que centra la animación en el centro de la ventana gráfica en lugar de en el centro de la imagen, que sería más bajo en este caso. Mueve la imagen debido a la configuración contain: outside para evitar que la imagen vaya demasiado hacia abajo. Creo que esto se puede arreglar llamando a zoomToPoint o usando zoom con la opción focal y encontrando el punto en la ventana gráfica que es en realidad el centro de la imagen. ¿Tiene sentido?

Tal vez podría hacer algo como esto por defecto cuando se establece contain: outside .

@rmatec ¿También estás usando contain: outside ?

No estoy usando la opción de contener. En mi caso, parece que el punto focal está en la parte inferior central. El pellizco hacia adentro o hacia afuera se realiza en relación con ese punto.

@rmatec Creo que debe haber alguna opción en juego, ya que no veo este comportamiento en las demostraciones. ¿Hay otra opción que esté configurando?

Estoy usando lo siguiente para inicializar Panzoom.

const panzoomConfig = { minScale: 1, maxScale: 2, step: 0.5, duration: 200 };

Funciona perfectamente bien en computadoras de escritorio, pero por alguna razón no funciona en dispositivos móviles.

Ok, tu caso parece que puede ser diferente. ¿Podrías reproducir en https://jsbin.com o https://codepen.io y hacer un nuevo ticket? Aquí hay una plantilla que se puede clonar https://jsbin.com/dibofogini/1/edit?html ,js,output.

Servirá. Gracias.

Por alguna razón, al usar la opción focal, la imagen aparece cerca del
abajo a la derecha, y no se puede hacer más zoom, ni para acercar ni para alejar.
¿Quizás estoy haciendo algo mal? ¿Tengo que pasar algún parámetro específico?
a panzoom.zoomIn() y .zoomOut() para indicar el punto focal, o simplemente
incluirlo en la declaración inicial de panzoom debería ser suficiente?

Por lo que vale, probé los siguientes métodos para obtener el foco
punto. También intenté poner números en bruto.

clientX: window.innerWidth /2,
clientY: window.innerHeight/2

clientX: document.documentElement.clientWidth/2,
clientY: document.documentElement.clientHeight/2

Eliminar contiene: afuera por completo solo genera una imagen en negro.

El mar., 22 sept. 2020 a las 15:59, Timmy Willison (<
[email protected]>) escribió:

@jsblanco https://github.com/jsblanco Ya veo. Panzoom se basa en transform-origin:
50% 50%, que centra la animación en el centro de la ventana gráfica en lugar
que en el centro de la imagen, que sería más bajo en este caso. Eso
mueve la imagen debido a la configuración de contener: fuera para evitar que
imagen de ir demasiado abajo. Creo que esto se puede arreglar llamando
zoomToPoint o usando zoom con la opción focal en su lugar y encontrando
el punto en la ventana gráfica que en realidad es el centro de la imagen. Lo hace
¿eso tiene sentido?

Tal vez podría hacer algo como esto por defecto cuando contiene: fuera
Está establecido.

@rmatec https://github.com/rmatec ¿También estás usando contener: fuera?

—
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/timmywil/panzoom/issues/512#issuecomment-696740708 ,
o darse de baja
https://github.com/notifications/unsubscribe-auth/AOF4EANBQXE5TDJOZNTBN6LSHCUVXANCNFSM4RUT4P7A
.

@jsblanco Lo siento, es más complicado que eso. La forma de hacerlo sería encontrar el centro de la imagen y trasladarlo a su punto en la ventana principal de panzoom. Luego pasaría eso como la opción focal, y debería calcularse cada vez que llame al zoom. Sin embargo, déjame ver si puedo elaborar un ejemplo para ti. Eso arreglaría zoomIn / zoomOut .

Dicho esto, esto no cambiaría el comportamiento del zoom de pellizco. Podría decirse que está haciendo lo correcto, ya que hacer zoom en ciertos puntos choca contra contain: outside . No estoy seguro de la solución allí, excepto quizás para no permitir el zoom si la imagen necesita moverse para mantenerla en la ventana gráfica correctamente.

Ok, tu caso parece que puede ser diferente. ¿Podrías reproducir en https://jsbin.com o https://codepen.io y hacer un nuevo ticket? Aquí hay una plantilla que se puede clonar https://jsbin.com/dibofogini/1/edit?html ,js,output.

Creé https://github.com/timmywil/panzoom/issues/513 para mi caso específico. Hay un enlace a JSBin que muestra el problema.

Puedo reproducir este problema si dejo activado "animar: verdadero".
Este problema no aparece en "animar: falso". Cloné su plantilla @timmywil para reproducir ese problema:

https://jsbin.com/pemoveyeri/1/editar?

(He implementado el detector de eventos de la rueda para hacer zoom directamente: si se desplaza lo suficientemente rápido, se producirá un cambio de posición).

De acuerdo, moví mi problema al n. ° 515 porque, si bien el problema es el mismo, tiene una configuración diferente.

Hola;

Perdona por tardar en responder. No creo que tenga que ver con container="outside"; Lo acabo de quitar y sigue exhibiendo el mismo comportamiento, aunque no tan intensamente. Sin embargo, el div panzoom y la imagen tienen un tamaño fijo independiente del de la calle; ¿podría ser eso parte del problema?

Gracias

@jsblanco La solución debería ser la misma.

Hola, iba a abrir un nuevo problema sobre el zoom de la rueda alejándose del centro, pero revisé este y pensé que estaba lo suficientemente relacionado. Los siguientes son mis hallazgos y solución. Tenga en cuenta que solo he probado en navegadores en una MacBook usando el trackpad.

Me doy cuenta de que para la demostración de zoom del punto focal , el centro flota hacia la parte superior izquierda al hacer zoom en Safari, Firefox. Obtengo el mismo comportamiento incluso en Chrome, pero solo cuando el inspector web está abierto.

Así que comencé a investigarlo y mi sospecha es que el evento de la rueda del mouse se activa con demasiada frecuencia y las cosas no se actualizan correctamente debido a la naturaleza asíncrona de Panzoom . Pensé que si trato de acelerar la frecuencia del zoom, podría ayudar y, efectivamente, parece "funcionar". Puede verlo en acción aquí: https://jsbin.com/joliduwulo/1/edit?html,js,output .

La advertencia es que el zoom parecería menos suave. En este ejemplo, lo estoy limitando a un máximo de zoom cada 20 ms, pero cuando estaba probando con SVG grandes, especialmente en Firefox, necesitaba configurarlo en alrededor de 50 ms para que no perdiera el punto focal.

@timmywil , por favor, avíseme si quiere que abra un nuevo problema de todos modos. Esto parece un truco, pero resuelve el problema para mí. Si cree que vale la pena explorar la solución, me encantaría ayudar a contribuir.

+1 en la capacidad de centrarse en el elemento panzoom en lugar de la ventana gráfica

Reemplace la función de movimiento en panzoom.ts:426

mover función (evento: PointerEvent) {
si (
!esPanorámica ||
origX === indefinido ||
origen === indefinido ||
startClientX === indefinido ||
startClientY === indefinido
) {
regreso
}
addPointer(punteros, evento)
const actual = getMiddle(punteros)
if (punteros.longitud > 1) {
// Usa la distancia entre los primeros 2 punteros
// para determinar la escala actual
// previene el problema del zoom en el móvil
if (distanciainicial === 0) {
startDistance = getDistance(punteros);
}
const diff = getDistance(punteros) - startDistance
const toScale = constrainScale((diff * options.step) / 80 + startScale).escala
zoomToPoint(toScale, actual)
} demás {
// se agregó otra condición para evitar el error del punto focal del zoom móvil
sartén(
origX + (current.clientX - startClientX) / escala,
origY + (current.clientY - startClientY) / scale,
{
animado: falso
}
);
}
}