2013-06-14 52 views
5

Khi tôi sử dụng sử dụng mã Javascript sauCác mouseEvent.offsetX Tôi nhận được là lớn hơn nhiều so với kích thước vải thực tế

function init() { 
    var gameCanvas = document.getElementById("gameCanvas"); 
    document.getElementById("canvasWidth").innerHTML = gameCanvas.width; 

    gameCanvas.addEventListener("mousemove", handleMouseEvent); 
} 


function handleMouseEvent(mouseEvent) { 
    document.getElementById("mouseX").innerHTML = mouseEvent.offsetX;; 
} 

với html này

<body> 
    <div id="mainScreen"> 
     <div id="topScreen"> 
     <h1 id="canvasWidth">Score:</h1> 
     <h1 id="mouseX">0</h1> 
     </div> 
     <div id="gameScreen"> 
      <canvas id="gameCanvas" onclick="init()">    
      </canvas> 
     </div> 
    </div> 
</body> 

Chiều rộng vải được hiển thị 300 trong khi mouseX vẫn còn trong khung hình vượt quá 300. Tôi đã liên kết ảnh chụp màn hình cho nó. Nó hoạt động tốt trong Chrome nhưng nó không hoạt động trong Internet Explorer và trong các ứng dụng cửa hàng Windows.

Ảnh chụp màn hình: http://dc365.4shared.com/download/ajE0f2XQ?tsid=20130615-014658-676a63ae

Con trỏ đang ở đâu đó gần cạnh phải nhưng nó đã không đến trong ảnh chụp màn hình, đó là lý do tại sao tôi đánh dấu nó. Số đầu tiên ở trên cùng là chiều rộng của canvas và số thứ hai hiển thị con trỏ offsetX.

Tại sao điều này xảy ra, cách sửa lỗi?


Cập nhật (Added mã CSS)

mã CSS

#mainScreen { 
    display: -ms-grid; 
    -ms-grid-columns: 30px 1fr 30px; 
    -ms-grid-rows: 30px 100px 20px 1fr 30px; 
    height:inherit; 
} 

#topScreen { 
    display: -ms-grid; 
    -ms-grid-column: 2; 
    -ms-grid-row: 2; 
    -ms-grid-columns: 30px 150px 30px 60px 100px 1fr 30px; 
    -ms-grid-rows: 20px 1fr 20px; 
} 

#canvasWidth { 
    display: -ms-grid; 
    -ms-grid-row: 2; 
    -ms-grid-column: 2; 
} 

#mouseX { 
    display: -ms-grid; 
    -ms-grid-column: 4; 
    -ms-grid-row: 2; 
} 

#gameScreen { 
    display: -ms-grid; 
    -ms-grid-column: 2; 
    -ms-grid-row: 4; 
    -ms-grid-rows:1fr; 
    -ms-grid-columns: 1fr; 
    height:inherit; 
    width:inherit; 
} 
#gameCanvas { 
    height:inherit; 
    width:inherit; 
    background-color:white; 
    -ms-grid-column: 1; 
    -ms-grid-row: 1; 
} 
+0

Bất cứ điều gì giúp đỡ ở đây: http://stackoverflow.com/questions/55677/how-do-i-get-the-coordinates-of-a-mouse-click -on-a-canvas-element? rq = 1 –

+0

Cảm ơn, nhưng nó không giúp được gì. –

Trả lời

5

Xem sự khác biệt giữa OffsetX, layerX, Trang X, clientX, screenX Thuộc tính Điều này có thể hữu ích MouseEventsProperties .... trình duyệt khác nhau hỗ trợ các thuộc tính khác nhau Sau khi tìm hiểu về họ, bạn sẽ tìm hiểu làm thế nào để sử dụng các tài sản như vậy ứng dụng của bạn Hoạt động trên tất cả các nền tảng

Được rồi vì vậy đây là một mã (một phiên bản rất đơn giản) mà tôi đã viết và thử nghiệm trên chrome, safari, firefox và thậm chí cả các thiết bị cảm ứng như iPad. Mã lấy đối tượng sự kiện làm đối số và nó sẽ trả về đối tượng điều phối có X và Y đối với canvas. Hy vọng điều này sẽ giúp ...

containerX = document.getElementById('container').offsetLeft; 
containerY = document.getElementById('container').offsetTop; 
//here container is the id of my canvas basically the above two lines are global 
// in my code 

function getX_Y(evt){ 
var coord={ 
    X: null, 
    Y: null 
} 
var isTouchSupported = 'ontouchstart' in window; 
if(isTouchSupported){      // for touch devices 
    coord.X = evt.clientX-containerX; 
    coord.Y = evt.clientY-containerY; 
    return coord; 
} 

else if(evt.offsetX || evt.offsetX == 0){ //for webkit browser like safari and chrome 
    coord.X = evt.offsetX; 
    coord.Y = evt.offsetY; 
    return coord; 
} 

else if(evt.layerX || evt.layerX == 0){  // for mozilla firefox 
    coord.X = evt.layerX; 
    coord.Y = evt.layerY; 
    return coord; 
} 
} 
+0

Cảm ơn bạn đã trả lời, bây giờ tôi có thể tìm ra sự khác biệt giữa chúng. Nhưng tôi không biết nếu có nhiều sự khác biệt giữa clientX và offsetX (Họ nhìn gần như giống nhau). Mặc dù sử dụng clientX kết quả rất giống nhau. PageX và layerX khác nhau và không thể sử dụng ở đây. Vì vậy, giải pháp đã không hoạt động. –

+0

Đã không hoạt động, hoạt động ở mọi nơi ngoại trừ trình mô phỏng ứng dụng IE và Windows 8. Ngoài ra, hãy thử http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/ không có gì hữu ích. (Tại sao một người nào đó đã tạo IE!). Tôi đoán có một cái gì đó để làm với mã CSS, bởi vì khi tôi không thiết lập chiều rộng vải để kế thừa nó trở thành 300 đó là những gì được hiển thị bởi canvas.width. Tôi đã cập nhật câu hỏi với mã CSS, bạn có thể vui lòng xem nó không. –

+0

@AbhishekVerma trong phiên bản IE nào bạn đã thử? Trên thực tế các chức năng cho phép hoạt động tốt trong hệ thống của tôi trong tất cả các nền tảng (Tôi đang sử dụng IE-10) –

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