Pdf.js: Use um zoom mais natural no celular

Criado em 18 jan. 2013  ¬∑  95Coment√°rios  ¬∑  Fonte: mozilla/pdf.js

Agora voc√™ precisa apertar os bot√Ķes de mais / menos, mesmo no celular, para ampliar o documento. Isso √© realmente estranho, especialmente porque o gesto de pin√ßar para aplicar zoom tamb√©m est√° ativo. Acho que a melhor maneira de usar o celular √© renderizar em um tamanho "natural" e deixar o navegador controlar o zoom, semelhante a uma p√°gina da web.

1-viewer 2-feature

Coment√°rios muito √ļteis

@ltullman @ hetalv985 Consegui fazê-lo funcionar e implementá-lo sozinho, verifique minha essência aqui:

https://gist.github.com/squallstar/1d720e93eabe7f60dc61b547d2c19228
simplesmente cole no final de viewer.html ūüĎć √© isso.

Todos 95 coment√°rios

Isso √© o que quer√≠amos fazer, mas para V1 o aperto para zoom estava tendo problemas, ent√£o tivemos que usar os bot√Ķes de zoom.

Você pode explicar os problemas? Acho que provavelmente poderíamos priorizá-los para você, a fim de fazer o PDF.js funcionar bem.

Eu realmente n√£o acho que voc√™ deseja que o navegador fa√ßa o zoom neste caso. Se o pdf.js renderizar um documento em 800x600, e voc√™ apertar o zoom, o navegador continuar√° a renderizar esse conte√ļdo 800x600 em uma nova resolu√ß√£o mais alta que pode ou n√£o parecer uma porcaria, dependendo da resolu√ß√£o do dispositivo e como quanto voc√™ deu zoom. (Presumo que o pdf.js ainda use canvas para renderiza√ß√£o e n√£o svg?)

@Snuffleupagus @timvandermeij Algum de vocês está interessado em trabalhar nisso? Parece que não deve ser muito difícil usar a biblioteca compartilhada em gaia https://github.com/mozilla-b2g/gaia/blob/master/shared/js/gesture_detector.js

@brendandahl Com certeza vou colocá-lo na minha lista de tarefas e começar a experimentá-lo em breve. https://github.com/mozilla-b2g/gaia/blob/862de8489b648a9af7e8a5b88be031b5479404ba/apps/camera/js/panzoom.js#L15 parece ter um bom exemplo, pois 'transform' é usado para eventos de pinça de 2 dedos Seria ótimo se pinçar para aplicar zoom funcionasse, já que é usado com frequência em dispositivos móveis.

Estou trabalhando nisso. Os usu√°rios interessados ‚Äč‚Äčpodem ficar de olho em https://github.com/timvandermeij/pdf.js/tree/pinch-to-zoom para ver o progresso. J√° est√° captando o comando pinch-to-zoom no meu tablet e telefone, mas a precis√£o deve ser melhorada, assim como a re-renderiza√ß√£o real (vou precisar encontrar uma maneira de calcular a nova escala com a escala antiga e o novo ponto m√©dio, ou de alguma outra forma).

@timvandermeij Uma coisa que podemos precisar fazer antes de implementar isso √© melhorar o zoom. Falamos primeiro sobre apenas usar as transforma√ß√Ķes css para dimensionar a tela, em seguida, come√ßar a renderizar novamente e, depois de terminar a renderiza√ß√£o, mostre a nova tela.

Eu acredito fortemente que a melhor solu√ß√£o aqui ser√° aquela que depende do compositor do navegador para fazer o zoom transiente (a anima√ß√£o durante o belisc√£o ou toque duplo) e ent√£o deixar o pdf.js redesenhar na nova resolu√ß√£o. A parte triste aqui √© que agora o conte√ļdo est√° alheio √†s mudan√ßas de zoom, e n√£o acho que redimensionar a tela para a nova resolu√ß√£o funcionar√°. Podemos precisar aprimorar a especifica√ß√£o da tela para lidar com isso.

Tive algum sucesso com o hammer.js. Eu permiti o belisc√£o "nativo" do navegador (o que leva a um PDF borrado) e depois disso eu redesenhei a tela do PDF, com escala = escala * zoom e dei √† tela o css "transformar: escala (1 / zoom)" Portanto, tudo estar√° no mesmo lugar (especialmente texto e √Ęncoras). Parece legal.

