कैनवास

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

मेरा कोड सरल है, लेकिन मुझे कैनवास के भीतर माउस कर्सर की स्थिति प्राप्त करने में समस्या है।

अभी, मैं x = event.offsetX का उपयोग कर रहा हूं; माउस की स्थिति पाने के लिए। यह क्रोम में बहुत अच्छी तरह से काम करता है, हालांकि जब फ़ायरफ़ॉक्स की बात आती है, तो यह काम नहीं करती है। मैंने कोड को x = event.layerX में बदल दिया। लेकिन ऐसा लगता है कि लेयरएक्स वेब पेज के सापेक्ष मेरे माउस की स्थिति है, कैनवास की स्थिति नहीं। क्योंकि मैं हमेशा ऑफसेट देखता हूं।

मेरे पास दो प्रश्न हैं, पहले, फ़ायरफ़ॉक्स के नीचे सही माउस स्थिति प्राप्त करने के लिए क्या करना सही है। दूसरा, मैं एक कोड कैसे लिख सकता हूं जो फ़ायरफ़ॉक्स, क्रोम, सफारी और ओपेरा के लिए काम करता है?

<!doctype html /> 
<html><head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    $(document).ready(
function(){ 

var flip = document.getElementById('flip'); 
    var context = flip.getContext('2d'); 
context.fillStyle = "rgb(255,255,255)"; 
context.fillRect(0, 0, 500, 500); 

     $("a").click(function(event){alert("Thanks for visiting!");}); 
    $("#flip").mousemove(function(event){ 
     var x, y; 


    x = event.layerX; 
    y = event.layerY; 


    //alert("mouse pos"+event.layerX); 
    var flip = document.getElementById('flip'); 
    var context = flip.getContext('2d'); 
context.fillStyle = "rgb(255,0,0)"; 
context.fillRect(x, y, 5, 5); 
    } 
    ); 
    } 
);  
    </script> 
    </head> <body bgcolor="#000000"> <a href="http://jquery.com/">jQuery</a><canvas id="flip" width="500" height="500"> 
    This text is displayed if your browser does not support HTML5 Canvas.</canvas> </body></html>

स्रोत

2011-01-31 Bill Yan

'' अमान्य है और quirks मोड का आह्वान करता है, जो बहुत सी डोम चीजों के व्यवहार को बदलता है! '' सही डीटीडी है। –

enter image description here

<!DOCTYPE html> 

<html> 
    <head> 
     <meta charset = "utf-8"> 

     <script> 
      Element.prototype.leftTopScreen = function() { 
       var x = this.offsetLeft; 
       var y = this.offsetTop; 

       var element = this.offsetParent; 

       while (element !== null) { 
        x = parseInt (x) + parseInt (element.offsetLeft); 
        y = parseInt (y) + parseInt (element.offsetTop); 

        element = element.offsetParent; 
       } 

       return new Array (x, y); 
      } 

      document.addEventListener ("DOMContentLoaded", function() { 
       var flip = document.getElementById ("flip"); 

       var xy = flip.leftTopScreen(); 

       var context = flip.getContext ("2d"); 

       context.fillStyle = "rgb(255,255,255)"; 
       context.fillRect (0, 0, 500, 500); 

       flip.addEventListener ("mousemove", function (event) { 
        var x = event.clientX; 
        var y = event.clientY; 

        context.fillStyle = "rgb(255, 0, 0)"; 
        context.fillRect (x - xy[0], y - xy[1], 5, 5); 
       }); 
      });  
     </script> 

     <style> 
      #flip { 
       border: 1px solid black; 
       display: inline-block; 

      } 

      body { 
       text-align: center; 
      } 
     </style> 
    </head> 

    <body> 
     <canvas id = "flip" width = "500" height = "500">This text is displayed if your browser does not support HTML5 Canvas.</canvas> 
    </body> 
</html>

आप संगतता के बारे में चिंता करने की ज़रूरत नहीं है, केवल IE (पूर्व 9) मूल रूप से कैनवास का समर्थन नहीं करता:

यहाँ मेरी कोड है।

स्रोत

2011-01-31 13:46:21 Caio

यह उत्तर समस्या हल करता है, लेकिन यह अनजाने में डीओएम बढ़ाता है और पहिया को फिर से चलाता है। –

यदि आपका विंडो स्क्रॉल नहीं किया गया है तो आपका बाएं टोप ऑफसेट फ़ंक्शन टूट जाता है। –

तत्व को कहां निकालने के लिए आपको एक कस्टम फ़ंक्शन की आवश्यकता होगी और फिर उस तत्व के अंदर माउस कहां काम करेगा। Here is an example। यह क्विर्क मोड और मेरी जावास्क्रिप्ट लाइब्रेरी से इस फ़ंक्शन का उपयोग करता है जिसे jQuery में अनुवाद करना मुश्किल नहीं होना चाहिए।

function findPos(obj) { 
    var curleft = curtop = 0; 

    if (obj.offsetParent) { 
     do { 
      curleft += obj.offsetLeft; 
      curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 

     return [curleft, curtop]; 
    } 
}

संपादित

इस वजह से यह पृष्ठ X का समर्थन नहीं करने के लिए IE में काम नहीं करेगा। आपको ईवेंट ऑब्जेक्ट को this जैसे किसी फ़ंक्शन के माध्यम से पार करना होगा। लेकिन 2x2p1p ने कहा, कैनवास संस्करण 9 के नीचे किसी भी इंटरनेट एक्सप्लोरर द्वारा समर्थित नहीं है।

स्रोत

2011-01-31 16:04:21 Olical

मुझे इस विषय पर बहुत सारे प्रश्न दिखाई देते हैं और सभी डोम ब्राउज़ करने या ऑफसेटएक्स और ऑफसेटवाई का उपयोग करने का प्रस्ताव करते हैं, जो हमेशा सही नहीं होते हैं।

आपको कैनवास एपीआई से फ़ंक्शन का उपयोग करना चाहिए: canvas.getBoundingClientRect()।

function getMousePos(canvas, evt) { 
    var rect = canvas.getBoundingClientRect(); 
    return { 
     x: evt.clientX - rect.left, 
     y: evt.clientY - rect.top 
    }; 
    } 

    canvas.addEventListener('mousemove', function(evt) { 
    var mousePos = getMousePos(canvas, evt); 
    console.log('Mouse position: ' + mousePos.x + ',' + mousePos.y); 
    }, false);

स्रोत

2013-09-27 10:24:51 AxFab

यह एक अच्छा समाधान है, लेकिन अगर कैनवास सीमाओं या पैडिंग के साथ स्टाइल किया जाता है तो यह काम नहीं करेगा ... –

getBoundingClientRect() सीमा-बॉक्स आयत देते हैं, लेकिन यह एकमात्र समाधान है जिसे मैंने पाया है कि स्थिति स्टाइल को संभालना और स्क्रॉल करना उसी तरह। इस समाधान के साथ, आपको कुछ बदसूरत कोड का उपयोग करना होगा जैसे: parseInt (canvas.style.borderLeftWidth.substring (-2) मेरी सलाह: माता-पिता div पर पैडिंग और सीमा जोड़ें। – AxFab

कैनवास

उत्तर

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