Hover-Effekte mit Canvas

[Tronjer]

Ich habe hier eine - zumindest theoretisch - simple Aufgabe, an der ich heute in der Firma gebastelt und dann leider doch nicht erfolgreich beendet habe. Vielleicht hat ja jemand einen Ansatz dafür.

Es geht darum, einen einfachen close-button, ein simples X, in Canvas zu zeichnen, und dieses beim Hovern gegen ein X in einer anderen Farbe auszutauschen. Ich habe dazu zwei JavaScript-Funktionen für die beiden Grafiken erstellt und anschließend versucht, mit jQuery hover() einen Bildertausch zu realisieren. Was nicht funktionierte, waren Callbacks mit hide(), adClass(), etc.

Was mir heute abend noch eingefallen ist:

Pseudocode:

$(document).ready(function() {
    $("myDiv").hover(
        function () {
            if(canvas2 == null)
                // remove Canavas 1
                 // erzeuge Canavas 2
         },
         function () {
           if(canvas1 == null)
                // remove Canavas 2
                // erzeuge Canavas 1
         }
    );
  });

Das heisst, ich würde einen kompletten Node entfernen und den anderen anderen samt Attributen an der richtigen Stelle neu erzeugen. Gäbe es dafür vielleicht noch eine elegantere Lösung? Bei Google habe ich nur Hover-Ergebnisse in Bezug auf drawImage() gefunden; allerdings verwende ich hier keine Bilder sondern Pfade(stroke).

 

[Timmer]

Wieso erzeugst du nicht beide Canvas' gleichzeitig, setzt das eine per CSS auf display:none; und toggelst beim Hover einfach beide Elemente? Somit ersparst du dir das Erzeugen und Entfernen

 

[Tronjer]

Das habe ich natürlich als erstes versucht, aber irgendwie hat sich das Element beim Hovern immer um ein paar Pixel verschoben. Vielleicht macht es einen Unterschied, ob man direkt auf dem Canvas, oder auf der Grafik im Canvas ist. Ich habe jetzt vorübergehend ein background-image eingesetzt. Auch der Bildertausch wollte auf Anhieb nicht funktionieren, weil ich dem Eltern-Div eine Opacity von 0.6 gegeben hatte, und dieser Wert wird, wie ich gestern noch ergoogelte, auf alle Kindelemente vererbt. Selbst wenn man die Opacity dort wieder auf 1 setzt. Mit RGBA hat es dann geklappt.

 

[Timmer]

Mit RGBA hat es dann geklappt.

Heißt: Problem gelöst?

Dass das Element immer ein paar Pixel verschoben war, kann eig garnicht sein. Wenn beide die gleiche Größe haben und sich abwechseln, und wenn beide Canvas (bis auf Farbunterschiede) gleich gezeichnet wurden, dann dürfte sich da nix verschieben