Mausposition mit Javascript im Canvas ermitteln

Question

Mausposition mit Javascript im Canvas ermitteln

Gefragt el 31 de Januar, 2011: Wann wurde die Frage gestellt
31171 Ansichten: Anzahl der Besuche der Frage
3 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich lerne gerade Jquery und HTML5 Canvas. Alles, was ich tun möchte, ist eine einfache html5 Zeichnung Beispiel. Wenn die Maus bewegen, zeichne ich rote Quadrate unter meiner Maus.

Mein Code ist einfach, aber ich habe ein Problem, die Position des Mauszeigers innerhalb der Leinwand zu erhalten.

Im Moment verwende ich x=event.offsetX; um die Mausposition zu erhalten. Dies funktioniert sehr gut in Chrome, aber wenn es zu Firefox kommt, funktioniert es nicht. Ich änderte den Code zu x=event.layerX. aber es scheint, dass layerX die Position meiner Maus relativ zur Webseite ist, nicht die Position der Leinwand. weil ich immer einen Versatz sehe.

Ich habe zwei Fragen, erstens, was ist das Richtige zu tun, um die richtige Mausposition unter Firefox zu erhalten. zweitens, wie kann ich einen Code schreiben, der für IE, Firefox, Chrome, Safari und Opera funktioniert?

Hier ist mein Code:

 <!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>

Gefragt el 31 de Januar, 2011 von Bill Yan

4 Stimmen

<!doctype html /> ist ungültig und ruft den Quirks-Modus auf, der das Verhalten vieler DOM-Sachen ändert! <!doctype html> ist die richtige DTD.

Kommentiert el 22 de April, 2011 von Delan Azabani

Answer 1

3 Antworten

Answer 2

16voto

AxFab Punkte 1107

Ich sehe viele Fragen zu diesem Thema und alle schlagen vor, das DOM zu durchsuchen oder offsetX und offsetY zu verwenden, die nicht immer richtig eingestellt sind.

Sie sollten die Funktion: canvas.getBoundingClientRect() aus der Canvas-API verwenden.

  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);

Beantwortet el 27 de September, 2013 von AxFab (1107 Punkte )

1 Stimmen

Das ist eine nette Lösung, aber sie funktioniert nicht, wenn die Leinwand mit Rändern oder Auffüllungen gestylt ist...

Kommentiert el 21 de Kann, 2014 von Bernat Romagosa

1 Stimmen

GetBoundingClientRect() geben border-box Rechteck, aber das ist die einzige Lösung, die ich gefunden, dass Griff Position Styling und Scrollen die gleiche Weise. Mit dieser Lösung müssen Sie einige hässliche Code wie verwenden: parseInt(canvas.style.borderLeftWidth.substring(-2) Mein Rat: Fügen Sie Polsterung und Rahmen auf einem übergeordneten div.

Kommentiert el 21 de Kann, 2014 von AxFab

Answer 3

11voto

Caio Punkte 3070

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>

Um die Kompatibilität müssen Sie sich keine Sorgen machen, nur der IE (vor 9) unterstützt Canvas nicht von Haus aus.

Beantwortet el 31 de Januar, 2011 von Caio (3070 Punkte )

1 Stimmen

Diese Antwort löst das Problem, aber sie erweitert das DOM unklugerweise und erfindet das Rad neu.

Kommentiert el 23 de Februar, 2011 von Wayne

4 Stimmen

<!doctype html /> ist ungültig und ruft den Quirks-Modus auf, der das Verhalten vieler DOM-Sachen ändert! <!doctype html> ist die richtige DTD.

Kommentiert el 22 de April, 2011 von Delan Azabani

0 Stimmen

Ihre leftTopOffset-Funktion bricht ab, wenn das Fenster nicht nach oben gescrollt wird.

Kommentiert el 23 de August, 2015 von Thom Wiggers

Answer 4

2voto

Olical Punkte 36037

Sie benötigen eine benutzerdefinierte Funktion, um herauszufinden, wo sich das Element befindet, und dann, wo sich die Maus innerhalb dieses Elements befindet. Hier ein Beispiel . Es verwendet diese Funktion von quirks Modus und meine JavaScript-Bibliothek, die nicht schwierig sein sollte, in jQuery zu übersetzen.

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

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

        return [curleft, curtop];
    }
}

エディテージ

Dies wird im IE nicht funktionieren, da dieser pageX nicht unterstützt. Sie müssen das Ereignisobjekt durch eine Funktion wie ce um dies zu korrigieren. Aber wie 2x2p1p sagte, wird Canvas von keinem Internet Explorer unter Version 9 unterstützt.

Beantwortet el 31 de Januar, 2011 von Olical (36037 Punkte )

Mausposition mit Javascript im Canvas ermitteln

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Mausposition mit Javascript im Canvas ermitteln

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: