pdf.js 🚀 - 모바일에서 더 자연스러운 확대 / 축소 사용

이것이 우리가 원했던 일이지만 V1의 경우 확대 / 축소에 문제가있어서 확대 / 축소 버튼을 사용해야했습니다.

brendandahl 에 2013년 01월 18일

문제에 대해 자세히 설명해 주시겠습니까? PDF.js가 잘 작동하도록하기 위해 우선 순위를 지정할 수있을 것입니다.

snorp 에 2013년 01월 18일

이 경우 브라우저가 확대 / 축소하는 것을 원하지 않는다고 생각합니다. pdf.js가 문서를 800x600으로 렌더링하고 확대하면 브라우저는 장치의 해상도와 방법에 따라 쓰레기처럼 보일 수도 있고 그렇지 않을 수도있는 새로운 더 높은 해상도로 해당 800x600 콘텐츠를 계속 렌더링 할 것입니다. 많이 확대했습니다. (pdf.js는 여전히 렌더링에 svg가 아닌 캔버스를 사용한다고 가정합니까?)

wesj 에 2013년 02월 04일

@Snuffleupagus @timvandermeij 둘 https://github.com/mozilla-b2g/gaia/blob/master/shared/js/gesture_detector.js 에서 공유 라이브러리를 사용하는 것이 너무 어렵지 않을 것 같습니다.

brendandahl 에 2013년 09월 17일

@brendandahl 나는 그것을 내 할 일 목록에 넣고 곧 실험을 시작할 것입니다. https://github.com/mozilla-b2g/gaia/blob/862de8489b648a9af7e8a5b88be031b5479404ba/apps/camera/js/panzoom.js#L15 는 두 손가락 핀치 이벤트에 'transform'이 사용되므로 좋은 예가있는 것 같습니다. 모바일에서 자주 사용되므로 핀치 투 줌이 작동하면 정말 좋을 것입니다.

timvandermeij 에 2013년 09월 17일

이 작업을하고 있습니다. 관심있는 사용자는 https://github.com/timvandermeij/pdf.js/tree/pinch-to-zoom 에서 진행 상황을 주시 할 수 있습니다. 이미 태블릿과 휴대폰에서 핀치 투 줌 명령을 받고 있지만 정확도가 향상되어야하고 실제 다시 렌더링해야합니다 (이전 스케일로 새 스케일을 계산하는 방법을 찾아야합니다). 및 새로운 중간 지점 또는 다른 방법).

timvandermeij 에 2013년 09월 18일

@timvandermeij 이것을 구현하기 전에해야 할 한 가지는 확대 / 축소를 개선하는 것입니다. 먼저 CSS 변환을 사용하여 캔버스 크기를 조정 한 다음 다시 렌더링을 시작한 다음 다시 렌더링이 완료되면 새 캔버스를 표시하는 방법에 대해 이야기했습니다.

brendandahl 에 2013년 09월 18일

여기서 가장 좋은 해결책은 브라우저의 합성기를 사용하여 일시적인 확대 / 축소 (핀치 또는 두 번 탭하는 동안 애니메이션)를 수행 한 다음 pdf.js가 새 해상도로 다시 그리도록하는 것입니다. 여기서 슬픈 부분은 현재 콘텐츠가 확대 / 축소 변경을 인식하지 못하고 캔버스 크기를 새 해상도로 조정해도 효과가 없다고 생각한다는 것입니다. 이를 처리하기 위해 캔버스 사양을 개선해야 할 수도 있습니다.

snorp 에 2013년 09월 19일

hammer.js로 약간의 성공을 거두었습니다. 브라우저의 "네이티브"핀치 (이는 흐릿한 PDF로 이어짐)를 허용했고, 핀치되면 스케일 = scale * zoom으로 PDF 캔버스를 다시 그리고 캔버스에 CSS "transform : scale (1 / zoom)"을 부여합니다. 따라서 모두 같은 위치에 있습니다 (특히 텍스트와 앵커). 깔끔해 보인다.

skruse 에 2013년 12월 11일

👍3

