Получение позиции мыши с javascript внутри canvas

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

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

Прямо сейчас, я использую 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>

источник

2011-01-31 Bill Yan

'' недействителен и вызывает режим quirks, который изменяет поведение множества вещей DOM! '' является правильным DTD. –

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

Этот ответ решает проблему, но он неразумно расширяет DOM и изобретает колесо. –

Функция leftTopOffset ломается, если окно не прокручивается. –

Вам понадобится настраиваемая функция, чтобы определить, где находится элемент, а затем работать там, где мышь находится внутри этого элемента. Here is an example. Он использует эту функцию из режима quirks и моей библиотеки 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, холст не поддерживается ни одним Internet Explorer ниже версии 9.

источник

2011-01-31 16:04:21 Olical

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

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

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

Это приятное решение, но это не сработает, если холст оформлен с помощью границ или paddings ... –

getBoundingClientRect() дает прямоугольник прямоугольника, но это единственное решение, которое я нашел, что стиль оформления позиции и прокрутка так же. С помощью этого решения вам нужно будет использовать какой-то уродливый код: parseInt (canvas.style.borderLeftWidth.substring (-2) Мой совет: добавьте отступ и границу в родительском div. – AxFab

Получение позиции мыши с javascript внутри canvas

ответ

Смежные вопросы