Panzoom: 핀치 줌은 이미지를 화면 중앙에서 멀어지게 이동합니다.

문제를 열어주셔서 감사합니다. iOS 및 Android 에서 데모 를 시도했지만 재현할 수 없습니다. 데스크톱 브라우저를 나열했지만 핀치 줌은 주로 모바일용입니다(일부 장치에는 마우스와 터치 스크린이 모두 있음). 테스트할 수는 없지만 사용 중인 장치를 아는 것이 도움이 될 수 있습니다.

문제를 재현하지 않고 할 수 있는 일은 많지 않습니다. 더 깊이 파고들어 Panzoom의 코드 변경으로 문제가 해결되거나 데모 이외의 다른 테스트 사례가 문제를 재현한다는 것을 발견하면 여기에 댓글을 달아주시면 패치를 고려하겠습니다.

안녕하세요 윌리슨 씨.

당신의 답변에 감사드립니다. 데스크톱과 모바일 버전을 모두 사용했습니다.
브라우저를 말했다. 나는 이것을 테스트하기 위해 Redmi Note 8T와 Galaxy 8을 사용했습니다.

이 문제를 보기 위해 내가 개발 중인 데모를 볼 수 있습니까?
이름을 입력하고(아무것도 저장되지 않고 단지 어린이용 게임일 뿐입니다)
"Exploració lliure" 버튼에서; Panzoomed로 리디렉션됩니다.
영상. 보시다시피 마우스휠 줌은 잘 작동하지만 핀치 줌(및
실제로 panzoom.zoomIn() 및 panzoom.zoomOut() 버튼도 이동)
영상.

http://bake250.isdevelping.com/objectiueexplora/solsticidelspirineus/

도움을 주셔서 진심으로 감사드리며 불편을 드려 죄송합니다.

친애하는;

호르헤 산체스 블랑코

엘룬, 9월 21일 2020 년 las 19:45, Timmy Willison (<
[email protected]>) 설명:

문제를 열어주셔서 감사합니다. 나는 데모를 시도
iOS 및 Android의 https://timmywil.com/panzoom/demo 및 할 수 없습니다
낳다. 데스크톱 브라우저를 나열했지만 핀치 줌은 주로
모바일(일부 장치에는 마우스와 터치 스크린이 모두 있음). 그것은 수도
내가 어떤 기기를 사용하고 있는지 알면 도움이 될 것입니다.
테스트할 수 없습니다.

문제를 재현하지 않고 할 수 있는 일은 많지 않습니다. 만약에
더 깊이 파고들어 Panzoom의 코드 변경이 문제를 해결한다는 것을 발견했습니다(또는
데모 이외의 다른 테스트 사례가 문제를 재현함), 제발
여기에 댓글을 달아주시면 패치를 고려하겠습니다.

—
스레드를 작성했기 때문에 이 메시지를 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/timmywil/panzoom/issues/512#issuecomment-696267620 ,
또는 구독 취소
https://github.com/notifications/unsubscribe-auth/AOF4EAOK6YQVAHINOAQ3JZTSG6GMRANCNFSM4RUT4P7A
.

같은 문제가 있습니다. 초점이 제대로 계산되지 않고 맨 아래에있는 것 같습니다.

@jsblanco 알겠습니다 . Panzoom은 transform-origin: 50% 50% 에 의존하고 있습니다. 이 경우 애니메이션은 이미지 중앙이 아닌 뷰포트 중앙(이 경우 더 낮음)에 맞춰집니다. 이미지가 너무 아래로 내려가는 것을 방지하기 위해 contain: outside 설정 때문에 이미지를 움직입니다. zoomToPoint 를 호출하거나 focal 옵션과 함께 zoom 를 대신 사용하고 뷰포트에서 실제로 이미지의 중심인 점을 찾아 이 문제를 해결할 수 있다고 생각합니다. 말이 돼?

contain: outside 가 설정되면 기본적으로 이와 같은 작업을 수행할 수 있습니다.

@rmatec contain: outside 도 사용하고 있습니까?

