Hogy kaphatok korrekt értéket a clientY, clientX-re?
2016-03-23T16:59:58+01:00
2016-03-25T09:25:11+01:00
2022-08-18T12:20:34+02:00
Dave_C
Adott egy canvas, amit kirajzoltam. Tudo, hogy a clientX és a clientY visszaadják az egér pozíciónálását, de a következőket vettem észre.

-Ha a canvas pontosan legfölül van a balfelső sarokban akkor korrekt pozíciót ad.
-De ha acanvas fölött, vagy mellett már valami div, vagy egyéb objektum van akkor már nem ad korrekt értéket.
-Ha akkora a canvas, hogy görgetni kell akkor azt vettem észre, hogy a böngésző html dokumentumának a tetejéhez viszonyít mindig.

Ezeket, hogyan lehet kiküszöbölni?

https://jsfiddle.net/45Ls7k4s/
Itt most csak a canvas van, de nézzétek meg ha görgettek, hiába vagytok a canvas felénél akkor sem ad helyes értéket.

A célom az lenne, hogy mindig a canvas szélétől adja meg az egér pozícióját.

Érdekes, hogy, ha rajzolok bele akkor a canvas, mint koordináta rendszer jól működik, mert pontosan oda rakja az ábrát, ahova kell és nem tolja el jobbra, balra.
Mutasd a teljes hozzászólást!
Csatolom a tesztem, próbáld ki megy-e neked is...
Mutasd a teljes hozzászólást!
Csatolt állomány

  • Mutasd a teljes hozzászólást!
  • "utfg" lol
    Mutasd a teljes hozzászólást!
  • Nézd meg a következő link-et és miután bele-klikkelsz egyet a rajzfelületbe, figyeld meg bal oldalt az "Aktuális" kifejezés alatt, milyen a pontosság!
    Ha megfelel, értelmezd a forráskódot és keresd meg a neked szükséges részeket (a lényeges rész valahol a "function on_mousedown(e)" környékén van és a benne meghívott get_board_coords(e)-ben, de csak ez nem elég!!!)...
    Megj: Meg kell érteni az egész canvas-kezelési rendszert, ami az oldalon van...
    És ha nem menne (csak keresni kell), akkor egy JS teszt-kód

    <canvas id="myCanvas" width="578" height="200" style="border:1px solid gray;"></canvas> <script> function writeMessage(canvas, message) { var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); context.font = '18pt Calibri'; context.fillStyle = 'black'; context.fillText(message, 10, 25); } function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; } var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); canvas.addEventListener('mousemove', function(evt) { var mousePos = getMousePos(canvas, evt); var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y; writeMessage(canvas, message); }, false); </script>
    Mutasd a teljes hozzászólást!
  • MouseEvent - próbáld ki az offsetX/Y-t is, nekem legalábbis bevált
    (Mondjuk lehet, hogy az is számít, hogy margin:0-s és display:block-os a canvasom, meg hogy eddig csak Chrome-on és IE-n próbáltam)
    Mutasd a teljes hozzászólást!
  • Így sikerült nekem:

    xe = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - rect.left,
    ye = e.clientY + document.body.scrollTop + document.documentElement.scrollTop - rect.top;

    Valamiért ez működött.Ha csak a rect.left-et, illetve a rect.top-ot vontam ki akkor nem változott.
    Mutasd a teljes hozzászólást!
  • Csatolom a tesztem, próbáld ki megy-e neked is...
    Mutasd a teljes hozzászólást!
    Csatolt állomány
abcd