@skruse 잠시 전에 Hammer.js와 함께 확대 / 축소 (# 3708 참조)를 구현하기위한 패치를 준비했지만 아직 모바일 / 태블릿 장치에서 제대로 작동하도록하는 데 성공하지 못했습니다. 핀치 동작으로 인해 많은 성능 및 안정성 문제가 발생했습니다. 구현 내용을 저희와 공유해 주시겠습니까? 그렇지 않은 경우 pinch to zoom 구현으로 풀 요청을 만들 수 있습니까? 아마도 모바일 / 태블릿 장치에서 더 유창하게 작동한다면 내 것을 대체 할 수있을 것입니다. :)

timvandermeij 에 2013년 12월 11일

안녕 skruse, 줌이 끝날 때 줌 비율을 어떻게 계산할 수 있었습니까?

rodoabad 에 2013년 12월 19일

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

또한 성능 문제도 있습니다. "scale"매개 변수 측면에서 모바일 장치에서 "너무 멀리"확대해서는 안됩니다. 2 ~ 3 개가 최대치라고 생각합니다.

skruse 에 2013년 12월 19일

이것에 대해 +2

sasikanth513 에 2015년 09월 07일

누군가이 2 년 된 문제에 대한 해결책을 얻었습니까?

MickL 에 2015년 11월 19일

내가 아는 한 이것에 대해 아무것도하지 않았습니다. https://github.com/mozilla/pdf.js/issues/2582#issuecomment -30316908에서 이전 의견을

timvandermeij 에 2015년 11월 19일

이에 대한 해결책을 찾고 싶습니다. 현재 이것은 pdf.js 사용을 막는 유일한 것입니다.

:(

rorysmorris 에 2016년 03월 10일

👍3

핀치 줌이 좋을 것입니다! pdf.js를 사용하고 핀치 줌 및 스 와이프 페이지가있는이 jquery 플러그인을 찾았습니다. http://touchpdf.net/demo/index.htm하지만 처음부터 pdf.js로 빌드했다면 좋을 것입니다 :-)

Manmade 에 2016년 03월 20일

+1 여기에서보고 싶습니다.

ltullman 에 2016년 08월 04일

+1, 또한 hammer.js를 사용하여 이벤트를 캡처 한 다음 pdf.js 확대 / 축소 함수를 호출하는 다른 예제도 비교적 "깨끗한"방법이 아닐까요?

sporkman 에 2016년 10월 05일

@sporkman 결국 내가 한 일은 캔버스를 정말 크게 렌더링 한 다음 기본 브라우저 확대 / 축소를 사용하여 확대 / 축소를 허용하는 것이 었습니다 (내 앱은 터치 장치 용으로 설계되었습니다). 필요한 경우 소스를 공유 할 수 있습니다.

rorysmorris 에 2016년 10월 05일

@rorysmorris 스크롤하는 동안 손가락을

toplay3 에 2016년 10월 05일

touch-action CSS 속성을 사용해 보셨습니까?
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

2016 년 10 월 5 일 오후 3시 15 분에 "toplay3" [email protected]이 작성했습니다.

@rorysmorris https://github.com/rorysmorris 어떻게 얻을 수 있었습니까?
스크롤하는 동안 손가락을 모을 때 기본 브라우저 확대 / 축소를 비활성화하는 방법은 무엇입니까? 나는 가지고있다
또한 pdf.js에서 hammer.js를 구현했지만 특정 문제를 해결할 수는 없습니다.
발행물
—
이 스레드를 구독했기 때문에이 메시지가 전송되었습니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/mozilla/pdf.js/issues/2582#issuecomment -251670785,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/ABTUT83E287dv4LSs4T_TGnzwe8yqCMYks5qw6LmgaJpZM4AXvZ2
.

Rob--W 에 2016년 10월 05일

❤1

@ 롭 --W
와우 천재! 이제 완벽하게 작동합니다! 정말 고마워!

toplay3 에 2016년 10월 05일

이 문제는 언제 구현 될 예정입니까? 이 문제가 처음 게시 된 지 꽤 오래되었습니다. 말할 것도없이 +1!

anik786 에 2016년 10월 14일

1 년이 지난 지금부터 매주이 문제를 확인합니다. 코어에 넣거나 hammer js를 사용하여 애드온으로 사용하면 멋질 것입니다.

MickL 에 2016년 10월 14일

이 스레드를보다 건설적으로하기 위해 다음은 UI에 대한 요구 사항입니다 (누군가가 문제의 해결을 진정으로 돕고 속도를 높이고 자하는 경우). PDF.js에 특정한 것은 없습니다.

수직으로 쌓인 DIV (크기가 다른) 세트를 확대 / 축소하고 이동하려면
사용자가 다른 배율로 뷰포트에서 길을 잃는 것을 허용하지 않습니다.
div 가시성 또는 가시적 스케일이 변경되면 감지하고 알립니다.

저전력 장치에서 모든 페이지를 최대 해상도로 칠하지 않기 때문에 후자는 중요합니다. 누군가 프로토 타입을 가지고 있다면 IRC에서 가시성 및 스케일 이벤트를 위해 PDFPageView를 연결하는 데 도움을 줄 것입니다. 5-good-beginner-bug도 설정할까요?

yurydelendik 에 2016년 10월 14일

나는 이것이 좋은 초보자 버그가 될 것이라는 데 동의하므로 그렇게 라벨을 붙이고 있습니다.

timvandermeij 에 2016년 10월 14일

이것은 모바일뿐만 아니라 두 손가락 트랙 패드 확대 / 축소 (Mac)를 지원하기위한 기능 요청도 받고 있습니다.

간단한 조사를 통해 확대 / 축소 제스처를 지원하는 브라우저 간 방법이 아직 없음을 발견했습니다.

Safari에는 몇 가지 특정 제스처 이벤트가 있습니다. https://developer.apple.com/reference/webkitjs/gestureevent
Firefox 애드온 코드는 제스처 이벤트에 액세스 할 수 있습니다 : https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mouse_gesture_events
핀치 이벤트를 ctrl-wheel으로 변환하는 몇 가지 버그질라 토론 (입력 및 다른 브라우저에 대한 참조 포함) : https://bugzilla.mozilla.org/show_bug.cgi?id=1052253

Rob--W 에 2016년 10월 18일

👍1

+1

Goldenflamer 에 2016년 10월 25일

👍1

@ toplay3 및 @ Rob--W 작동하기 위해 무엇을 했습니까? "터치 액션 : 자동;"을 추가 하시겠습니까? 무엇을? 그리고 당신은 또 무엇을 했습니까? 감사!

Manmade 에 2016년 10월 26일

안녕하세요, 여러분 대부분과 마찬가지로 핀치 투 줌 작업에 관심이 있습니다. 누군가 망치와 같은 외부 라이브러리를 사용하여도 그렇게 할 수 있습니까? 만든 경우 설정은 무엇입니까? @rorysmorris @ toplay3 @ Rob--W 감사합니다

squallstar 에 2016년 11월 30일

👍

kosssi 에 2016년 11월 30일

@rorysmorris 위의 질문에 대한 조언이 있습니까? 감사 :)

squallstar 에 2016년 12월 01일

안녕하세요 @squallstar- 처음에는 JS 핀치 및 줌 라이브러리를 사용하여이를 처리하려고했지만 몇 가지 문제를 발견했습니다. 내가 원하는 방식으로 확대 / 축소하지 않았습니다. 즉, 화면 가장자리에서 가장자리가 멀어지는 것을 원치 않았을 때 PDF 캔버스가 완전히 화면에서 벗어날 수 있습니다. 결국 저는 모바일 브라우저에 내장 된 기본 확대 / 축소를 사용하여 핀치 / 줌 / 탐색을 수행했습니다. 표시되는 픽셀 크기의 3 배로 PDF를 렌더링하도록 PDF.js를 설정 한 다음 CSS로 축소하여 확대 할 때 상당히 선명하게 유지됩니다. 도움이 필요하면 제 작업 예제를 보여 드릴 수 있습니다. 이행.

rorysmorris 에 2016년 12월 01일

@rorysmorris 감사합니다. 저에게 보여 주거나 (또는 스 니펫을 보내 주시면) 구현 방법을 알려 주시면 좋을 것입니다. 대단히 감사합니다 👍

squallstar 에 2016년 12월 01일

@squallstar 는 내 사이트의 문의 양식을 통해 저에게 이메일을 보내 주시면 오늘 나중에 데모를 받으실 수 있습니다 :) http://rorymorris.co.uk

