EaselJS: Using HitTest

The hitTest method checks a specified point in a display object and returns true if that point is not fully transparent (ie. if it will draw to that pixel). This can be used for checking if a specific object is under the mouse and hit detection.

Die hitTest Methode untersucht einen Punkt in einem Display Objekt und gibt true zurück, wenn der Punkt nicht total transparent ist (wenn man der Pixel gezeichnet wird). Das lässt sich einsetzen, um zu überprüfen, ob ein Objekt unter der Maus liegt.

Im folgenden Demo wird bestimmt, ob sich die Maus über dem roten Kreis befindet. circle.hitTest(stage.mouseX, stage.mouseY)

Diese einfache Einbindung arbeitet gut, wenn der circle nicht bewegt oder transformiert wurde, jedoch erwartet hitTest dass die übergebene Position im lokalen Koordinatensystem liegt.Die stage.mouseX and stage.mouseY Position ist global (stage). Um dieses Verhalten zu sehen, ändern Sie circle.x in der hitTest.html Beispiel Datei.

Um eine globale Position in eine lokale umzuwandeln, können Sie die globalToLocal Mehtode anwenden. Diese Methode nimmt den globalen x & y Wert und übergibt ein Objekt mit x & y Eigenschaften die in das Koordinatensystems des Zielobjekts transformiert wurden..

This code converts the stage mouse position into a local position and outputs it to the console. The demo below applies this same code to check when transformed shapes are under the mouse. Check out the source in globalToLocal.html to see how it was done.

The globalToLocal method works great if we're checking a stage position, but what about if you want to check hitTest against a point in another transformed object?

You could use localToGlobal and then its counterpart globalToLocal to convert the point from one object's coordinate space to another's, but the localToLocal method does the same thing with a little less code.

The following example show this being used to convert a position (100,0) on a rotating arm into a position relative to a target shape, to show when that point intersects the target. Check out localToLocal.html to see how it works.