@skruse Eu preparei um patch para implementar pinch to zoom há algum tempo (veja # 3708), também com Hammer.js, mas ainda não consegui fazê-lo funcionar corretamente em dispositivos móveis / tablets. Os movimentos de pinça causaram muitos problemas de desempenho e estabilidade. Você se importa em compartilhar sua implementação conosco? Se não, você poderia criar uma solicitação pull com sua pinça para ampliar a implementação? Talvez ele possa substituir o meu se funcionar com mais fluência em dispositivos móveis / tablets. :)

Ei, skruse, como você conseguiu calcular a taxa de zoom no final do zoom?

var zoom = document.documentElement.clientWidth / window.innerWidth;

E tamb√©m tenho problemas de desempenho: n√£o se deve aumentar o zoom "muito longe" em um dispositivo m√≥vel, em termos do par√Ęmetro "escala". Acho que 2 ou 3 √© o m√°ximo.

+2 para este

Alguém conseguiu uma solução para este problema de 2 anos?

Nada foi feito sobre isso, até onde eu sei. Refiro-me ao meu comentário anterior em https://github.com/mozilla/pdf.js/issues/2582#issuecomment -30316908. Convidamos qualquer pessoa a enviar um PR para isso, uma vez que o código esteja funcionando.

Adoraria ver uma solu√ß√£o para isso. No momento, isso √© a √ļnica coisa que est√° me impedindo de usar o pdf.js

:(

O zoom de pinça seria ótimo! Eu encontrei este plugin jquery que usa pdf.js e tem zoom pinch e páginas de deslizamento. http://touchpdf.net/demo/index.htm Mas seria bom se fosse compilado em pdf.js desde o início :-)

+1 Adoraria ver isso aqui.

+1, tamb√©m o exemplo em outro lugar que usa o hammer.js para capturar o evento e, em seguida, chamar as fun√ß√Ķes de zoom do pdf.js n√£o seria um m√©todo relativamente "limpo"?

@sporkman, o que fiz no final foi tornar a tela realmente grande e, em seguida, usar o zoom do navegador nativo para permitir o zoom (meu aplicativo foi projetado para dispositivos de toque). posso compartilhar a fonte, se necess√°rio.

@rorysmorris como você conseguiu contornar a desativação do zoom nativo do navegador ao beliscar durante a rolagem? Eu também implementei o hammer.js no pdf.js, mas não consigo contornar esse problema específico

Você tentou usar a propriedade CSS touch-action ?
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Em 5 de outubro de 2016, 15h15, "toplay3" [email protected] escreveu:

@rorysmorris https://github.com/rorysmorris como você conseguiu
sobre como desativar o zoom do navegador nativo ao beliscar durante a rolagem? eu tenho
também implementou o hammer.js em pdf.js, mas não pode contornar esse
quest√£o

-
Você está recebendo isto porque está inscrito neste tópico.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/mozilla/pdf.js/issues/2582#issuecomment -251670785,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/ABTUT83E287dv4LSs4T_TGnzwe8yqCMYks5qw6LmgaJpZM4AXvZ2
.

@ Rob - W
uau gênio! funciona perfeitamente agora! Muito obrigado!

Quando esse problema est√° sendo planejado para ser implementado? J√° faz algum tempo desde que este problema foi publicado originalmente. Desnecess√°rio dizer +1!

Eu tamb√©m verifico esse problema todas as semanas, desde h√° um ano. Seria incr√≠vel t√™-lo no n√ļcleo ou como um addon com o hammer js.

Para ser mais construtivo neste tópico, aqui estão os requisitos para a IU (se alguém quiser realmente ajudar e acelerar a resolução do problema) e não há nada específico para PDF.js:

  • para ampliar e deslocar o conjunto de DIVs (com tamanhos diferentes) empilhados verticalmente
  • n√£o permitindo que o usu√°rio se perca na janela de visualiza√ß√£o em diferentes escalas
  • detectar e informar quando uma visibilidade div ou escala vis√≠vel muda.

O √ļltimo √© importante, pois n√£o queremos pintar todas as p√°ginas com resolu√ß√£o m√°xima em dispositivos de baixa pot√™ncia. Se algu√©m tiver um prot√≥tipo, encontre-me no IRC que ajudarei a ligar o PDFPageView para visibilidade e escala de eventos. Devo definir tamb√©m o 5-bom-iniciante-bug?

Eu concordo que esse seria um bom bug para iniciantes, ent√£o estou classificando-o como tal.

Isso n√£o √© apenas para dispositivos m√≥veis, tamb√©m estou recebendo solicita√ß√Ķes de recursos para suportar zoom de trackpad de dois dedos (no Mac).

Da minha breve investigação, descobri que ainda não há uma maneira cross-browser de suportar gestos de zoom.

+1

@ toplay3 e @ Rob - W O que você fez para que funcionasse? Adicionando "touch-action: auto;"? Para quê? E o que mais você fez? Obrigado!

Olá a todos, como a maioria de vocês, estou interessado em fazer o pinch to zoom funcionar, alguém conseguiu fazer isso, mesmo usando libs externas como o martelo? Se você conseguiu, qual é a configuração? @rorysmorris @ toplay3 @ Rob - Obrigado

ūüĎć

@rorysmorris algum conselho sobre a pergunta acima? obrigado :)

Olá @squallstar - no começo tentei usar uma biblioteca JS pinch and zoom para lidar com isso para mim, mas encontrei alguns problemas. Não deu zoom como eu queria, ou seja, permitiria que a tela do PDF ficasse completamente fora da tela, quando eu nunca quis que as bordas fiquem longe da borda da tela, se isso faz sentido. No final, acabei de usar o zoom nativo que está embutido no navegador móvel para pinçar / aplicar zoom / navegar. Eu configurei o PDF.js para renderizar o PDF em 3x o tamanho do pixel em que estava sendo exibido, em seguida, reduzi com CSS, para que permanecesse bem nítido quando ampliado. Se você precisar de ajuda, posso mostrar um exemplo funcional do meu implementação.

@rorysmorris obrigado, seria √≥timo se voc√™ me mostrasse (ou envie um snippet) ou como voc√™ o implementou. Muito apreciado ūüĎć

@squallstar envie-me um e-mail através do formulário de contato em meu site e enviarei uma demonstração para você mais tarde hoje :) http://rorymorris.co.uk

