Panzoom: पिंच ज़ूम छवि को स्क्रीन केंद्र से दूर ले जाता है

एक मुद्दा खोलने के लिए धन्यवाद। मैंने आईओएस और एंड्रॉइड पर डेमो की कोशिश की और पुन: पेश नहीं कर सका। आपने डेस्कटॉप ब्राउज़र सूचीबद्ध किए हैं, लेकिन पिंच ज़ूमिंग मुख्य रूप से मोबाइल के लिए है (हालाँकि कुछ उपकरणों में माउस और टच स्क्रीन दोनों होते हैं)। यह जानना उपयोगी हो सकता है कि आप किस डिवाइस का उपयोग कर रहे हैं, भले ही मैं उस पर परीक्षण करने में असमर्थ हूं।

समस्या को पुन: उत्पन्न करने में सक्षम हुए बिना मैं बहुत कुछ नहीं कर सकता। यदि आप गहरी खुदाई करते हैं और पाते हैं कि पैनज़ूम में एक कोड परिवर्तन इसे ठीक करता है (या डेमो के अलावा एक अलग परीक्षण केस समस्या को पुन: उत्पन्न करता है), कृपया यहां टिप्पणी करें और मैं एक पैच पर विचार करूंगा।

हाय मिस्टर विलिसन;

आपके जवाब के लिए धन्यवाद। मैंने के डेस्कटॉप और मोबाइल दोनों संस्करणों का उपयोग किया
ब्राउज़रों ने कहा। मैंने इसका परीक्षण करने के लिए एक Redmi Note 8T और एक Galaxy 8 का उपयोग किया।

इस समस्या को देखने के लिए, शायद आप मेरे द्वारा विकसित किए जा रहे डेमो पर एक नज़र डाल सकते हैं?
बस एक नाम टाइप करें (कुछ भी संग्रहीत नहीं है, यह सिर्फ बच्चों का खेल है) और क्लिक करें
"Exploració lliure" बटन पर; आपको Panzoomed . पर पुनर्निर्देशित किया जाएगा
छवि। जैसा कि आप देखेंगे, मूसव्हील ज़ूम ठीक काम करता है, लेकिन पिंच ज़ूम (और .)
वास्तव में panzoom.zoomIn() और panzoom.zoomOut() बटन भी)
छवि।

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

मैं आपकी मदद के लिए वास्तव में आभारी हूं, और कृपया किसी भी असुविधा के लिए क्षमा करें।

सादर;

जॉर्ज सांचेज़ ब्लैंको

एल लून।, 21 सितम्बर। 2020 और पिछले 19:45, टिम्मी विलिसन (<
सूचनाएं@github.com>) विवरण:

एक मुद्दा खोलने के लिए धन्यवाद। मैंने डेमो की कोशिश की
आईओएस और एंड्रॉइड पर https://timmywil.com/panzoom/demo और नहीं कर सका
पुनरुत्पादन। आपने डेस्कटॉप ब्राउज़र सूचीबद्ध किए हैं, लेकिन पिंच ज़ूमिंग मुख्य रूप से
मोबाइल (हालांकि कुछ उपकरणों में माउस और टच स्क्रीन दोनों होते हैं)। ये हो सकता है
यह जानने में मददगार हो कि आप किस उपकरण का उपयोग कर रहे हैं, भले ही मैं संभवतः हो
उस पर परीक्षण करने में असमर्थ।

समस्या को पुन: उत्पन्न करने में सक्षम हुए बिना मैं बहुत कुछ नहीं कर सकता। अगर
आप गहरी खुदाई करते हैं और पाते हैं कि Panzoom में एक कोड परिवर्तन इसे ठीक करता है (या वह a
डेमो के अलावा विभिन्न परीक्षण मामले समस्या को पुन: उत्पन्न करते हैं), कृपया
यहां टिप्पणी करें और मैं एक पैच पर विचार करूंगा।

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने सूत्र को लिखा है।
इस ईमेल का सीधे उत्तर दें, इसे 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

हटाने में शामिल हैं: बाहर पूरी तरह से एक काली छवि प्रस्तुत करता है।

इलाहाबाद, 22 सितम्बर। 2020 और पिछले 15:59, टिम्मी विलिसन (<
सूचनाएं@github.com>) विवरण:

@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 का एक लिंक है जो इस मुद्दे को दिखाता है।

यदि मैं "एनिमेट: ट्रू" को चालू छोड़ दूं तो मैं इस समस्या को पुन: उत्पन्न करने में सक्षम हूं।
यह समस्या "चेतन: असत्य" पर प्रकट नहीं होती - मैंने उस समस्या को पुन: उत्पन्न करने के लिए आपके टेम्पलेट @timmywil को क्लोन किया है:

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

(मैंने व्हील इवेंट श्रोता को सीधे ज़ूम करने के लिए लागू किया है - यदि आप पर्याप्त तेज़ी से स्क्रॉल करते हैं, तो स्थानांतरण की स्थिति होगी।)