rorysmorris 에 2016년 12월 01일

@squallstar 이것은 실제로 해결책은 아니지만 일종의 해결 방법입니다. 단점은 다음과 같습니다. 성능, 결과에 장치 의존성, 확대 / 축소가 무한하지 않습니다.

MickL 에 2016년 12월 01일

이러한 작업을 수행하기 위해 JavaScript를 사용하는 것과 달리 기본 스크롤 및 이동을 사용하면 성능이 크게 향상 됩니다. 최대 확대 / 축소 수준은 메타 뷰포트 태그를 사용하여 쉽게 구성 할 수 있습니다. 그래도 래스터 화 된 이미지에서 끝없는 확대 / 축소를 원하는 사람은 누구입니까? 그건 그렇고 멋진 "JS-ImageResizer"라이브러리! 헉

rorysmorris 에 2016년 12월 01일

성능은 추측에 가깝습니다. 가로 @ 2208px 너비에서 iPhone Plus를 사용한다고 가정 해 보겠습니다. 이제 6624px 캔버스가 있습니다. PDF 복잡성과 페이지 수에 따라 HTML 텍스트, 그래픽 등이 포함 된 3 개의 6000px 캔버스를 렌더링 할 수 있습니다.

나는 당신의 솔루션이 많은 사람들에게 좋은 것 같아요. 그러나 실제로 PDF.js 확대 / 축소 및 다시 렌더링을 트리거하는 것보다 더 많은 가짜 확대 / 축소를 설명했듯이 :)

