Information Technology Reference
In-Depth Information
5.15 Was fehlt noch?
5.15.1 »isPointInPath(x, y)«
Wie der Methodenname vermuten lässt, liefert
isPointInPath()
den Wahrheits-
wert
true
oder
false
zurück, je nachdem, ob der über die Koordinate
x/y
ange-
gebene Punkt innerhalb oder außerhalb des aktuellen Pfads liegt. Ein kurzes
Beispiel zeigt die Anwendung und gibt in diesem Fall
true
beim
alert()
aus:
context.beginPath();
context.rect(50,50,100,100);
alert(
context.isPointInPath(75,75)
);
Praktisch einsetzbar ist
isPointInPath()
beim Ermitteln, ob der Benutzer auf
einen bestimmten Bereich des Canvas geklickt hat. Alles, was wir dazu be-
nötigen, ist ein
onclick
-EventHandler, der über die Mausposition in
clientX/
clientY
und die Position des
canvas
-Elements in
offsetLeft/offsetTop
die
aktuelle
x/y
-Position in Bezug auf den Canvas-Bereich berechnet:
canvas.onclick = function(evt) {
context.beginPath();
context.rect(50,50,100,100);
alert(
context.isPointInPath(
evt.clientX - canvas.offsetLeft,
evt.clientY - canvas.offsetTop
)
);
};
Leider nimmt
isPointInPath()
keine Rücksicht auf Transformationen des Pfa-
des: Selbst dann, wenn wir vor der
beginPath()
-Anweisung das Koordinaten-
system um 200 Pixel nach rechts verschoben hätten, würde ein Klick auf die
Koordinate
75/75
immer noch
true
melden. Sehr wohl Berücksichtigung fin-
det die
Nonzero
-Füllregel (vergleiche Abbildung 5.40) beim Ermitteln von In-
nerhalb/Außerhalb; und wie schon in den beiden Code-Beispielen angedeutet
wurde, muss der zu testende Pfad auch nicht unbedingt mit
fill()
oder
stroke()
gezeichnet werden.