나는 포함 옵션을 사용하지 않습니다. 제 경우에는 초점이 하단 중앙에 있는 것 같습니다. 핀치 인 또는 아웃은 해당 지점을 기준으로 수행됩니다.

@rmatec 데모에서 이 동작을 볼 수 없기 때문에 재생 중인 옵션이 있어야 한다고 생각합니다. 설정하고 있는 다른 옵션이 있습니까?

Panzoom을 초기화하기 위해 다음을 사용하고 있습니다.

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

데스크톱에서는 완벽하게 작동하지만 어떤 이유로 모바일에서는 작동하지 않습니다.

네, 귀하의 경우는 다를 수 있습니다. https://jsbin.com 또는 https://codepen.io 에서 재생산하고 새 티켓을 만들 수 있습니까? 다음은 복제할 수 있는 템플릿입니다. https://jsbin.com/dibofogini/1/edit?html ,js,output.

할 것이다. 감사 해요.

어떤 이유로 focal 옵션을 사용하는 동안 이미지가 근처에 생성됩니다.
오른쪽 하단에 있으며 더 이상 확대/축소가 불가능합니다.
내가 뭔가 잘못하고 있는 건 아닐까? 특정 매개변수를 전달해야 하나요?
초점을 나타내기 위해 panzoom.zoomIn() 및 .zoomOut() 또는 그냥
panzoom 초기 선언에 포함하는 것으로 충분해야 합니까?

그만한 가치가 있기 때문에 초점을 맞추기 위해 다음과 같은 방법을 시도했습니다.
가리키다. 나는 또한 원시 숫자를 넣어 보았습니다.

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

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

포함: 외부를 모두 제거하면 검은색 이미지만 렌더링됩니다.

엘 3월 22일 2020년 15:59초, Timmy Willison(<
[email protected]>) 설명:

@jsblanco https://github.com/jsblanco 알겠습니다. Panzoom은 변환 원본에 의존하고 있습니다.
50% 50%, 애니메이션을 뷰포트 중앙에 배치하는 대신
이 경우 더 낮을 것입니다. 그것
방지하기 위해 포함: 외부 설정으로 인해 이미지를 이동합니다.
너무 멀리 내려가는 이미지. 전화하면 해결될 것 같아요
zoomToPoint 또는 대신 초점 옵션과 함께 확대/축소를 사용하여
실제로 이미지의 중심인 뷰포트의 점입니다. 하다
말 되네?

나는 아마도 기본적으로 다음과 같은 것을 할 수 있습니다.
설정됩니다.

@rmatec https://github.com/rmatec 당신은 또한 포함: 외부를 사용하고 있습니까?

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/timmywil/panzoom/issues/512#issuecomment-696740708 ,
또는 구독 취소
https://github.com/notifications/unsubscribe-auth/AOF4EANBQXE5TDJOZNTBN6LSHCUVXANCNFSM4RUT4P7A
.

@jsblanco 죄송합니다. 그보다 더 복잡합니다. 이를 수행하는 방법은 이미지의 중심을 찾아 팬줌 상위 뷰포트의 해당 지점으로 변환하는 것입니다. 그런 다음 이를 초점 옵션으로 전달하고 확대/축소를 호출할 때마다 계산해야 합니다. 그러나 내가 당신을 위해 예제를 만들 수 있는지 보자. zoomIn / zoomOut 수정됩니다.

즉, 핀치 줌 동작은 변경되지 않습니다. 틀림없이, 특정 지점을 확대/축소하면 contain: outside 와 충돌하므로 옳은 일을 하고 있습니다. 뷰포트에 제대로 유지하기 위해 이미지를 이동해야 하는 경우 확대/축소를 허용하지 않는 것 외에는 수정 사항이 확실하지 않습니다.

네, 귀하의 경우는 다를 수 있습니다. https://jsbin.com 또는 https://codepen.io 에서 재생산하고 새 티켓을 만들 수 있습니까? 다음은 복제할 수 있는 템플릿입니다. https://jsbin.com/dibofogini/1/edit?html ,js,output.

