Panzoom: O zoom de pinça afasta a imagem do centro da tela

Obrigado por abrir um problema. Tentei a demonstração no iOS e Android e não consegui reproduzir. Você listou navegadores de desktop, mas o zoom de pinça é principalmente para dispositivos móveis (embora alguns dispositivos tenham um mouse e uma tela sensível ao toque). Pode ser útil saber qual dispositivo você está usando, mesmo que eu provavelmente não consiga testá-lo.

Não há muito que eu possa fazer sem poder reproduzir o problema. Se você se aprofundar e descobrir que uma alteração de código no Panzoom o corrige (ou que um caso de teste diferente da demonstração reproduz o problema), por favor comente aqui e considerarei um patch.

Olá, Sr. Willison;

Obrigado por sua resposta. Eu usei as versões desktop e móvel do
ditos navegadores. Eu usei um Redmi Note 8T e um Galaxy 8 para testar isso.

Para ver esse problema, talvez você possa dar uma olhada na demonstração que estou desenvolvendo?
Basta digitar um nome (nada é armazenado, é apenas um jogo infantil) e clicar
no botão "Exploració lliure"; você será redirecionado para o Panzoomed
imagem. Como você verá, o zoom da roda do mouse funciona bem, mas o zoom de pinça (e
na verdade, os botões panzoom.zoomIn() e panzoom.zoomOut() também) move o
imagem.

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

Estou muito grato por sua ajuda, e por favor, desculpe qualquer inconveniente.

Atenciosamente;

Jorge Sánchez Blanco

El lun., 21 set. 2020 às 19:45, Timmy Willison (<
[email protected]>) escreveu:

Obrigado por abrir um problema. Eu tentei a demonstração
https://timmywil.com/panzoom/demo no iOS e Android e não foi possível
reproduzir. Você listou navegadores de desktop, mas o zoom de pinça é principalmente para
móvel (embora alguns dispositivos tenham um mouse e uma tela sensível ao toque). Pode
ser útil saber qual dispositivo você está usando, mesmo que eu provavelmente
incapaz de testar nele.

Não há muito que eu possa fazer sem poder reproduzir o problema. Se
você se aprofunda e descobre que uma mudança de código no Panzoom o corrige (ou que um
caso de teste diferente além da demonstração reproduz o problema), por favor
comente aqui e eu vou considerar um patch.

—
Você está recebendo isso porque foi o autor do tópico.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/timmywil/panzoom/issues/512#issuecomment-696267620 ,
ou cancelar
https://github.com/notifications/unsubscribe-auth/AOF4EAOK6YQVAHINOAQ3JZTSG6GMRANCNFSM4RUT4P7A
.

Estou tendo o mesmo problema. Parece que o ponto focal não foi calculado corretamente e está totalmente na parte inferior.

@jsblanco eu vejo. O Panzoom está contando com transform-origin: 50% 50% , que centraliza a animação no centro da janela de visualização e não no centro da imagem, que seria menor nesse caso. Ele move a imagem por causa da configuração contain: outside para evitar que a imagem fique muito para baixo. Eu acho que isso pode ser corrigido chamando zoomToPoint ou usando zoom com a opção focal e encontrando o ponto na janela de visualização que é realmente o centro da imagem. Isso faz sentido?

Talvez eu possa fazer algo assim por padrão quando contain: outside estiver definido.

@rmatec Você também está usando contain: outside ?

Não estou usando a opção conter. No meu caso, parece que o ponto focal está no centro inferior. Apertar para dentro ou para fora é feito em relação a esse ponto.

@rmatec Acho que deve haver alguma opção em jogo, pois não vejo esse comportamento nas demos. Existe outra opção que você está configurando?

Estou usando o seguinte para inicializar o Panzoom.

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

Funciona perfeitamente bem no desktop, mas por algum motivo não funciona no celular.

Ok, seu caso parece ser diferente. Você poderia reproduzir em https://jsbin.com ou https://codepen.io e fazer um novo ticket? Aqui está um modelo que pode ser clonado https://jsbin.com/dibofogini/1/edit?html ,js,output.

Vai fazer. Obrigado.

Por alguma razão, ao usar a opção focal, a imagem aparece perto do
canto inferior direito, e nenhum zoom adicional pode acontecer, nem para dentro nem para fora.
Talvez eu esteja fazendo algo errado? Eu tenho que passar algum parâmetro específico
para panzoom.zoomIn() e .zoomOut() para indicar o ponto focal, ou apenas
incluí-lo na declaração inicial do panzoom deve ser suficiente?

Para o que vale a pena, tentei os seguintes métodos para obter o foco
apontar. Eu também tentei colocar números brutos.

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

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

A remoção de conter: fora completamente apenas renderiza uma imagem preta.

El mar., 22 set. 2020 às 15:59, Timmy Willison (<
[email protected]>) escreveu:

@jsblanco https://github.com/jsblanco Entendo. O Panzoom está contando com a origem de transformação:
50% 50%, que centraliza a animação no centro da janela de visualização em vez
do que no centro da imagem, que neste caso seria menor. Isto
move a imagem por causa da configuração de conteúdo externo para evitar que o
imagem de ir muito para baixo. Eu acho que isso pode ser corrigido chamando
zoomToPoint ou usando zoom com a opção focal e encontrando
o ponto na viewport que é realmente o centro da imagem. Faz
isso faz sentido?

Eu poderia talvez fazer algo assim por padrão quando contém: fora
está definido.

@rmatec https://github.com/rmatec Você também está usando conter: fora?

—
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/timmywil/panzoom/issues/512#issuecomment-696740708 ,
ou cancelar
https://github.com/notifications/unsubscribe-auth/AOF4EANBQXE5TDJOZNTBN6LSHCUVXANCNFSM4RUT4P7A
.

@jsblanco Desculpe, é mais complicado do que isso. A maneira de fazer isso seria encontrar o centro da imagem e traduzi-lo para seu ponto na janela de visualização pai do panzoom. Você passaria isso como a opção focal e deve ser calculado toda vez que você chamar o zoom. No entanto, deixe-me ver se consigo criar um exemplo para você. Isso corrigiria zoomIn / zoomOut .

Dito isso, isso não mudaria o comportamento do zoom de pinça. Indiscutivelmente, isso está fazendo a coisa certa, pois o zoom em certos pontos colide com contain: outside . Não tenho certeza da correção, exceto talvez para não permitir o zoom se a imagem precisar se mover para mantê-la na viewport corretamente.

Ok, seu caso parece ser diferente. Você poderia reproduzir em https://jsbin.com ou https://codepen.io e fazer um novo ticket? Aqui está um modelo que pode ser clonado https://jsbin.com/dibofogini/1/edit?html ,js,output.

Eu criei https://github.com/timmywil/panzoom/issues/513 para o meu caso específico. Há um link para JSBin que mostra o problema.

Consigo reproduzir esse problema se deixar "animate: true" ativado.
Este problema não aparece em "animate: false" - clonei seu modelo @timmywil para reproduzir esse problema:

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

(Eu implementei o ouvinte de eventos wheel para ampliar diretamente - Se você rolar rápido o suficiente, a mudança de posição acontecerá.)

Ok, mudei meu problema para #515 porque, embora o problema seja o mesmo, mas com configuração diferente.

Oi;

Desculpe por demorar para responder. Eu não acho que tenha a ver com conter="fora"; Acabei de removê-lo e ele ainda exibiu o mesmo comportamento, embora não tão intensamente. A div do panzoom e a imagem têm um tamanho definido independente do tamanho da rua; isso poderia ser parte do problema?

Obrigado

@jsblanco A correção deve ser a mesma.

Oi, eu ia abrir um novo problema sobre o zoom da roda se afastando do centro, mas olhei por este e pensei que está relacionado o suficiente. A seguir estão minhas descobertas e solução alternativa. Observe que testei apenas em navegadores em um MacBook usando o trackpad.

Percebo que para a demonstração de zoom do ponto focal , o centro flutua para o canto superior esquerdo ao aumentar o zoom no Safari, Firefox. Recebo o mesmo comportamento mesmo no Chrome, mas apenas quando o web inspector está aberto.

Então, comecei a investigar e minha suspeita é que o evento da roda do mouse está sendo acionado com muita frequência e as coisas não estão sendo atualizadas corretamente devido à natureza assíncrona do Panzoom . Eu pensei que se eu tentasse diminuir a frequência do zoom, isso poderia ajudar e com certeza parece "funcionar". Você pode vê-lo em ação aqui: https://jsbin.com/joliduwulo/1/edit?html ,js,output.

A ressalva é que o zoom pareceria menos suave. Neste exemplo estou limitando a um zoom máximo a cada 20ms, mas quando estava testando com SVGs grandes, especialmente no Firefox, precisei definir isso em cerca de 50ms para não perder o ponto focal.

@timmywil , por favor, deixe-me saber se você quer que eu abra um novo problema de qualquer maneira. Isso parece um hack, mas resolve o problema para mim. Se você acha que vale a pena explorar a solução, eu adoraria ajudar a contribuir.

+1 na capacidade de centralizar no elemento panzoom em vez da viewport

Substitua a função de movimento em panzoom.ts:426

function move(evento: PointerEvent) {
E se (
!isPanning ||
origX === indefinido ||
origem === indefinido ||
startClientX === indefinido ||
startClientY === indefinido
) {
Retorna
}
addPointer(ponteiros, evento)
const atual = getMiddle(ponteiros)
if (pointers.length > 1) {
// Usa a distância entre os 2 primeiros ponteiros
// para determinar a escala atual
// evita problema de zoom no celular
if (distância inicial === 0) {
startDistance = getDistance(ponteiros);
}
const diff = getDistance(ponteiros) - startDistance
const toScale = constrainScale((diff * options.step) / 80 + startScale).scale
zoomToPoint(toScale, atual)
} outro {
// adicionada outra condição para evitar erro de ponto focal de zoom móvel
frigideira(
origX + (current.clientX - startClientX) / escala,
origY + (current.clientY - startClientY) / escala,
{
animar: falso
}
);
}
}