MickL 에 2016년 12월 01일

사실, 그 측면에서 성능면에서 좋지 않습니다. 이에 대한 저의 특별한 사용 사례에서는 300 페이지 이상의 PDF를 iPad (레티 나) 크기로 렌더링하고 각각의 상단에 드로잉 캔버스가 있어야했습니다!

PDF.js는 약 10 개의 렌더링 된 PDF 페이지에서 브라우저 (iOS Safari)를 충돌 시키므로 결국 이전 / 다음 버튼으로 한 번에 하나의 PDF 페이지 만 표시해야했습니다. 이상적이지 않습니다! 그리고 저는 동의합니다. PDF.js에 내장 된 기본 확대 / 축소 기능이 훨씬 더 좋았을 것입니다.

rorysmorris 에 2016년 12월 01일

pinch-zoom 예제를 사용하려면 kamihq.com을 확인하십시오.

toplay3 에 2016년 12월 02일

@rorysmorris 어제 저녁 문의 양식을 통해 이메일을 보냈습니다. 혹시 말씀하신 예를 저에게 보내 주시겠습니까? :) 감사

squallstar 에 2016년 12월 02일

실제 사례 ( @rorysmorris , @ Rob--W 등)가있는 사람이

ltullman 에 2016년 12월 13일

@rorysmorris 귀하의 웹 사이트를 통해 연락을 시도했습니다. 누군가가 이것에 대한 실제적인 예가 있다면 공유해 주시겠습니까?

hetalv985 에 2017년 01월 26일

@ltullman @ hetalv985 내가 직접 구현하도록 관리했습니다. 여기에서 내 요점을 확인하십시오.

https://gist.github.com/squallstar/1d720e93eabe7f60dc61b547d2c19228
viewer.html 끝에 붙여 넣기 만하면됩니다 👍 그게 다입니다.

squallstar 에 2017년 01월 26일

👍8 🎉4

감사합니다 스콜 스타. 그러나 우리는 viewer.html을 사용하지 않습니다. iOS 모바일 앱에서 div 태그 안에 pdf를 렌더링하고 있습니다. 이 경우이 기능을 어떻게 사용합니까? 뷰어 파일을 포함해야합니까?

hetalv985 에 2017년 01월 27일

그래서 우리는 매우 비슷한 handleMouseWheel 함수를 가지고 있습니다. 터치 제스처 또는 hammer js와 똑같은 기능을 사용하지 않는 이유는 무엇입니까? 1 ~ 2 시간 안에 해결되지 않나요?

MickL 에 2017년 03월 20일

불행히도 그렇게 쉽지는 않습니다. https://github.com/mozilla/pdf.js/issues/2582#issuecomment -30316908에서 이전 의견을

timvandermeij 에 2017년 03월 20일

그게 유일한 문제라면 ... :)

또한 "ctrl + mousewheel"에서 Google지도에서와 같이 커서 위치로 스크롤되는 것을 발견했습니다. 그러나 스크롤바가 없으면 작동하지 않습니다 (페이지로드시 기본값 임). 따라서 이것이 자연스럽게 느껴지도록 핀치 줌 및 마우스 휠 줌에 필요한 경우 패딩을 만들어야합니다.

mousewheel-zoom과 pinch-zoom이 동일한 기능을 사용한다면 좋은 추가가 될 것입니다.

당신의 커밋은 이미 좋아 보입니다. 아마도 성능은 더 이상 문제가되지 않을 것입니다. 3 년 전 일입니다. 물론 가장 좋은 해결책은 다음과 같습니다 : 시작 핀치-> 흐리게 확대-> 끝 핀치-> 실제 줌 pdf. 또한 user-scalable=no 은 더 이상 최신 iOS에서 작동하지 않습니다. 따라서 우리도 preventDefault() 해야 할 수도 있습니다.

MickL 에 2017년 03월 21일

나는 이것에 많은 시간을 투자했다. 실제로 가능해 보이지만 해결할 수없는 몇 가지 문제가 있습니다.