@squallstar Esta não é realmente uma solução, mas uma espécie de solução alternativa. As desvantagens são: Desempenho, o resultado tem dependência de dispositivos, o zoom não é infinito.

O desempenho √© muito melhorado com o uso de rolagem e panor√Ęmica nativas, em vez de usar JavaScript para executar essas tarefas. O n√≠vel m√°ximo de zoom √© facilmente configur√°vel com uma meta tag viewport, e quem quer zoom infinito em uma imagem rasterizada? A prop√≥sito, biblioteca "JS-ImageResizer" com √≥tima apar√™ncia! @MickL

O desempenho foi mais um palpite. Vamos dizer usando um iPhone Plus em paisagem com largura de 2208px. Agora você teria um Canvas de 6624px. Dependendo da complexidade do PDF e da contagem de páginas, você pode ter 3 telas de 6000px renderizadas com texto HTML, gráficos etc.

Acho que sua solução é ótima para muitas pessoas. Mas, como você descreveu, é mais um zoom falso do que realmente ativa o zoom e a renderização do PDF.js.

√Č verdade que o desempenho nesse aspecto n√£o √© √≥timo. Em meu caso de uso espec√≠fico para isso, tive que renderizar mais de 300 PDFs de p√°ginas no tamanho de um iPad (retina), bem como ter uma tela de desenho em cima de cada um!

PDF.js travava o navegador (iOS Safari) em cerca de 10 p√°ginas PDF renderizadas, ent√£o no final eu tive que mostrar apenas uma p√°gina PDF por vez com os bot√Ķes anterior / seguinte. N√£o √© ideal! E eu concordo, a funcionalidade de zoom nativo incorporada ao PDF.js teria sido muito melhor.

checkout kamihq.com para trabalhar com um exemplo de pinch-zoom

@rorysmorris Eu te enviei meu e-mail ontem à noite através do formulário de contato, alguma chance de você me enviar o exemplo de que estava falando? :) obrigado

Alguém que tenha um exemplo de trabalho ( @rorysmorris , @ Rob-W, etc) pode compartilhar?

@rorysmorris Tentei entrar em contato com você pelo seu site. Se alguém tiver um exemplo prático disso, você pode compartilhar?

@ltullman @ hetalv985 Consegui fazê-lo funcionar e implementá-lo sozinho, verifique minha essência aqui:

https://gist.github.com/squallstar/1d720e93eabe7f60dc61b547d2c19228
simplesmente cole no final de viewer.html ūüĎć √© isso.

Obrigado, squallstar. Mas não estamos usando viewer.html. Estamos renderizando o pdf em nosso aplicativo móvel iOS dentro de uma tag div. Como usamos esse recurso nesse caso? Precisamos incluir os arquivos do visualizador?

Portanto, temos a função handleMouseWheel que é muito semelhante. Por que não usar exatamente a mesma função com o gesto de toque ou martelo js? Não é consertado em 1-2 horas então?

Infelizmente não é tão fácil. Por favor, consulte meu comentário anterior em https://github.com/mozilla/pdf.js/issues/2582#issuecomment -30316908. Precisamos limitar a quantidade de gestos de toque para que a tela não seja renderizada novamente em cada alteração delta, o que é um grande problema de desempenho. Se alguém estiver disposto a trabalhar nisso, sinta-se à vontade para enviar um PR e o revisaremos.

Se esse for o √ļnico problema ... :)

Eu também notei que em "ctrl + mousewheel" ele rola para a posição do cursor como no Google Maps. Mas isso não funcionará se não houver barras de rolagem (que é o padrão no carregamento da página). Então, para deixar isso parecer natural, temos que criar um preenchimento, se necessário, para zoom pinch e zoom com a roda do mouse.

Uma boa adição seria se o zoom com a roda do mouse e o zoom com os dedos usassem a mesma função.

Seu commit já parece bom. Talvez o desempenho não seja mais um problema, já faz mais de 3 anos. Claro que a melhor solução seria: start-pinch -> zoom desfocado -> end-pinch -> realmente zoom pdf. Além disso, user-scalable=no não está mais funcionando no iOS mais recente. Portanto, podemos ter que preventDefault() também.

Eu investi muito tempo nisso. Na verdade, parece possível, mas existem vários problemas que não consegui resolver:

  • hammer.js s√≥ funciona em pinchend (pinchmove sempre √© cancelado quando o pdf.js faz zoom)
  • N√£o consegui rolar perfeitamente para o centro de pinchend, embora tenha usado o mesmo m√©todo que o zoom com a roda do mouse
  • √Äs vezes, o centro n√£o √© definido corretamente por hammer.js
  • √Äs vezes, pinchend n√£o √© chamado por hammer.js e nenhum zoom acontece
  • Tentei adicionar transforma√ß√£o css no pinchmove (css zoom on pinchmove, pdf js zoom on pinchend) o que daria um √≥timo desempenho, mas novamente n√£o consegui rolar perfeitamente (posi√ß√£o #viewer com css traduzir)
  • hammer.js impede qualquer outra a√ß√£o de toque (no nosso caso, rolagem de p√°gina normal), ent√£o eu tive que modificar o hammer.js para prevenir apenas quando 2 dedos s√£o usados
  • (O mesmo para zoom com a roda do mouse :) Se n√£o houver barras de rolagem (diminua o zoom para que voc√™ veja todo o documento), n√£o podemos posicionar (rolar) o documento no centro do aperto.

Provavelmente tudo isso pode ser resolvido, mas o iOS 10 permite o zoom da p√°gina mesmo quando est√° desativado com user-scalable=no . Assim, algumas vezes, ao apertar preventDefault () n√£o est√° funcionando e a p√°gina inteira √© ampliada. Isso levaria a um grande problema para o usu√°rio final (a √ļnica maneira de escapar √© tocar duas vezes na barra de ferramentas).

@MickL Eu tentei. Consegui evitar o cancelamento de "pinch zoom" adicionando a propriedade CSS "pointer-events: none" √†s ‚Äč‚Äčclasses pdfViewer e page (e chamando stopPropagation + preventDefault quando viewerContainer despacha eventos de toque duplo para que a p√°gina inteira n√£o amplie iOS).

Estou tendo o mesmo problema que você descreve de não ter o evento de posição de zoom perfeito quando uso o método modificado da roda do mouse (passe a próxima escala a ser aplicada, a "posição intermediária" atual ou o destino e o delta da "posição intermediária" para saber quanto mover para a esquerda, direita, cima, baixo, gerenciado por pdfViewer.container.scrollLeft e pdfViewer.container.scrollTop). Parece haver sempre um erro introduzido talvez pelo tempo limite que impede o visualizador de renderizar em cada evento de toque duplo.

Alguma dica sobre onde aplicar essas transforma√ß√Ķes de escala CSS para evitar renderizar tudo em cada delta de escala?

@betovidal Eu sei que j√° se passaram alguns meses desde sua √ļltima postagem. Voc√™ fez alguma atualiza√ß√£o sobre como fazer o zoom pinch funcionar em PDF.js? Estou trabalhando em um projeto de trabalho que exige isso.
Talvez pudéssemos trabalhar juntos para descobrir algo?

@squallstar Testei sua solu√ß√£o no iOS brevemente. E at√© agora, est√° funcionando para mim! Obrigado por compartilhar sua solu√ß√£o ūüíĮ

@vuinguyen obrigado! Estou feliz que funcionou para você também;)

