Wie erkennt man, wo auf eine Leinwand geklickt wurde?

Question

Ich habe eine Leinwand, die gestreckt ist, seit ich ein Sandbox-Spiel mache. Ich kann nicht die normale Methode zur Erkennung des Pixels auf der Seite verwenden, auf die ein Canvas geklickt wird, weil ich wissen muss, auf welches Stretch-Pixel geklickt wurde. Hoffentlich macht das Sinn?

Answer 1

Alles, was Sie tun müssen, ist die Position auf der Grundlage Ihrer aktuellen Leinwandgröße und der ursprünglichen Leinwandgröße zu skalieren.

function scaleCursorPoint(int mouseX, int mouseY, ctx) { 
    return { 
     x: mouseX * (ctx.canvas.width/ctx.width), 
     y: mouseY * (ctx.canvas.height/ctx.height) 
    }; 
} 

ctx (die mit canvas.getContext('2d') erhalten wird, hat die Breite des ursprünglichen ungereckten. ctx.canvas das ursprüngliche canvas DOM-Element erhält. ctx.canvas.width die Größe des DOM-Element ist (die gedehnten Größe).

unterteilen den Zwei und Sie erhalten den Maßstab Wert dann nur mehrere dieser Skala Wert mit den Punkten, die Sie haben und Sie sind gut