Panzoom: يعمل التكبير / التصغير على تحريك الصورة بعيدًا عن مركز الشاشة

شكرا لفتح قضية. جربت العرض التوضيحي على iOS و Android ولم أتمكن من إعادة الإنتاج. لقد قمت بإدراج متصفحات سطح المكتب ، ولكن التكبير / التصغير يكون بشكل أساسي للجوال (على الرغم من أن بعض الأجهزة بها ماوس وشاشة تعمل باللمس). قد يكون من المفيد معرفة الجهاز الذي تستخدمه ، على الرغم من أنني قد لا أتمكن من اختباره على الأرجح.

ليس هناك الكثير الذي يمكنني القيام به دون أن أكون قادرًا على إعادة إنتاج المشكلة. إذا تعمقت أكثر ووجدت أن تغيير الرمز في Panzoom يعمل على إصلاحه (أو أن حالة اختبار مختلفة إلى جانب العرض التوضيحي تعيد إنتاج المشكلة) ، فيرجى التعليق هنا وسأفكر في التصحيح.

مرحبا السيد ويليسون.

شكرا لك على الرد. لقد استخدمت كلاً من إصداري سطح المكتب والجوال من
قال المتصفحات. لقد استخدمت Redmi Note 8T و Galaxy 8 لاختبار ذلك.

لرؤية هذه المشكلة ، ربما يمكنك إلقاء نظرة على العرض التوضيحي الذي أقوم بتطويره؟
ما عليك سوى كتابة اسم (لم يتم تخزين أي شيء ، إنها مجرد لعبة أطفال) وانقر
على زر "Exploració lliure" ؛ ستتم إعادة توجيهك إلى Panzoomed
صورة. كما سترى ، يعمل تكبير عجلة الماوس بشكل جيد ، ولكن التكبير / التصغير بالقرص (و
في الواقع ، تقوم أزرار panzoom.zoomIn () و panzoom.zoomOut () أيضًا) بتحريك ملف
صورة.

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

أنا ممتن حقًا لمساعدتك ، ويرجى المعذرة عن أي إزعاج.

مع أطيب التحيات؛

خورخي سانشيز بلانكو

إل لون ، 21 سبتمبر. 2020 a las 19:45 ، تيمي ويليسون (<
[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 أو باستخدام zoom مع الخيار focal بدلاً من ذلك وإيجاد النقطة في منفذ العرض التي هي في الواقع مركز الصورة. هل هذا منطقي؟

ربما يمكنني فعل شيء كهذا بشكل افتراضي عند تعيين 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 () للإشارة إلى النقطة المحورية ، أو فقط
هل يكفي تضمينه في الإعلان الأولي panzoom؟

لما يستحق ، لقد جربت الطرق التالية للحصول على البؤرة
نقطة. حاولت أيضًا وضع أرقام أولية.

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

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

إزالة المحتوى: الخارج تمامًا يؤدي فقط إلى عرض صورة سوداء.

المار ، 22 سبتمبر. 2020 a las 15:59 ، تيمي ويليسون (<
[email protected]>) escribió:

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 آسف ، الأمر أكثر تعقيدًا من ذلك. تتمثل طريقة القيام بذلك في العثور على مركز الصورة وترجمتها إلى نقطتها في إطار العرض الرئيسي panzoom. يمكنك بعد ذلك تمرير ذلك كخيار بؤري ، ويجب حسابه في كل مرة تتصل فيها بالتكبير. ومع ذلك ، دعني أرى ما إذا كان بإمكاني تقديم مثال لك. سيؤدي ذلك إلى إصلاح 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.

التحذير هو أن التكبير / التصغير سيبدو أقل سلاسة. في هذا المثال ، أقصره على تكبير واحد كحد أقصى كل 20 مللي ثانية ولكن عندما كنت أختبر باستخدام SVGs كبيرة ، خاصة في Firefox ، كنت بحاجة إلى ضبط ذلك على حوالي 50 مللي ثانية حتى لا يفقد النقطة المحورية.

timmywil يرجى إعلامي إذا كنت تريد مني فتح عدد جديد على أي حال. يبدو هذا وكأنه اختراق ولكنه يحل المشكلة بالنسبة لي. إذا كنت تعتقد أن الحل يستحق الاستكشاف ، فأنا أرغب في المساهمة.

+1 على القدرة على التوسيط على عنصر panzoom بدلاً من منفذ العرض

استبدال وظيفة النقل في panzoom.ts: 426

تحرك الوظيفة (الحدث: PointerEvent) {
إذا (
! isPanning ||
OrigX === غير محدد ||
OrigY === غير محدد ||
startClientX === غير محدد ||
startClientY === غير محدد
) {
إرجاع
}
addPointer (مؤشرات ، حدث)
تيار مستمر = getMiddle (مؤشرات)
إذا (pointers.length> 1) {
// استخدم المسافة بين أول مؤشرين
// لتحديد المقياس الحالي
// منع مشكلة التكبير في الجوال
إذا (startDistance === 0) {
startDistance = getDistance (المؤشرات) ؛
}
فرق فرق = getDistance (مؤشرات) - startDistance
const toScale = constrainScale ((diff * options.step) / 80 + startScale). مقياس
ZoomToPoint (إلى المقياس ، الحالي)
} آخر {
// تمت إضافة شرط آخر لمنع خطأ النقطة البؤرية في التكبير المتحرك
حرمان(
OrigX + (current.clientX - startClientX) / مقياس ،
OrigY + (current.clientY - startClientY) / مقياس ،
{
تحريك: خطأ
}
) ؛
}
}