Auf Canvas - Objekte mit Mausevents zugreifen
bearbeitet von Rolf BHallo uwe,
ein Canvas enthält keine Balken, nur unterschiedlich gefärbte Pixel. Deswegen gibt es, nachdem Du gezeichnet hast, im Canvas keinen Rückbezug mehr zu deinen Daten. Den musst Du anders herstellen.
Beispielsweise kannst Du beim Zeichnen ein Array erzeugen, in dem die Balkenpositionen stehen. Je nach Grafik reicht hier der Mittelpunkt und die Höhe, dann musst Du im mouseover die Koordinaten neu rechnen, oder du speicherst stumpf left, right, top und bottom ab, dann ist es ein einfacher Vergleich.
Je nach Situation darf aber auch die Frage erlaubt sein: Warum Canvas? Ist das zwingend nötig? Die Alternative wären div Elemente, die mit position:absolute, width, height, top und left in einem figure-Element, das position:relative hat, an die gewünschte Position gebracht werden. **Denen** kannst Du ein data-Attribut anpappen, das direkt auf deine Daten rückverweist. Wenn Du noch ein Gitterraster brauchst oder ein beschriftetes Koordinatensystem, dann kannst Du das mit einem Canvas in den Hintergrund malen.
Du kannst natürlich auch alles auf den Canvas malen und transparente DIVs über die Balken legen, nur für die Mausinteraktion.
_Rolf_
--
sumpsi - posui - obstruxi