hammer.js는 pinchend에서만 작동합니다 (pdf.js가 확대되면 항상 pinchmove가 취소됩니다)
mousewheel-zoom과 동일한 방법을 사용했지만 pinchend의 중심으로 완벽하게 스크롤 할 수 없습니다.
때로는 hammer.js에 의해 중심이 올바르게 설정되지 않았습니다.
때때로 pinchend는 hammer.js에 의해 호출되지 않고 줌이 발생하지 않습니다.
나는 pinchmove (css zoom on pinchmove, pdf js zoom on pinchend)에 CSS 변환을 추가하려고 시도했지만 다시 완벽하게 스크롤 할 수 없었습니다 (css 번역이있는 위치 # 뷰어)
hammer.js는 다른 터치 액션 (우리의 경우 일반 페이지 스크롤)을 방지하므로 두 손가락을 사용할 때만 방지하도록 hammer.js를 수정해야했습니다.
(마우스 휠 확대 / 축소와 동일 :) 스크롤바가 없으면 (전체 문서를 볼 수 있도록 축소) 문서를 핀치 중심에 배치 (스크롤) 할 수 없습니다.

아마도이 모든 것은 해결할 수 있지만 iOS 10은 user-scalable=no 비활성화 된 경우에도 페이지 확대를 허용합니다. 따라서 pinch preventDefault ()에서 몇 번 작동하지 않고 전체 페이지가 확대됩니다. 이로 인해 최종 사용자에게 중요한 문제가 발생할 수 있습니다 (바로 나가는 유일한 방법은 도구 모음을 두 번 탭하는 것입니다).

MickL 에 2017년 03월 27일

👍1

@MickL 나는 그것을 시도했다. CSS 속성 "pointer-events : none"을 pdfViewer 및 page 클래스에 추가하여 "pinch zoom"취소를 피할 수있었습니다. iOS).

수정 된 마우스 휠 방법 (적용 할 다음 배율, 현재 "중간 위치"또는 대상 및 "중간 위치"의 델타 전달)을 사용할 때 완벽한 확대 / 축소 위치 이벤트가 없다고 설명한 것과 동일한 문제가 있습니다. pdfViewer.container.scrollLeft 및 pdfViewer.container.scrollTop에 의해 관리되는 왼쪽, 오른쪽, 위, 아래로 이동하는 정도). 시간 초과로 인해 시청자가 모든 더블 터치 이벤트에서 렌더링하지 못하도록하는 오류가 항상 발생하는 것 같습니다.

모든 스케일 델타에서 모든 것을 렌더링하지 않기 위해 CSS 스케일 변환을 적용 할 위치에 대한 힌트가 있습니까?

betovidal 에 2017년 03월 29일

@betovidal 마지막 게시물 이후 몇 달이
뭔가 알아 내기 위해 함께 일할 수 있을까요?

buzzyboy 에 2017년 08월 07일

👍5

@squallstar iOS에서 솔루션을 아주 간단히 테스트했습니다. 그리고 지금까지 그것은 나를 위해 일하고 있습니다! 솔루션을 공유해 주셔서 감사합니다 💯

vuinguyen 에 2017년 09월 18일

@vuinguyen 감사합니다! 나는 그것이 당신에게도 효과가 있다는 것을 기쁘게 생각합니다.)

squallstar 에 2017년 09월 19일

+1

sunsus 에 2017년 10월 30일

@squallstar 의 코드를 PR에 통합 할 희망이 있습니까? 현재 사용자가 모바일 장치에서 핀치 및 확대 / 축소를 시도하는 경우 스크롤이 "잠기고"페이지를 새로 고침해야 더 많이 탐색 할 수 있습니다. 작은 "+"및 "-"버튼에 의존하여 탐색하는 것은 2018 년 모바일 뷰어에게는 다소 직관적이지 않습니다.

prohtex 에 2018년 01월 22일

핀치 줌은 iOS 10 이후 iOS에서 "손상"되었습니다. 모든 것이 완벽하게 구현 되더라도 Safari는 모든 것을 망칠 것입니다.

MickL 에 2018년 01월 22일

iOS 관련 문제입니까? Android에서 pdfjs가 제공하는 PDF를 확대 / 축소 할 수 있습니까?

prohtex 에 2018년 01월 22일

브라우저에 따라 다릅니다. iOS 브라우저 만 "user-scalable = no"를 무시한다고 가정합니다.

MickL 에 2018년 01월 22일

