mouseover-Kreis HTML5-canvas
Frage ich mich, wie man eine Fläche wie eine semi-komplexe Form (Kreis), definiert in der Leinwand, so, wenn der Benutzer die mouse-overs der Form, eine Funktion aufgerufen wird.
Ich nicht verwenden wollen, Bibliotheken überhaupt wie KineticJS etc.
Derzeit habe ich einen Ereignis-listener für das canvas-element, so dass auf die Maus verschieben, ich nenne mehrere Funktionen; eine davon funktioniert die Maus x/y-Koordinaten relativ zum canvas. Als solche, jede rechteckige Form ist leicht zu 'hören' für einen einfachen if-Anweisung (wie die Leinwand ist interaktiv und neu gezeichnet, jeder Maus bewegen).
Für kreisförmige Objekte, sowie sagen, dreieckige Objekte, gibt es eine Möglichkeit, verwenden Sie eine ähnliche Methode unter Verwendung trigonometrischer Funktionen und eine if-Anweisung?
Oder gibt es bessere Möglichkeiten, um mehrere Bereiche auf einer Leinwand, die auf mouse-over, eine Funktion aufzurufen?
Cheers
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn Sie wissen, wo die Maus ist und Sie wissen, wo der Kreis auf der Leinwand, dann wird die Maus innerhalb des Kreises, wenn der Abstand von der Maus zum Mittelpunkt des Kreises kleiner ist der radius. Wenn das wahr ist manuell aufrufen, was auch immer Sie brauchen, zu nennen.
Hoffe, dass geholfen
Wenn Sie gehen zu müssen, mehrere semi-komplexe Formen und wollen nicht, um komplizierte mathematische Funktionen, können Sie immer verwenden Sie eine ghost-Leinwand.
Die Idee ist, dass, wenn Sie testen möchten, für eine Form, zeichnen Sie die jeweilige Form auf eine Leinwand, in-memory und testen Sie die Maus x/y pixel zu sehen, wenn etwas da ist.
Ich ausführlich, wie man es in dieses tutorial.
Funktioniert es wunderbar für kleinere Mengen von Objekten, aber wenn Sie planen, mit mehr als ~200 Objekte auf dem Bildschirm, werden Sie wollen, um zu wechseln, um schneller, mathematische Methoden.