प्राप्त वेबपेज सेंटर, जावास्क्रिप्ट

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

समस्या यह है कि यह गणना किसी भी प्रकार के ज़ूम (तब) अनुवाद को ध्यान में रखती नहीं है।

iOS पर, मैं, इन उत्तरों से कुछ के साथ की कोशिश की है, सवाल detecting pinch to zoom on iOS पर मैं घटना "OnZoom" को पकड़ने के लिए सक्षम था, लेकिन नहीं है, हालांकि, किसी भी मूल्य मिला।

एंड्रॉइड पर, मैं ज़ूम से संबंधित किसी भी घटना को भी पकड़ नहीं सकता। मुझे टचमॉव और टचस्टार्ट इवेंट्स के बारे में पता है, लेकिन ज़ूम (और ज़ूम वैल्यू)

मैं jQuery 1.7.2 लाइब्रेरी का उपयोग कर रहा हूं, तो मैं फिर से अंतर कैसे कर सकता हूं।

स्रोत

2012-07-13 jose

अपने प्रश्न भ्रामक है। "व्यूपोर्ट ज्यामितीय केंद्र" से आपका क्या मतलब है .. कृपया समझाएं। – Neji

यह थोड़ा अजीब लग सकता है, लेकिन क्या आपने एक छिपी हुई, पूरी तरह से स्थित div को भरने की कोशिश की, (भरने: 0; दाएं: 0; शीर्ष: 0; नीचे: 0;) और उस div के अंदर एक केंद्रित एकल पिक्सेल छवि, और उसके बाद .position() ;? का उपयोग कर छवि के निर्देशांक प्राप्त करना –

क्या यह छवि पूरे दस्तावेज़ के जितनी बड़ी नहीं होगी? यदि यह खिंचाव केंद्र केंद्र के अनुसार नहीं होगा, तो मुझे लगता है ... – jose

मैं एक demo page जो iPhone iPad, Samsung Galaxy Tab से 10 पर काम करने की पुष्टि की है कि मैं केवल एक बहुत बड़ा div पर क्लिक करें घटना संलग्न है, तो प्रदर्शन को अपडेट करने ज़ूम करने के बाद स्क्रीन पर टैप कर दिया है।

गणना बहुत सरल है, ज़ूम स्तर प्राप्त करने के लिए screen.width/window.innerWidth का उपयोग करें। screen.width हमेशा डिवाइस पिक्सल में होगा और window.innerWidth हमेशा सीएसएस पिक्सेल में होता है, जो ज़ूम को खाते में भी ले जाता है।

इसके अलावा गणना सरल गणित है:

// round the result down to avoid "half pixels" for odd zoom levels 
Math.floor(window.scrollY + window.innerHeight/2); 
Math.floor(window.scrollX + window.innerWidth/2);

जाँच करने के लिए उपयोगकर्ता जूमिंग है या नहीं, window.resize और window.scroll को श्रोता जो orientationchange पता पट्टी छुपा और ज़ूम करने के बाद सक्रिय कर देगा देते हैं।

var dot = document.getElementById("dot"); 
document.getElementById("main").addEventListener("click", function(e) { 
    var zoom = screen.width/window.innerWidth; 
    alert("zoom: " + zoom + "\n" + "ScrollY: " + window.scrollY); 

    dot.style.top = Math.floor(window.scrollY + window.innerHeight/2 - 5) + "px"; 
    dot.style.left = Math.floor(window.scrollX + window.innerWidth/2 - 5) + "px"; 

}, false);

स्रोत

2012-07-18 23:41:11

एक साधारण HTML पृष्ठ सेट अप करना, मैं केंद्र के बहुत करीब हो सकता हूं।

नीचे दिए गए कोड के साथ, मैं बस एक निश्चित div की चौड़ाई और ऊंचाई की जांच कर रहा हूं, और उसके बाद दस्तावेज़ ऑफसेट और कुछ साधारण गणित को केंद्र को समझने के लिए संयोजन कर रहा हूं, और वहां एक एकल ब्लैक डॉट लगा सकता हूं। मैं इसे बहुत करीब से प्राप्त कर सकता हूं, लेकिन यह मेरे आईफोन 4 एस पर भिन्न होता है।

एंड्रॉइड डिवाइस पर कोशिश नहीं की है।

मुझे नहीं लगता कि यह आईओएस < = 4 पर काम करेगा, क्योंकि वे निश्चित स्थिति का समर्थन नहीं करते हैं।

<style> 
#fixed{ 
position: fixed; 
left: 0; right: 0; top: 0; bottom: 0; 
background: orange; opacity: 0.25; 
} 
.black{ 
    position: absolute; 
    top:0;left:0; 
    width: 1px; height: 1px; 
    background: black; 
} 
</style> 

<body> 
<div id="fixed"></div> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script> 
jQuery(function($){ 
setInterval(function(){ 
var top = ($("#fixed").height()/2) + $("#fixed").offset().top; 
var left = ($("#fixed").width()/2) + $("#fixed").offset().left; 
$("body").append('<div class="black" style="top: '+top+'px; left: '+left+'px;" />'); 
}, 1500) 

}); 
</script> 
</body>

स्रोत

2012-07-18 03:24:31 ahren

मैं एक ग्राहक के अनुरोध एक पेज जूम पहचान पद्धति जावास्क्रिप्ट में एक जोड़ी साल पहले था:

यहाँ मेरी डेमो जावास्क्रिप्ट है।

मेरे मामले में, वह इसे एक फेसबुक ऐप पर काम करना चाहता था। Iframe कैनवास/व्यूपोर्ट के माध्यम से।

मैं मैक्स और न्यूनतम कार्यों के लिए इस्तेमाल किया

function getDocHeight() { 
    var D = document; 
    return Math.max(
     Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), 
     Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), 
     Math.max(D.body.clientHeight, D.documentElement.clientHeight) 
    ); 
} 
function getDocWidth() { 
    var D = document; 
    return Math.max(
     Math.max(D.body.scrollWidth, D.documentElement.scrollWidth), 
     Math.max(D.body.offsetWidth, D.documentElement.offsetWidth), 
     Math.max(D.body.clientWidth, D.documentElement.clientWidth) 
    ); 
} 

function getMinHeight(h) { 
return Math.min(viewport.currentHeight, getDocHeight(), h); 
}

getMinWidth समान था, लेकिन मैं यह करने के लिए ब्राउज़र आधारित तोड़ मरोड़ लागू करने के लिए किया था।

मैंने व्यूपोर्ट नामक एक ऑब्जेक्ट बनाया है जो एक निश्चित स्थिति div के गुणों को संग्रहीत करता है, विशेष रूप से वर्तमान हाइट और वर्तमान विथ ऑफ़सेट तत्व का ऑफसेट और ऑफ़सेट था।

मैंने उस div की स्थिति पर चेक चलाने के लिए window.intervalTimer को प्रारंभ करने के लिए समाप्त किया, तुलनात्मक ऑब्जेक्ट के भीतर संग्रहीत मूल्यों की तुलना में।

मैं निश्चित रूप से संलग्न हूं या ईवेंट श्रोताओं को जोड़ना आईफ्रेम के माध्यम से एक विकल्प नहीं था।

मैं अब भी मैं एक तरह से प्रबंधन एक उपेक्षित वेबसाइट पर डेमो कोड ऊपर है .. haha http://focalpointproperties.net/vWorker/proj_zoomcontrol.php

स्रोत

2012-07-24 02:24:36

प्राप्त वेबपेज सेंटर, जावास्क्रिप्ट

उत्तर

संबंधित मुद्दे