+1

Alguma esperança de integrar o código do

O zoom de pinça está "quebrado" no iOS desde o iOS 10. Mesmo se tudo for implementado perfeitamente, o Safari vai bagunçar tudo.

Este √© um problema espec√≠fico do iOS? √Č poss√≠vel apertar o zoom de um PDF servido por pdfjs no Android?

Depende do navegador. Presumo que apenas os navegadores iOS ignoram "escal√°vel pelo usu√°rio = n√£o".

Agora voc√™ precisa apertar os bot√Ķes de mais / menos, mesmo no celular, para ampliar o documento. Isso √© realmente estranho, especialmente porque o gesto de pin√ßar para aplicar zoom tamb√©m est√° ativo. Acho que a melhor maneira de usar o celular √© renderizar em um tamanho "natural" e deixar o navegador controlar o zoom, semelhante a uma p√°gina da web.

Para mim, isso diz tudo. Acho que isso não tem nada a ver com um recurso específico e sim com uma abordagem da experiência móvel.

Presumo que apenas os navegadores iOS ignoram "escal√°vel pelo usu√°rio = n√£o".

Corrigir.

Eu vi que "Box Content Preview" (que usa PDFJS para mostrar PDFs) faz uma boa implementação para isso. Este é um Codepen de seu visualizador:

https://codepen.io/box-platform/pen/rmZdjm

E esta é a solicitação de pull para sua correção:

https://github.com/box/box-content-preview/pull/567

Achei que talvez alguém pudesse fazer algo semelhante para o PDFJS, com base em sua solução. Vou tentar implementá-lo sozinho e postar o código se o fizer. Serei ótimo se outra pessoa (que provavelmente tem mais experiência do que eu) também puder colaborar e tentar!

@ amurillo17 obrigado pelo link. A solução Box parece fantástica. Adoraria ver algo assim funcionando com pdfjs. Por favor, mantenha-nos atualizados sobre o seu progresso!

Existe alguma boa solução para este problema?

Alguma atualização para isso? Seria um ótimo recurso!

alguma atualização? obrigado

Existe alguma maneira simples de adicionar esse recurso ao visualizador existente?

Existe alguma maneira simples de adicionar esse recurso ao visualizador existente?

N√£o.

@prohtex Hm, isso é muito triste. Espero que esse recurso seja adicionado logo após todos esses anos.

@prohtex Hm, isso é muito triste. Espero que esse recurso seja adicionado logo após todos esses anos.

Ele só será adicionado quando alguém intensificar e integrar o código em um PR (não eu, infelizmente) e, mesmo assim, pode levar anos.

Eu tenho uma solução alternativa, mas é "apenas Android", pois não me importo com o iOS em meu complemento "Firefox para Android":
https://github.com/M-Reimer/android-pdf-js/blob/master/patches/pdfjs-pinch-gestures.js
Meu Makefile apenas adiciona isso a "web / viewer.js". Ele registra os eventos de toque e traduz os gestos de pinça em cliques de botão.

Eu tenho uma solução alternativa, mas é "apenas Android", pois não me importo com o iOS em meu complemento "Firefox para Android":

Funciona no meu iPad tamb√©m, mas parece um pouco lento e n√£o muito natural. Ele aumenta um passo ap√≥s cada pin√ßa. Ent√£o voc√™ tem que soltar os dedos para fazer zoom e n√£o importa a dist√Ęncia que voc√™ tenha beliscado. Este √© o comportamento normal ou apenas um bug espec√≠fico do dispositivo? Obrigado de qualquer maneira, porque este √© um passo na dire√ß√£o certa.