내 특정 사례에 대해 https://github.com/timmywil/panzoom/issues/513 을 만들었습니다. 문제를 보여주는 JSBin에 대한 링크가 있습니다.

"animate: true"를 켜두면 이 문제를 재현할 수 있습니다.
이 문제는 "animate: false"에서는 나타나지 않습니다. 해당 문제를 재현하기 위해 @timmywil 템플릿을 복제했습니다.

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

(직접 확대/축소하는 휠 이벤트 리스너를 구현했습니다. 충분히 빠르게 스크롤하면 위치 이동이 발생합니다.)

좋아, 문제는 동일하지만 구성이 다르기 때문에 내 문제를 #515로 옮겼습니다.

안녕;

답변이 오래 걸려서 죄송합니다. 나는 그것이 포함 = "외부"와 관련이 있다고 생각하지 않습니다. 방금 제거했는데 강렬하지는 않지만 여전히 동일한 동작을 나타냅니다. 그러나 panzoom div와 이미지는 거리와 독립적으로 설정된 크기를 갖습니다. 그것이 문제의 일부가 될 수 있습니까?

감사합니다

@jsblanco 수정 사항은 동일해야 합니다.

안녕하세요, 휠 줌이 중심에서 멀어지는 것에 대한 새로운 문제를 열려고 했으나 이 문제를 살펴보고 충분히 관련이 있다고 생각했습니다. 다음은 내 발견 및 해결 방법입니다. 트랙패드를 사용하는 MacBook의 브라우저에서만 테스트했습니다.

초점 확대/축소 데모 의 경우 Safari, Firefox에서 확대/축소할 때 중심이 왼쪽 상단으로 떠 있는 것을 알 수 있습니다. Chrome에서도 동일한 동작이 발생하지만 웹 검사기가 열려 있는 경우에만 발생합니다.

그래서 나는 그것을 조사하기 시작했고 내 의심은 마우스 휠 이벤트가 너무 자주 트리거되고 Panzoom의 비동기 특성 으로 인해 상황이 올바르게 업데이트되지 않는다는 것입니다. 확대/축소 빈도를 조절하려고 하면 도움이 될 수 있고 "작동"하는 것처럼 보입니다. 여기에서 작동하는 것을 볼 수 있습니다: https://jsbin.com/joliduwulo/1/edit?html ,js,output.

주의 사항은 확대/축소가 덜 부드럽게 나타납니다. 이 예제에서는 20ms마다 최대 1개의 확대/축소로 제한하고 있지만 특히 Firefox에서 대형 SVG로 테스트할 때 초점을 잃지 않도록 약 50ms로 설정해야 했습니다.

@timmywil 어쨌든 새로운 문제를 열려면 저에게 알려주십시오. 이것은 해킹처럼 보이지만 나를 위해 문제를 해결합니다. 솔루션이 탐색할 가치가 있다고 생각한다면 기여하는 데 도움을 드리고 싶습니다.

뷰포트가 아닌 팬줌 요소의 중앙에 +1

panzoom.ts:426에서 이동 기능 교체

함수 이동(이벤트: PointerEvent) {
만약 (
!is패닝 ||
origX === 정의되지 않음 ||
원본 === 정의되지 않음 ||
startClientX === 정의되지 않음 ||
startClientY === 정의되지 않음
) {
반품
}
addPointer(포인터, 이벤트)
const 현재 = getMiddle(포인터)
if (pointers.length > 1) {
// 처음 2개의 포인터 사이의 거리를 사용합니다.
// 현재 스케일을 결정하기 위해
// 모바일에서 확대/축소 문제 방지
if (startDistance === 0) {
startDistance = getDistance(포인터);
}
const diff = getDistance(포인터) - 시작 거리
const toScale = constrainScale((diff * options.step) / 80 + startScale).scale
ZoomToPoint(축척, 현재)
} 또 다른 {
// 모바일 줌 초점 오류를 방지하기 위해 else 조건 추가
팬(
origX + (current.clientX - startClientX) / 규모,
origY + (current.clientY - startClientY) / 규모,
{
애니메이션: 거짓
}
);
}
}