stageX stageY

Im folgenden habe ich ein paar einfache Beispiel erstellt, die die MouseEvent Eigenschaften stageX und stageY verdeutlichen sollen. Die Beispiele befinden sich im Ordner stageX_stageY

Klicke in den Beispielen an verschiedene Positionen. Die Beispiel haben alle eine Bühengröße von 550 x 400 Pixeln.

evt.stageX und evt.stageY liefert die Mauspositon des Browserfensters.
Man braucht in der Regel jedoch die Mausposition in Bezug zur Canvasgröße.
Wenn die Maus am rechten Rand der Bühne ist, sollte sie der Bühenbreite entsprechen.

Beispiel 1
Beispiel 2

Das erste Beispiel hat den gleichen Code wie das zweite Beispiel.
Das zweite Beispiel wurde in den Veröffentlichungseinstellungen jedoch nicht responsive
an die Bühnengröße angepasst, und es befindet sich oben links in der Ecke des Browsers.
Daher funktioniert es sofern man die Ansichtgröße des Browserfenster nicht verändert.

this.addEventListener("click", showPoint.bind(this));
function showPoint(evt){
	this.anzeige.text = evt.stageX +"  :  "+evt.stageY;
}	

Beispiel 3
Hier wurde das Problem gelöst, indem man mittels globalToLocal die Browser-Maus-Position
auf die Canvas- Größe umrechnet.

this.addEventListener("click", showPoint.bind(this));
function showPoint(evt){
	var p = this.globalToLocal(evt.stageX, evt.stageY);
	this.anzeige.text = p.x + "  :  " + p.y;
}

Beispiel 4

Hier kommt ein Movieclip ins Spiel. Er ist 260 Pixel breit und hoch und hat seinen Registrierpunkt oben links.
Um die Mausposition innerhalb des Movieclips zu ermitteln
wird globalToLocal auf den Movieclip angewendet.
var p = evt.currentTarget.globalToLocal(evt.stageX, evt.stageY);

this.myMc.addEventListener("click", showPoint.bind(this));
function showPoint(evt){
	var p = evt.currentTarget.globalToLocal(evt.stageX, evt.stageY);
	this.anzeige.text = p.x + "  :  " + p.y;
}

Beispiel 5
Hier wird localX und localY eingesetzt. Es ist ein Parameter des Mausevents.

this.myMc.addEventListener("click", showPoint.bind(this));
function showPoint(evt){
	this.anzeige.text = evt.localX + "  :  " + evt.localY;
}