Funciona no meu iPad tamb√©m, mas parece um pouco lento e n√£o muito natural. Ele aumenta um passo ap√≥s cada pin√ßa. Ent√£o voc√™ tem que soltar os dedos para fazer zoom e n√£o importa a dist√Ęncia que voc√™ tenha beliscado. Este √© o comportamento normal ou apenas um bug espec√≠fico do dispositivo? Obrigado de qualquer maneira, porque este √© um passo na dire√ß√£o certa.

Olhando para o c√≥digo, esta n√£o √© uma solu√ß√£o vi√°vel ou mesmo uma boa solu√ß√£o alternativa. Tudo isso faz √© observar eventos de zoom e simular clicar nos bot√Ķes [-] [+] com jQuery.

@prohtex Exatamente. Se você tentar, faz alguma coisa, mas não funciona bem de jeito nenhum.

Como eu disse: não é perfeito, mas é melhor do que nada.
Pelo menos para mim é mais fácil fazer o gesto de pinça do que apertar um pequeno botão de zoom em uma pequena tela de celular. Faz com que os gestos funcionem de forma que todo usuário de dispositivo móvel espera que funcione.

Funciona no meu iPad tamb√©m, mas parece um pouco lento e n√£o muito natural. Ele aumenta um passo ap√≥s cada pin√ßa. Ent√£o voc√™ tem que soltar os dedos para fazer zoom e n√£o importa a dist√Ęncia que voc√™ tenha beliscado. Este √© o comportamento normal ou apenas um bug espec√≠fico do dispositivo? Obrigado de qualquer maneira, porque este √© um passo na dire√ß√£o certa.

Atinge os bot√Ķes. O "zoom natural" n√£o √© poss√≠vel com esta abordagem simples e n√£o quero mexer muito com o PDF.js. Este n√£o √© o objetivo do meu Addon.

Mas deve ser poss√≠vel pressionar v√°rios bot√Ķes, dependendo da dist√Ęncia que os dedos moveram. Vou tentar isso.

Olhando para o c√≥digo, esta n√£o √© uma solu√ß√£o vi√°vel ou mesmo uma boa solu√ß√£o alternativa. Tudo isso faz √© observar eventos de zoom e simular clicar nos bot√Ķes [-] [+] com jQuery.

Estou aberto a sugest√Ķes, mas como isso faz parte de um Addon que quer apenas tornar PDF.js utiliz√°vel como visualizador de PDF dentro do Firefox, n√£o farei modifica√ß√Ķes profundas.

BTW: N√£o h√° uma √ļnica linha de jQuery em meu c√≥digo. Este √© o JavaScript bruto.

Deve ser realmente possível fazer os passos de zoom enquanto move os dedos ...
Tentarei fazer mais algumas melhorias, mas o √ļnico caminho de comunica√ß√£o que usarei s√£o os dois bot√Ķes que controlarei remotamente. Dessa forma, meu c√≥digo n√£o interfere no PDF.js.

BTW: N√£o h√° uma √ļnica linha de jQuery em meu c√≥digo. Este √© o JavaScript bruto.

Eu estou corrigido. Esperando por uma solução madura em breve.

A maneira de fazer isso é usando a transformação css enquanto pinch-zoom. Além disso, o movimento dos dedos deve ser aplicado não apenas o zoom. Em seguida, apertando-zoom-final, você pode redefinir a transformação css e aplicar o zoom real e rolar para pdf.js.

PS Usar jQuery dentro de um projeto n√£o jQuery j√° parece uma m√° pr√°tica para mim.

PS Usar jQuery dentro de um projeto n√£o jQuery j√° parece uma m√° pr√°tica para mim.

Onde @ M-Reimer usa JQuery? Como ele já afirmou, sua solução alternativa usa apenas Javascript simples.

Sim .. meu mal. A questão é que esta solução não funciona bem.

Atualizado para que a dist√Ęncia entre os dedos altere a quantidade de zoom:
https://github.com/M-Reimer/android-pdf-js/blob/master/patches/pdfjs-pinch-gestures.js
Não é possível aplicar zoom enquanto move os dedos, pois, por algum motivo, o zoom e o redesenho reais fazem com que o evento de toque "termine" de alguma forma.
Mais uma vez: melhor do que n√£o lidar com o gesto.