지금은 모바일에서도 문서를 확대 / 축소하려면 플러스 / 마이너스 버튼을 눌러야합니다. 특히 핀치 투 줌이 활성화되어 있기 때문에 이것은 정말 이상합니다. 모바일에서 가장 좋은 방법은 "자연스러운"크기로 렌더링하고 웹 페이지와 비슷하게 브라우저가 확대 / 축소를 제어하도록하는 것입니다.

나에게 이것은 모든 것을 말해줍니다. 나는 이것이 특정 기능에 대한 것이 아니라 모바일 경험에 대한 접근 방식이라고 생각합니다.

iOS 브라우저 만 "user-scalable = no"를 무시한다고 가정합니다.

옳은.

prohtex 에 2018년 01월 22일

"Box Content Preview"(PDFJS를 사용하여 PDF를 표시 함)가 이에 대한 좋은 구현을 수행하는 것을 보았습니다. 이것은 뷰어의 Codepen입니다.

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

그리고 이것은 수정을위한 풀 요청입니다.

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

나는 누군가가 그들의 솔루션을 기반으로 PDFJS와 비슷한 것을 만들 수 있다고 생각했습니다. 내가 직접 구현하고 내가 할 경우 코드를 게시 할 것입니다. 다른 사람 (아마도 나보다 더 많은 경험이있는 사람)도 협업하고 시도 할 수 있다면 좋을 것입니다!

amurillo17 에 2018년 05월 31일

@ amurillo17 링크 주셔서 감사합니다. Box 솔루션은 환상적으로 보입니다. pdfjs에서 이와 같은 작업을보고 싶습니다. 진행 상황에 대해 계속 업데이트하십시오!

prohtex 에 2018년 06월 01일

이 문제에 대한 좋은 해결책이 있습니까?

$tefracky picture$ tefracky 에 2018년 09월 02일

이것에 대한 업데이트가 있습니까? 가지고 있으면 큰 기능이 될 것입니다!

chrisgillis 에 2018년 10월 26일

👍3

어떤 업데이트? 감사

rcarretteGroupeBRIAND 에 2019년 03월 18일

👍7

이 기능을 기존 뷰어에 추가하는 간단한 방법이 있습니까?

AnReZa 에 2019년 04월 10일

👍1

이 기능을 기존 뷰어에 추가하는 간단한 방법이 있습니까?

아니.

prohtex 에 2019년 04월 10일

@prohtex 흠, 꽤 슬프

AnReZa 에 2019년 04월 10일

@prohtex 흠, 꽤 슬프

누군가가 코드를 PR에 통합 할 때만 추가 될 것이며 (슬프게도 내가 아니라) 몇 년이 걸릴 수도 있습니다.

prohtex 에 2019년 04월 10일

해결 방법이 있지만 "Android 용 Firefox"애드온에서 iOS에 대해 신경 쓰지 않기 때문에 "Android 전용"입니다.
https://github.com/M-Reimer/android-pdf-js/blob/master/patches/pdfjs-pinch-gestures.js
My Makefile은 "web / viewer.js"에 이것을 추가합니다. 터치 이벤트에 등록하고 핀치 제스처를 버튼 클릭으로 변환합니다.

M-Reimer 에 2019년 04월 22일

해결 방법이 있지만 "Android 용 Firefox"애드온에서 iOS에 대해 신경 쓰지 않기 때문에 "Android 전용"입니다.

내 iPad에서도 작동하지만 약간 느리고 자연스럽지 않습니다. 핀치 후 한 단계 씩 확대됩니다. 따라서 확대 / 축소하려면 손가락을 뗄 필요가 있으며, 얼마나 멀리 집 었는지는 중요하지 않습니다. 이것은 정상적인 동작입니까, 아니면 장치 특정 버그입니까? 어쨌든 감사합니다. 올바른 방향으로 나아가는 단계이기 때문입니다.

AnReZa 에 2019년 04월 23일

내 iPad에서도 작동하지만 약간 느리고 자연스럽지 않습니다. 핀치 후 한 단계 씩 확대됩니다. 따라서 확대 / 축소하려면 손가락을 뗄 필요가 있으며, 얼마나 멀리 집 었는지는 중요하지 않습니다. 이것은 정상적인 동작입니까, 아니면 장치 특정 버그입니까? 어쨌든 감사합니다. 올바른 방향으로 나아가는 단계이기 때문입니다.

코드를 보면 이것은 실행 가능한 솔루션이나 좋은 해결 방법이 아닙니다. 이 모든 작업은 확대 / 축소 이벤트를 감시하고 jQuery로 [-] [+] 버튼을 클릭하는 것을 시뮬레이션하는 것입니다.

