Panzoom: ピンチズームは画像を画面の中央から遠ざけます

問題を開いていただきありがとうございます。 iOSとAndroidでデモを試しましたが、再現できませんでした。 デスクトップブラウザをリストしましたが、ピンチズームは主にモバイル用です（ただし、一部のデバイスにはマウスとタッチスクリーンの両方があります）。 テストできない可能性がありますが、使用しているデバイスを知っておくと役立つ場合があります。

問題を再現できずにできることはあまりありません。 さらに深く掘り下げて、Panzoomのコード変更で修正された（またはデモ以外の別のテストケースで問題が再現された）場合は、ここにコメントしてください。パッチを検討します。

こんにちはウィリソンさん。

お返事ありがとうございます。 デスクトップ版とモバイル版の両方を使用しました
ブラウザは言った。 これをテストするために、RedmiNote8TとGalaxy8を使用しました。

この問題を確認するために、私が開発しているデモを見てみてください。
名前を入力して（何も保存されません。子供向けのゲームです）、クリックするだけです。
「Exploraciólliure」ボタン。 Panzoomedにリダイレクトされます
画像。 ご覧のとおり、マウスホイールズームは正常に機能しますが、ピンチズーム（および
実際には、panzoom.zoomIn（）ボタンとpanzoom.zoomOut（）ボタンも）移動します
画像。

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

本当にありがとうございました。ご不便をおかけして申し訳ございません。

よろしくお願いします;

ホルヘ・サンチェス・ブランコ

El lun。、9月21日 2020 a las 19:45、Timmy Willison（<
[email protected]>）escribió：

問題を開いていただきありがとうございます。 デモを試しました
https://timmywil.com/panzoom/demo（iOSおよびAndroid）で、できませんでした
再現します。 デスクトップブラウザをリストしましたが、ピンチズームは主に
モバイル（一部のデバイスにはマウスとタッチスクリーンの両方があります）。 かもしれない
使用しているデバイスを知っておくと役に立ちます。
テストできません。

問題を再現できずにできることはあまりありません。 もしも
さらに深く掘り下げてみると、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 。

しましょう。 ありがとう。

何らかの理由で、フォーカルオプションを使用しているときに、画像が
右下。これ以上のズームは、インでもアウトでも発生しません。
多分私は何か間違ったことをしていますか？ 特定のパラメータを渡す必要がありますか
panzoom.zoomIn（）および.zoomOut（）に移動して、焦点を示すか、または単に
パンズームの最初の宣言にそれを含めるだけで十分ですか？

その価値について、私は焦点を取得するために次の方法を試しました
点。 生の数字も入れてみました。

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

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

contains：outsideを削除すると、黒い画像がレンダリングされます。

エルマール、9月22日 2020 a las 15:59、Timmy Willison（<
[email protected]>）escribió：

@jsblancohttps ://github.com/jsblancoなるほど。 Panzoomはtransform-originに依存しています：
50％50％、アニメーションをビューポートの中央に配置します
画像の中央よりも低くなります。この場合は低くなります。 これ
含むために画像を移動します：外部設定を防止するために
あまりにも下に行くことからの画像。 これは電話することで修正できると思います
ZoomToPointを使用するか、代わりにフォーカスオプションを指定してズームを使用して検索します
実際には画像の中心であるビューポート内のポイント。 しますか
意味がある？

含まれている場合、デフォルトでこのようなことを行うことができます：外部
が設定されます。

@rmatec https://github.com/rmatecまた、contain：outsideを使用していますか？

—
あなたが言及されたので、あなたはこれを受け取っています。
このメールに直接返信し、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に移動しました。

やあ;

回答に時間がかかってすみません。 contains="outside"とは関係ないと思います。 私はそれを取り除いたところ、それほど激しくはありませんが、それでも同じ動作を示しました。 ただし、panzoom divと画像のサイズは、通りのサイズとは関係なく設定されています。 それは問題の一部でしょうか？

ありがとう

@jsblanco修正は同じである必要があります。

こんにちは、私はホイールズームが中心から離れるという新しい問題を開くつもりでしたが、これを見て、それは十分に関連していると思いました。 以下は私の発見と回避策です。 私はトラックパッドを使用してMacBookのブラウザでのみテストしたことに注意してください。

焦点ズームのデモでは、Safari、Firefoxでズームすると、中央が左上に向かって浮かんでいることに気付きました。 Chromeでも同じ動作が得られますが、Webインスペクターが開いている場合のみです。

それで私はそれを調べ始めました、そして私の疑いはマウスホイールイベントがあまりにも頻繁にトリガーされており、Panzoomの非同期性のために物事が正しく更新されていないということです。 ズームの頻度を調整しようとすると、それが役立つ可能性があり、十分に「機能する」ように見えると思いました。 ここで実際の動作を確認できます： https ：//jsbin.com/joliduwulo/1/edit？html、js、output。

注意点は、ズームがスムーズに表示されないことです。 この例では、20ミリ秒ごとに最大ズームを1つに制限していますが、特にFirefoxで大きなSVGを使用してテストする場合、焦点を失わないように、ズームを約50ミリ秒に設定する必要がありました。

@timmywilとにかく新しい問題を開いてほしい場合は、私に知らせてください。 これはハックのように見えますが、私にとっては問題を解決します。 解決策を検討する価値があると思われる場合は、貢献したいと思います。

ビューポートではなくパンズーム要素を中心に配置する機能に+1

panzoom.ts：426の移動機能を置き換えます

関数move（event：PointerEvent）{
もしも （
！isPanning ||
origX===未定義||
origY===未定義||
startClientX===未定義||
startClientY===未定義
）{
戻る
}
addPointer（ポインタ、イベント）
const current = getMiddle（pointers）
if（pointers.length> 1）{
//最初の2つのポインタ間の距離を使用します
//現在のスケールを決定する
//モバイルでのズームの問題を防ぐ
if（startDistance === 0）{
startDistance = getDistance（pointers）;
}
const diff = getDistance（pointers）-startDistance
const toScale = contrampScale（（diff * options.step）/ 80 + startScale）.scale
ZoomToPoint（toScale、current）
} そうしないと {
//モバイルズームの焦点エラーを防ぐためにelse条件を追加しました
パン（
origX +（current.clientX --startClientX）/ scale、
origY +（current.clientY --startClientY）/ scale、
{{
アニメート：false
}
）;
}
}