@ M-Reimer Muito obrigado pelo seu trabalho. Pelo menos, √© uma melhoria em rela√ß√£o √† √ļltima vers√£o. Talvez algu√©m encontre uma solu√ß√£o para faz√™-lo redesenhar durante o zoom. Ou pode ser poss√≠vel aplicar zoom temporariamente usando transforma√ß√Ķes de css e, em seguida, redesenhar eventualmente ap√≥s o gesto de toque terminar.

@anvaka Examinou o caso e parece que pode haver uma solução bastante simples . Infelizmente, atualmente não tenho tempo para testá-lo, mas talvez alguém queira tentar.

Fiz uma versão baseada na solução @squallstar que também usa a transformação css durante o movimento de pinça para dar mais feedback ao usuário. A renderização é feita apenas no touchend. Não é perfeito, existem alguns pequenos problemas com o posicionamento da rolagem após a renderização, mas talvez alguém possa usá-lo como um começo.

https://gist.github.com/jsprpalm/12217feab2f1acc14 Budape8508291619e

Ainda n√£o h√° solu√ß√£o para esse problema? Eu gostaria de usar o pdf.js no celular, mas sem a capacidade de zoom, ele √© praticamente in√ļtil em telas menores.

Fiz funcionar sem o uso de hammer.js, mas como era para um projeto de clientes, não posso compartilhar o código. Implementei pinch e doubletap e ampliei com css e pinchend ampliei pdf.js. Alguns elementos exigem definir largura / altura e alguns podem ser transformados com css-transform. Além disso, durante o zoom, o scroll-watch do pdf.js viewer.js deve ser evitado. Levei muito tempo, mas funcionou muito bem no final.

Ainda n√£o h√° solu√ß√£o para esse problema? Eu gostaria de usar o pdf.js no celular, mas sem a capacidade de zoom, ele √© praticamente in√ļtil em telas menores.

Até que um desenvolvedor experiente com as etapas de código do pdf.js para oferecer uma solução, caberá a cada pessoa que implementa o pdf.js consertar algo. Não parece ser uma grande prioridade para este projeto.

Aqui est√° um PR que poderia ser integrado sem muita dificuldade:

https://github.com/box/box-content-preview/pull/567

https://gist.github.com/jsprpalm/12217feab2f1acc14 Budape8508291619e

@jsprpalm obrigado funciona muito bem precisa de um conserto por favor, alguém ajude a consertar

@aidrouge https://gist.github.com/larsneo/bb75616e9426ae589f50e8c8411020f6

Eu adicionei este ao meu complemento de visualizador de PDF. Parece funcionar muito bem.
https://addons.mozilla.org/android/addon/android-pdf-js/

Editar: funciona para mim

Para mim, trabalho mais natural definindo isto:

<meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=10.0, minimum-scale=1.0"
    />

Como faço para definir o zoom mínimo? Posso reduzir tanto a imagem que ela vira um ponto.

Tenho a mesma pergunta que @KazysNoobiys.
escala mínima na janela de visualização não afeta o zoom

Estou trabalhando em outra solu√ß√£o alternativa: uma camada css transparente sobrepondo o pdf.js para lidar com v√°rias funcionalidades de deslize. A parte de sobreposi√ß√£o funciona agora, mas n√£o sei quais fun√ß√Ķes chamar.
if (deslize == 'esquerda') ????
Qual função eu chamaria para avançar para a próxima página ou voltar para a página anterior ou zoom?

economize seu tempo e sua vida, edite seu arquivo .html assim

// delete the 'maximum-scale'
<meta name="viewport" content="width=device-width, initial-scale=1">

por exemplo. https://github.com/mozilla/pdf.js/blob/master/web/viewer.html#L26

Esta p√°gina foi √ļtil?
0 / 5 - 0 avalia√ß√Ķes

Quest√Ķes relacionadas

brandonros picture brandonros  ¬∑  3Coment√°rios

SehyunPark picture SehyunPark  ¬∑  3Coment√°rios

THausherr picture THausherr  ¬∑  3Coment√°rios

azetutu picture azetutu  ¬∑  4Coment√°rios

patelsumit5192 picture patelsumit5192  ¬∑  3Coment√°rios