mouseEvent.offsetX Dostaję jest znacznie większa niż rzeczywisty rozmiar płótna

Gdy używam użyć następującego kodu JavaScriptmouseEvent.offsetX Dostaję jest znacznie większa niż rzeczywisty rozmiar płótna

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

z tym html

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

Szerokość płótno pokazuje się 300 póki mouseX, który pozostaje na płótnie, przekracza znacznie 300. Zrobiłem dla niego zrzut ekranu. Działa dobrze w Chrome, ale nie działa w aplikacjach Internet Explorer i Windows.

Zrzut ekranu: http://dc365.4shared.com/download/ajE0f2XQ?tsid=20130615-014658-676a63ae

Wskaźnik był gdzieś w pobliżu prawej krawędzi, ale nie przyszedł na zrzucie ekranu, dlatego zaznaczyłem go. Pierwsza liczba na górze to szerokość płótna, a druga na wskaźniku offsetX.

Dlaczego tak się dzieje, jak to poprawić?

Update (Dodano kod CSS)

kod 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; 
}

Źródło

2013-06-14 Abhishek Verma

Wszystko o pomoc tutaj: http://stackoverflow.com/questions/55677/how-do-i-get-the-coordinates-of-a-mouse-click -on-a-canvas-element? rq = 1 –

Dzięki, ale to nie pomogło. –

Zobacz różnicę pomiędzy offsetX, layerX, pageX, clientX, screenX Properties To może być przydatne MouseEventsProperties .... Różne przeglądarki obsługują różne właściwości Po zapoznaniu się z nimi będzie poznać jak wykorzystać te właściwości dzięki czemu aplikacja działa na wszystkich platformach

Dobrze więc tutaj jest kod (bardzo uproszczona wersja) które napisałem i przetestowałem na urządzeniach Chrome, Safari, Firefox, a nawet dotykowych, takich jak iPad. Kod przyjmuje obiekt zdarzenia jako argument i zwróci obiekt koordynacyjny mający X i Y względem płótna. nadzieję, że pomoże ...

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

Źródło

2013-06-14 12:04:07

Dzięki za odpowiedź, teraz mogę ustalić różnicę między nimi. Ale nie wiem, czy istnieje duża różnica między klientem X a offsetem (wyglądały prawie tak samo). Mimo że użycie clientX zakończyło się tak samo. PageX i layerX są różne i nie można ich tutaj użyć. Rozwiązanie nie zadziałało. –

Nie działa, działa wszędzie z wyjątkiem symulatora aplikacji IE i Windows 8. Wypróbował też ten http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/ nic nie pomogło. (Dlaczego w świecie ktoś zrobił IE !!). Domyślam się, że jest coś do zrobienia z kodem CSS, ponieważ gdy nie ustawię szerokości płótna do dziedziczenia, to staje się 300, co pokazuje canvas.width. Zaktualizowałem to pytanie za pomocą kodu CSS, czy możesz go obejrzeć. –

@ AbhishekVerma w jakiej wersji IE próbowałeś? Faktycznie dana funkcja działa dobrze w moim systemie na całej platformie (ja używam IE-10) –

mouseEvent.offsetX Dostaję jest znacznie większa niż rzeczywisty rozmiar płótna

Odpowiedz

Powiązane problemy