prohtex 에 2019년 04월 23일

@prohtex 정확합니다. 시도해 보면 어떤 일이 발생하지만 전혀 작동하지 않습니다.

AnReZa 에 2019년 04월 23일

내가 말했듯이 완벽하지는 않지만 아무것도없는 것보다 낫다.
적어도 나에게는 작은 모바일 화면에서 작은 확대 / 축소 버튼을 누르는 것보다 핀치 제스처를하는 것이 더 쉽습니다. 모든 모바일 장치 사용자가 작동하기를 기대하는 제스처가 작동하도록합니다.

내 iPad에서도 작동하지만 약간 느리고 자연스럽지 않습니다. 핀치 후 한 단계 씩 확대됩니다. 따라서 확대 / 축소하려면 손가락을 뗄 필요가 있으며, 얼마나 멀리 집 었는지는 중요하지 않습니다. 이것은 정상적인 동작입니까, 아니면 장치 특정 버그입니까? 어쨌든 감사합니다. 올바른 방향으로 나아가는 단계이기 때문입니다.

그것은 버튼을 친다. 이 간단한 접근 방식으로는 "자연 확대 / 축소"가 불가능하며 PDF.js를 너무 많이 사용하고 싶지 않습니다. 이것은 내 애드온의 목표가 아닙니다.

그러나 손가락이 얼마나 멀리 움직 였는지에 따라 여러 버튼을 누를 수 있어야합니다. 시도해 볼게요.

코드를 보면 이것은 실행 가능한 솔루션이나 좋은 해결 방법이 아닙니다. 이 모든 작업은 확대 / 축소 이벤트를 감시하고 jQuery로 [-] [+] 버튼을 클릭하는 것을 시뮬레이션하는 것입니다.

나는 제안에 개방적이지만, 이것은 Firefox 내에서 PDF.js를 PDF 뷰어로 사용할 수 있도록하려는 Addon의 일부이기 때문에 깊은 수정을하지 않을 것입니다.

BTW : 내 코드에는 한 줄의 jQuery가 없습니다. 이것은 원시 JavaScript입니다.

M-Reimer 에 2019년 04월 23일

손가락을 움직이는 동안 줌 단계를 실제로 수행 할 수 있어야합니다.
좀 더 개선해 보겠습니다 만, 제가 사용할 유일한 통신 경로는 제가 원격 제어 할 두 개의 버튼입니다. 이렇게하면 내 코드가 PDF.js를 방해하지 않습니다.

M-Reimer 에 2019년 04월 23일

👍1

BTW : 내 코드에는 한 줄의 jQuery가 없습니다. 이것은 원시 JavaScript입니다.

나는 바로 잡았다. 곧 성숙한 솔루션을 기대합니다.

prohtex 에 2019년 04월 23일

이를 수행하는 방법은 핀치 줌 동안 CSS 변환을 사용하는 것입니다. 또한 줌뿐만 아니라 손가락의 움직임도 적용해야합니다. 그런 다음 pinch-zoom-end에서 CSS 변환을 재설정하고 실제 확대 / 축소를 적용하고 pdf.js로 스크롤 할 수 있습니다.

추신 : 비 jQuery 프로젝트에서 jQuery를 사용하는 것은 이미 나에게 나쁜 습관처럼 보입니다.

MickL 에 2019년 04월 23일

추신 : 비 jQuery 프로젝트에서 jQuery를 사용하는 것은 이미 나에게 나쁜 습관처럼 보입니다.

@ M-Reimer는 어디에서 JQuery를 사용합니까? 그가 이미 언급했듯이 그의 해결 방법은 일반 Javascript 만 사용합니다.

AnReZa 에 2019년 04월 23일

그래 .. 내 잘못이야. 요점은이 솔루션이 제대로 작동하지 않는다는 것입니다.

prohtex 에 2019년 04월 23일

😕1 👍1

손가락 사이의 거리가 확대 / 축소 정도를 변경하도록 업데이트되었습니다.
https://github.com/M-Reimer/android-pdf-js/blob/master/patches/pdfjs-pinch-gestures.js
어떤 이유로 든 실제 확대 / 축소 및 다시 그리기로 인해 터치 이벤트가 "종료"되기 때문에 손가락을 이동하는 동안 확대 / 축소 할 수 없습니다.
다시 말하지만, 제스처를 전혀 다루지 않는 것보다 낫습니다.

M-Reimer 에 2019년 04월 27일

👍3

