nhận vị trí chuột với javascript trong canvas

Tôi đang nghiên cứu canvas jquery và html5. Tất cả những gì tôi muốn làm là một ví dụ vẽ html5 đơn giản. Khi di chuyển chuột, tôi vẽ hình vuông màu đỏ dưới con chuột của tôi.nhận vị trí chuột với javascript trong canvas

Mã của tôi rất đơn giản, nhưng tôi có một vấn đề nhận được vị trí con trỏ chuột trong canvas.

Ngay bây giờ, tôi đang sử dụng x = event.offsetX; để có được vị trí chuột. Điều này làm việc rất tốt trong chrome, tuy nhiên khi nói đến firefox, nó không hoạt động. Tôi đã thay đổi mã thành x = event.layerX. nhưng có vẻ như layerX là vị trí của con chuột của tôi liên quan đến trang web, chứ không phải vị trí của canvas. bởi vì tôi luôn thấy sự bù đắp.

Tôi có hai câu hỏi, trước hết, là điều đúng đắn phải làm gì để có được vị trí chuột đúng dưới firefox là gì. thứ hai, làm thế nào tôi có thể viết một mã hoạt động cho nghĩa là firefox, chrome, safari và opera?

đây là mã của tôi:

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

Nguồn

2011-01-31 Bill Yan

'' không hợp lệ và gọi chế độ quirks, thay đổi hành vi của nhiều thứ DOM! '' là DTD chính xác. –

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>

Bạn không cần phải lo lắng về khả năng tương thích, chỉ có IE (trước 9) không hỗ trợ canvas natively.

Nguồn

2011-01-31 13:46:21 Caio

Câu trả lời này giải quyết được vấn đề, nhưng nó không mở rộng DOM và phát minh lại bánh xe. –

'' không hợp lệ và gọi chế độ quirks, thay đổi hành vi của rất nhiều thứ DOM! '' là DTD chính xác. –

Chức năng ToffOffset trái của bạn bị ngắt nếu cửa sổ không được cuộn lên. –

Bạn sẽ cần một chức năng tùy chỉnh để tìm ra nơi các phần tử là gì và sau đó làm việc ra nơi chuột nằm trong phần tử đó. Here is an example. Nó sử dụng chức năng này từ chế độ quirks và thư viện JavaScript của tôi vốn không khó dịch sang 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

này sẽ không làm việc trong IE vì nó không hỗ trợ Trang X. Bạn sẽ phải truyền đối tượng sự kiện thông qua một hàm như this để sửa lỗi đó. Nhưng như 2x2p1p đã nói, canvas không được hỗ trợ bởi bất kỳ Internet Explorer nào bên dưới phiên bản 9.

Nguồn

2011-01-31 16:04:21 Olical

Tôi thấy rất nhiều câu hỏi về chủ đề này và tất cả đề xuất duyệt DOM hoặc sử dụng offsetX và offsetY, không phải lúc nào cũng được đặt đúng.

Bạn nên sử dụng hàm: canvas.getBoundingClientRect() từ API canvas.

Nguồn

2013-09-27 10:24:51 AxFab

Đó là một giải pháp tốt đẹp, nhưng nó sẽ không hoạt động nếu vải theo kiểu với biên giới hoặc miếng đệm không ... –

getBoundingClientRect() cho hình chữ nhật cửa hộp, nhưng đó là giải pháp duy nhất mà tôi thấy rằng xử lý vị trí phong cách và di chuyển các cùng một cách. Với giải pháp này, bạn sẽ phải sử dụng một số mã xấu xí như: parseInt (canvas.style.borderLeftWidth.substring (-2) Lời khuyên của tôi: Thêm đệm và đường viền trên div cha. – AxFab

nhận vị trí chuột với javascript trong canvas

Trả lời

Các vấn đề liên quan