2013-04-04 13 views
5

पर टच पॉइंट्स के बीच की जगह मैं प्लगइन flot.touch.js पर काम कर रहा हूं जो वेबकिट ब्राउज़र के लिए चार्ट पर टच इंटरएक्टिविटी (पैन और ज़ूम) जोड़ता है। मैं इसे आईई 10 पर भी काम करना चाहता हूं लेकिन मुझे नहीं पता कि मेरे टच पॉइंट्स (मुझे स्केल की गणना करने के लिए इसकी आवश्यकता है) के बीच की जगह कैसे प्राप्त करें।आईई 10

वेबकिट ब्राउज़र पर, हम इन चर का उपयोग करके ऐसा कर सकते हैं: IE के सूचक घटनाओं के साथ

evt.originalEvent.touches[0].pageX 
evt.originalEvent.touches[0].pagey 
evt.originalEvent.touches[1].pageX 
evt.originalEvent.touches[1].pageY 

उत्तर

4

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

प्रत्येक ईवेंट ऑब्जेक्ट को pointerId संपत्ति दी जाती है जिसका उपयोग अपने राज्य को ट्रैक करने के लिए किया जा सकता है। एकाधिक स्पर्शों को ट्रैक करने के लिए, आपको उस पॉइंटर आईडी को ईवेंट हैंडलर के फ़ंक्शन के दायरे से बाहर किसी ऑब्जेक्ट में किसी भी अन्य चर के साथ स्टोर करने की आवश्यकता होगी, साथ ही आपको किसी अन्य डेटा की आवश्यकता हो सकती है।

var pointers = {}; 
function pointerDown(evt) { 
    if (evt.preventManipulation) 
     evt.preventManipulation(); 

    pointers[evt.pointerId] = [evt.PageX, evt.PageY]; 

    for (var k in pointers) { 
     // loop over your other active pointers 
    } 
} 
function pointerUp(evt) { 
    delete pointers[evt.pointerId]; 
} 

अतिरिक्त पठन: उदाहरण के लिए:

4

एंडी ई की तरह कहा। ट्रैक करें कि आपके स्क्रीन पर कितने पॉइंटर्स हैं और उनमें से प्रत्येक से स्टोर गुण (आपके मामले में एक्स और वाई निर्देशांक, अधिग्रहित फॉर्म इवेंट)

मल्टीटाउच का एक अच्छा उदाहरण यहां पाया जा सकता है: http://ie.microsoft.com/testdrive/Graphics/TouchEffects/ और आप इसमें जा सकते हैं

function addTouchPoint(e) { 
    if(touchCount == 0) { 
     document.addEventListener(moveevent, moveTouchPoint, false); 
    } 

    var pID = e.pointerId || 0; 
    if(!touchPoints[pID]) { 
     touchCount++; 
     touchPoints[pID] = {x : e.clientX, y : e.clientY}; 
    } 
} 

आशा है कि यह

1

में मदद करता है आप किसी Windows 8 पर हैं: http://ie.microsoft.com/testdrive/Graphics/TouchEffects/Demo.js

वहाँ आप कोड के इस हिस्से पा सकते हैं: F12 उपकरणों के साथ और कोड स्क्रिप्ट टैग के तहत सभी कोड प्राप्त मंच, आईई 10 MSGesture ऑब्जेक्ट का समर्थन करता है। इस वस्तु का उपयोग इशारा घटनाओं के आईओएस संस्करण की तरह किया जा सकता है। ऑब्जेक्ट को प्रारंभ करने के लिए, हमें लक्ष्य ऑब्जेक्ट को सेट करना होगा और साथ ही MSPointerDown पर MSPointer जोड़ना होगा। उदाहरण के लिए:

var myGesture = new MSGesture(); 
var myElement = document.getElementById("MyCanvas"); 
myGesture.target = myElement; //sets target 
myElement.addEventListener("MSPointerDown", function (event){ 
    redGesture.addPointer(evt.pointerId); // adds pointer to the MSGesture object 
}, false); 

यहां से, आप MSGestureChange समारोह event.scale संपत्ति पर कार्रवाई करने के लिए एक घटना श्रोता जोड़ सकते हैं। ध्यान दें कि यदि लक्ष्य सेट नहीं है, तो एक अवैधStateError अपवाद होगा।

+0

+1, यह जानना उपयोगी है, धन्यवाद :-) –