@ M-Reimer 작업에 감사드립니다. 적어도 이전 버전에 비해 개선 된 것입니다. 누군가가 확대 / 축소하는 동안 다시 그릴 수있는 솔루션을 찾을 수 있습니다. 또는 CSS 변환을 사용하여 일시적으로 확대 / 축소 한 다음 터치 제스처가 끝난 후 결국 다시 그릴 수 있습니다.

AnReZa 에 2019년 05월 07일

@anvaka 케이스를 다소 간단한 해결책 이있는 것 같습니다. 안타깝게도 현재 테스트 할 시간이 없지만 한 번 시도해보고 싶을 수도 있습니다.

AnReZa 에 2019년 05월 15일

더 많은 사용자 피드백을 제공하기 위해 핀치 이동 중에 CSS 변환을 사용하는 @squallstar 솔루션을 기반으로 한 버전을 만들었습니다. 렌더링은 터치 엔드에서만 수행됩니다. 완벽하지는 않습니다. 렌더링 후 스크롤 위치 지정에 약간의 문제가 있지만 누군가이를 시작으로 사용할 수 있습니다.

https://gist.github.com/jsprpalm/12217feab2f1acc14bd8e8508291619e

jsprpalm 에 2019년 05월 23일

👍4

이 문제에 대한 해결책이 아직 없습니까? 모바일에서 pdf.js를 사용하고 싶지만 확대 / 축소 기능이 없으면 작은 화면에서는 거의 쓸모가 없습니다.

ipartola 에 2019년 10월 08일

hammer.js를 사용하지 않고 작동하도록 만들었지 만 고객 프로젝트를위한 것이기 때문에 코드를 공유 할 수 없습니다. 나는 pinch와 doubletap을 구현하고 css로 확대하고 pinchend에서 pdf.js를 확대했습니다. 일부 요소는 너비 / 높이를 설정해야하며 일부는 css-transform으로 변환 할 수 있습니다. 또한 확대 / 축소하는 동안 pdf.js viewer.js의 스크롤 시계를 방지해야합니다. 많은 시간이 걸렸지 만 결국 꽤 잘 작동했습니다.

MickL 에 2019년 10월 08일

이 문제에 대한 해결책이 아직 없습니까? 모바일에서 pdf.js를 사용하고 싶지만 확대 / 축소 기능이 없으면 작은 화면에서는 거의 쓸모가 없습니다.

개발자가 솔루션을 제공하기 위해 pdf.js 코드베이스 단계를 경험하기 전까지는 pdf.js를 구현하는 각 사람이 함께 작업을 수행해야합니다. 이 프로젝트에서 큰 우선 순위가 아닌 것 같습니다.

다음은 큰 어려움없이 통합 할 수있는 PR입니다.

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

prohtex 에 2019년 10월 08일

👍1

https://gist.github.com/jsprpalm/12217feab2f1acc14bd8e8508291619e

@jsprpalm 감사합니다.

aidrouge 에 2019년 10월 09일

👎1

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

larsneo 에 2019년 11월 09일

👍4

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

내 PDF 뷰어 애드온에 이것을 추가했습니다. 꽤 잘 작동하는 것 같습니다.
https://addons.mozilla.org/android/addon/android-pdf-js/

M-Reimer 에 2019년 11월 10일

편집 : 나를 위해 작동

prohtex 에 2019년 11월 10일

더 자연스러운 설정 작업을 위해 다음을 수행하십시오.

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

punisher97 에 2019년 12월 17일

최소 확대 / 축소는 어떻게 설정합니까? 이미지를 너무 줄여서 점으로 만들 수 있습니다.

KazysNoobiys 에 2020년 01월 29일

@KazysNoobiys와 같은 질문이 있습니다.
뷰포트의 최소 배율은 확대 / 축소에 영향을주지 않습니다.

vniehues 에 2020년 07월 29일

저는 다른 작업을 진행 중입니다. 다양한 스 와이프 기능을 처리하기 위해 pdf.js를 오버레이하는 투명한 CSS 레이어입니다. 오버레이 부분은 이제 작동하지만 어떤 함수를 호출해야할지 모르겠습니다.
if (스 와이프 == '왼쪽') ????
다음 페이지로 이동하거나 이전 페이지로 백업하거나 확대하려면 어떤 기능을 호출해야합니까?

bradporter 에 2020년 10월 12일

시간과 생명을 절약하고 다음과 같이 .html 파일을 편집하십시오.

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

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

WeiFei365 에 2020년 10월 19일

Pdf.js: 모바일에서 더 자연스러운 확대 / 축소 사용

가장 유용한 댓글

모든 95 댓글

관련 문제