ठीक है, मैंने अपनी समस्या को #515 पर स्थानांतरित कर दिया क्योंकि समस्या समान है, लेकिन इसमें विभिन्न कॉन्फ़िगरेशन हैं।

नमस्ते;

उत्तर देने में लंबा समय लेने के लिए क्षमा करें। मुझे नहीं लगता कि इसे युक्त = "बाहर" के साथ करना है; मैंने अभी इसे हटा दिया है और यह अभी भी वही व्यवहार प्रदर्शित करता है, हालांकि उतनी तीव्रता से नहीं। हालांकि, पैनज़ूम डिव और छवि का आकार सड़क के आकार से स्वतंत्र होता है; क्या वह इस मुद्दे का हिस्सा हो सकता है?

शुक्रिया

@jsblanco फिक्स वही होना चाहिए।

नमस्ते, मैं केंद्र से दूर जाने वाले व्हील ज़ूम के बारे में एक नया मुद्दा खोलने जा रहा था, लेकिन इस पर ध्यान दिया और सोचा कि यह पर्याप्त रूप से संबंधित है। मेरे निष्कर्ष और समाधान निम्नलिखित हैं। ध्यान दें कि मैंने केवल ट्रैकपैड का उपयोग करके मैकबुक पर ब्राउज़र में परीक्षण किया है।

मैंने देखा कि फ़ोकल पॉइंट ज़ूमिंग डेमो के लिए, सफारी, फ़ायरफ़ॉक्स में ज़ूम करते समय केंद्र ऊपरी बाईं ओर तैरता है। क्रोम में भी मुझे वही व्यवहार मिलता है, लेकिन केवल जब वेब इंस्पेक्टर खुला होता है।

इसलिए मैंने इस पर गौर करना शुरू किया और मेरा संदेह यह है कि माउस व्हील इवेंट बहुत बार ट्रिगर हो रहा है और पैनज़ूम की एसिंक प्रकृति के कारण चीजें सही ढंग से अपडेट नहीं हो रही हैं। मैंने सोचा कि अगर मैं ज़ूमिंग की आवृत्ति को कम करने की कोशिश करता हूं तो यह मदद कर सकता है और निश्चित रूप से यह "काम" लगता है। आप इसे यहां क्रिया में देख सकते हैं: https://jsbin.com/joliduwulo/1/edit?html ,js,output।

चेतावनी यह है कि ज़ूमिंग कम चिकनी दिखाई देगी। इस उदाहरण में मैं इसे हर 20ms में अधिकतम एक ज़ूम तक सीमित कर रहा हूं, लेकिन जब मैं बड़े SVG के साथ परीक्षण कर रहा था, विशेष रूप से फ़ायरफ़ॉक्स में, तो मुझे उस सेट को लगभग 50ms पर सेट करने की आवश्यकता थी ताकि फोकल पॉइंट न खोए।

@timmywil कृपया मुझे बताएं कि क्या आप चाहते हैं कि मैं वैसे भी एक नया मुद्दा खोलूं। यह एक हैक की तरह लगता है लेकिन यह मेरे लिए समस्या हल करता है। अगर आपको लगता है कि समाधान तलाशने लायक है तो मुझे योगदान करने में मदद करना अच्छा लगेगा।

व्यूपोर्ट के बजाय पैनज़ूम तत्व पर केन्द्रित करने की क्षमता पर +1

panzoom.ts:426 . पर मूव फंक्शन बदलें

फ़ंक्शन चाल (घटना: पॉइंटरएवेंट) {
अगर (
!इसपैनिंग ||
ओरिगएक्स === अपरिभाषित ||
मूल === अपरिभाषित ||
startClientX === अपरिभाषित ||
startClientY === अपरिभाषित
) {
वापसी
}
एडपॉइंटर (पॉइंटर्स, इवेंट)
कॉन्स्ट करंट = getMiddle (पॉइंटर्स)
अगर (पॉइंटर्स। लंबाई> 1) {
// पहले 2 बिंदुओं के बीच की दूरी का उपयोग करें
// वर्तमान पैमाने का निर्धारण करने के लिए
// मोबाइल में जूम की समस्या को रोकें
अगर (स्टार्टडिस्टेंस === 0) {
स्टार्टडिस्टेंस = गेटडिस्टेंस (पॉइंटर्स);
}
const diff = getDistance (पॉइंटर्स) - startDistance
const toScale = ConstrainsScale((diff * options.step) / 80 + startScale).scale
ZoomToPoint(toScale, current)
} अन्य {
// मोबाइल जूम फोकल प्वाइंट एरर को रोकने के लिए और शर्त जोड़ी गई
कड़ाही(
ओरिगएक्स + (करंट.क्लाइंटएक्स - स्टार्ट क्लाइंटएक्स) / स्केल,
मूल + (current.clientY - startClientY) / स्केल,
{
चेतन: असत्य
}
);
}
}