Auf Canvas - Objekte mit Mausevents zugreifen

[Rolf B]

Hallo uwe,

die erste Frage, die man sich hier stellen sollte, ist: was tut jemand, der keine Maus hat? Simuliert ein Touch-Device ein Mouseover, wenn man den Finger auf die Stelle hält? Und wenn jemand nur eine Tastatur hat? Der müsste mit der Tab Taste durch die Balken navigieren und das Popup bekommen können. Was ist mit jemandem, der einen Screenreader benötigt, um die Daten abzurufen? Wie unterstützt Du diese Kunden?

Aber ich gehe trotzdem mal auf deine Frage ein.

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.

Gezeichnete Balken im Canvas sind aber auch keine interaktiven Elemente und machen das Leben schwer, wenn man sich die Fragen aus dem ersten Abschnitt stellt. Und auch ohne die Accessibility-Überlegungen kannst Du Dir das Leben leichter machen, wenn Du für die Balken HTML Elemente verwendest. Hintergrund und Koordinatensystem kannst Du auf den Canvas malen. Aber wenn Du den in ein figure-Element einhüllst, das position:relative hat, kannst Du für die Balken div-Elemente verwenden, die Du mit position:absolute, left, top, width und height an die richtige Stelle bringst. Die Werte kannst Du einfach als Text hineinsetzen, und bei Bedarf auch vertikal ausrichten (writing-mode: vertical-lr; text-orientation: mixed;)

Von diesen HTML Elementen kannst Du dann mouseover- und ähnliche Events bekommen. Du kannst ihnen auch einen Tabindex geben und damit ermöglichen, dass man sie mit Tab anspringt. Ja, Kollegen, ich weiß, div ist kein interaktives Element, aber was soll man nehmen für eine Tastaturbedienung? Ein Button oder Link ohne Ziel kommt mir fragwürdig vor.

Du kannst natürlich auch alles auf den Canvas malen und transparente DIVs über die Balken legen, nur für die Mausinteraktion.

Rolf