получить положение мыши с помощью JavaScript внутри холста - PullRequest
Новая
       5

получить положение мыши с помощью JavaScript внутри холста

10 голосов
/ 31 января 2011

Я изучаю jquery и html5 canvas. Все, что я хочу сделать, это простой пример рисования HTML5. Когда мышь двигается, я рисую красные квадраты под мышкой.

Мой код прост, но у меня проблема с получением позиции курсора мыши на холсте.

Прямо сейчас я использую x = event.offsetX; чтобы получить положение мыши. Это очень хорошо работает в Chrome, однако, когда дело доходит до Firefox, это не работает. Я изменил код на x = event.layerX. но кажется, что layerX - это позиция моей мыши относительно веб-страницы, а не позиция холста. потому что я всегда вижу смещение.

У меня два вопроса, во-первых, что нужно сделать, чтобы получить правильную позицию мыши под firefox. во-вторых, как мне написать код, который работает для Firefox, Chrome, Safari и Opera?

вот мой код: 

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

Ответы [ 3 ]

16 голосов
/ 27 сентября 2013

Я вижу много вопросов на эту тему, и все предлагают просматривать DOM или использовать offsetX и offsetY, которые не всегда установлены правильно.

Вы должны использовать функцию: canvas.getBoundingClientRect () из canvasAPI. 

  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);
9 голосов
/ 31 января 2011

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) не поддерживает холст изначально.

2 голосов
/ 31 января 2011

Вам понадобится пользовательская функция, чтобы определить, где находится элемент, а затем определить, где находится мышь внутри этого элемента. Вот пример . Он использует эту функцию из режима причуд и моей библиотеки JavaScript, которую нетрудно перевести на 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];
    }
}

EDIT

Это не будет работать в IE, потому что он не поддерживает pageX. Вам нужно будет передать объект события через функцию типа this , чтобы исправить это. Но, как сказал 2x2p1p, canvas не поддерживается ни одним Internet Explorer ниже версии 9.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...