nicht angemeldet
Der Nachteil dieser Methode ist, dass ich beim Aufbau der Seite schon wissen muß, wieviele Rechtecke ich brauche.
Prinzipiell lässt sich so etwas aber auch mit einer beliebigen Anzahl umsetzen.
Beim dynamischen Test male ich Polygone mittels Javascript in den canvas.
Jetzt stehe vom dem Problem, dass ich dem Polygon zur Laufzeit die Drag&Drop Eigenschaften mitgeben möchte. Da dachte ich an DOM, wie
z.B. ctx["onclick"] = new Function("alert('!');");
Aber das müßte ctx im DOM hängen oder?
Der Kontext ist bloß ein Objekt, dass dir die Programmierschnittstelle zum Zeichnen auf der Canvas bietet. Es ist nicht Teil des DOM. Im DOM sind nur HTML-Elemente. Wenn du Klicks auf die Canvas behandeln willst, dann musst du den click-Event beim canvas-Element verarbeiten.
document.getElementById("testcanvas1").onclick = handler;
oder
document.getElementById("testcanvas1").addEventListener('click', handler, false);
http://molily.de/js/event-handling-grundlagen.html
Das überwacht sämtliche Klicks auf die Canvas. Damit kannst du natürlich noch keine Klicks auf die einzelnen Polygone behandeln.
Wenn ich per Javasript etwas in einen Canvas male, wird das DOM
der Seite nicht beeinflußt?
Richtig.
Und selbst wenn ich das wollte ginge das nicht?
Richtig.
Wie kann ich die Klasse ans Polygon hängen?
Kannst du nicht. Das Polygon existiert nicht. Du zeichnest bloß Pixel auf die Leinwand. Canvas ist total low-level.
Was du auf die Canvas zeichnest, hat mit HTML-Elementen und CSS-Formatierungen nichts zu tun. Das ist ein Universum für sich.
Wenn das Polygon einen Status haben soll, brauchst du ein JavaScript-Objekt, was den Polygon repräsentiert, was eine Größe und eine Position hat.
Wie ich im anderen Posting schrieb, ist es möglich, aber aufwändig, Events vom Canvas-Element auf eigene internen Canvas-Zeichenobjekte abzubilden. Man muss eigenes Hit-Testing machen. Die verlinkte Bibliothek tut das beispielsweise. Es gibt noch viele andere dieser Sorte, etwa ProcessingJS oder EaselJS.
Ich glaube aber auch, dass dir eine SVG-Lösung z.B. mit RaphaelJS bei der Drag-and-Drop-Geschichte schneller weiterhilft. SVG-Elemente liegen einfach im HTML-DOM, sind über CSS formatierbar und bei ihnen passieren direkt Ereignisse.
Daher fällt das Umrechnen von der Canvas auf die internen Objekte weg, das übernimmt in dem Fall der Browser.
Mathias