raphael

___ qstntxt ___

Ich habe ein Problem mit Raphael für SVG-Effekte in einem IE-Browser festgestellt. Wenn ich über ein Objekt mouseover, tritt die Animation wie erwartet auf. Bei Mouseout wird die Mouseout-Aktion jedoch nie aufgerufen, so dass die Objekte in ihrem mouseover-Zustand hängen bleiben.

Ich habe schon andere gesehen, die sich über dieses Problem beschwert haben, aber die einzige Lösung, die ich gesehen habe, war, das mouseover-Ereignis bei jedem Objekt zu erzwingen, um alles! = aktuelles Objekt in ihren normalen Zustand zurückzubringen. Ich würde lieber keinen generellen "Alles zurücksetzen" machen, weil ich ziemlich viele Objekte habe, also frage ich mich, ob jemand eine Alternative hat, die er vorschlagen kann. Ich habe darüber nachgedacht, das letzte Objekt mit dem zuletzt ausgelösten Mouseover in einer Variablen zu speichern und nur bei jedem Mouseover neu zu setzen, was funktionieren könnte ....

    
___ answer13047700 ___

Ich hatte das gleiche Problem (map mit Regionen, die den Hintergrund beim Hover änderten) und der Deal-Braker in IE9 / Opera war für mich die toFront () Methode. Ich habe das entfernt und es funktioniert gut.

    
___ answer9521193 ___

Seit Raphael 2.0.2 gab es in Raphael und Internet Explorer (alle Versionen) ein Problem, bei dem verschiedene Manipulationen eines Pfades wie das Zurücksetzen einer Transformation, %code% , oder %code% von %code% aufgerufen werden können, während man schwebt Verursachen Sie Hover-Ins, um endlos zu loopen und / oder Houses auszublenden, um verpasst zu werden.

Während %code% im IE meistens für Mouseout funktioniert, gibt es ein paar Dinge, die ich gefunden habe, dass es stolpern kann, a) ignoriert Mouseouts wie beschrieben und b) triggert das Mouseover-Ereignis rekursiv Wenn Sie eine console.log-Datei dort einfügen, bricht die Konsole des IE-Entwicklertools ab und wird grau ... was manchmal auch zu verhindern scheint, dass Mouseouts erkannt werden.

Hier sind die Dinge, die ich gefunden habe, die das verursachen:

  • Zurücksetzen einer Transformation, bei der das Element unter der Maus verschoben wird, und erneutes Anwenden des Elements unter dem Cursor. Nicht-IE macht weiter wie nichts passiert ist und funktioniert gut, IE flippt aus wie oben beschrieben.
  • .toFront () und .toBack () - Nicht-IE erkennt das verschobene Element als das gleiche Element an der gleichen XY-Position, IE läuft wie oben beschrieben aus.

Es gibt einige Beobachtungen und Demonstrationen in diesem jsfiddle (lesen Sie die verschiedenen Kommentare aus und entfernen Sie sie aus den Kommentaren.) ).

Eine gute Problemumgehung ist hier, eine Art Flag zu haben, wie zum Beispiel 'path.data (' hoverIn ', true); %code% bei mouse out, dann wrap alle %code% oder anstößige Transformationen in ein Häkchen %code% , so dass es nur einmal passieren kann, bis die Maus aus ist. Oder speichern Sie einen Verweis auf den zuletzt verschobenen Pfad irgendwo nach dem %code% oder was auch immer, dann nicht %code% oder was auch immer, wenn dieser Pfad auch der zuletzt gespeicherte Pfad ist.

    
___ tag123javascript ___ JavaScript (nicht zu verwechseln mit Java) ist eine dynamische Sprache mit mehreren Paradigmen auf hoher Ebene, die sowohl für das clientseitige als auch für das serverseitige Scripting verwendet wird. Verwenden Sie dieses Tag für Fragen zu ECMAScript und seinen verschiedenen Dialekten / Implementierungen (außer ActionScript und Google-Apps-Script). ___ tag123internetexplorer ___ Internet Explorer (üblicherweise abgekürzt IE oder MSIE) ist ein von Microsoft entwickelter Webbrowser, der Teil von Microsoft Windows ist. ___ answer13711548 ___

Ich habe diese Einschränkung umgangen, indem ich den Code in eine anonyme Funktion gesetzt und ihn dann über den Ereignishandler %code% inside aufgerufen habe.

    
___ answer10936297 ___

Wenn Sie ein Rect als Hintergrund unterhalb des Objekts hinzufügen (und es enthält), können Sie einen Mouseout-Effekt erzielen, indem Sie dem Hintergrundrect einen weiteren Hover-Ereignishandler hinzufügen.

    
___ tag123mouseover ___ Ein Mouseover ist ein Ereignis, das bei einem Element auftritt, wenn der Benutzer den Cursor über dieses Element bewegt ___ tag123rafael ___ Raphaël ist eine plattformübergreifende JavaScript-Bibliothek für die Ausgabe von Vektorgrafiken in standardkonformen SVG (für Firefox, Chrome, Internet Explorer 9+ ...) und VML für ältere Versionen von Internet Explorer. ___ qstnhdr ___ Raphael und IE. MouseOut Problemumgehung ___ tag123mouseout ___ Ein mouseout ist ein Ereignis, das bei einem Element auftritt, wenn der Benutzer den Cursor von diesem Element entfernt ___
2
Antworten

Zeichnen über ein Bild mit Raphael.js

Kann ich eine Raphael.js-Leinwand über ein IMG -Element legen? Was soll ich tun, damit dieses Layout funktioniert?     
04.08.2010, 15:51
2
Antworten

Mit Raphael JS füllen Sie ein SVG-Element mit einem Hintergrundbild mit einem Offset

Ich möchte dies Fill SVG Element mit einem Hintergrundbild mit einem Offset , aber mit Raphael JS. Bei der Anzeige eines Rechtecks ​​mit einem Hintergrundbild ohne ist der Offset einfach. %Vor% Der obige Code zeigt nur die obere linke...
21.03.2011, 13:41
2
Antworten

Malen Sie mit Raphael einen abgerundeten Rand um das Bild herum

Ich benutze die Raphael JavaScript-Bibliothek. Ich möchte eine Grenze mit abgerundeten Kanten um ein Bild zeichnen (was ein Raphael-Objekt ist), aber ich kann nicht herausfinden, wie das geht. Ich habe versucht, einen Strich zu setzen, aber es e...
25.10.2010, 20:36
2
Antworten

Raphael JS Text Entlang Pfad

Ich suche ein Beispiel oder eine Bestätigung für ein Konzept. Sie möchten Raphael JS in einer App verwenden und Text ähnlich wie Grafikanwendungen wie Illustrator verzerren.     
03.12.2012, 15:38
1
Antwort

Erhalten BBox einer Gruppe von Raphael-Objekten?

Was ist der beste Weg, um die Begrenzungsbox mehrerer Raphael-Objekte als Ganzes zu erhalten? Kann ich sie alle in ein set setzen und mySet.getBBox() aufrufen? Oder muss ich sie alle durchlaufen, für jedes% ce_de% erhalten und die Ge...
02.02.2011, 16:59
3
Antworten

Problem beim Speichern eines von Raphael JS generierten SVG in einem Canvas

Ich versuche ein SVG zu konvertieren, das von Raphael JS erstellt wurde (und den Benutzer, da Sie die Bilder ziehen und drehen können). Ich folgte diesem SVG in Bild (JPEG, PNG, etc.) im Browser konvertieren kann es aber immer noch nicht bek...
18.11.2010, 16:10
2
Antworten

Raphaeljs Bibliothek und SmartPhones

Ich benutzte die nützliche JavaScript-Bibliothek raphaeljs auf meiner Website, um Karten, Animationen und animierte Funktionen zu zeichnen. Ich habe festgestellt, dass das Skript, das diese Bibliothek verwendet, perfekt mit iPhone funktionie...
04.04.2011, 13:05
1
Antwort

Kann ein SVG-Objekt sowohl eine Füllfarbe als auch ein Füllmuster haben?

Ich arbeite mit SVG mit der Raphael -Bibliothek. Ich kann eine Füllfarbe auf ein Objekt wie folgt anwenden: %Vor% Und das funktioniert auch (obwohl die Raphael-Dokumentation es nicht erwähnt): %Vor% Ich kann transparente PNGs als Füllm...
07.07.2011, 02:05
2
Antworten

Bild wie Kreisdiagramm zuschneiden

Ich möchte das Bild über ein anderes Bild wie ein Kreisdiagramm zuschneiden, um eine Ladeanimation zu erstellen. Ich dachte daran, Raphaeljs zu verwenden, konnte aber keine Informationen zum Bildausschnitt im Tortendiagramm finden. Hier sind...
18.03.2015, 19:38
1
Antwort

So verwenden Sie Raphael .animateWith ()

Hat jemand .animateWith() in Raphael benutzt, um schnelle Animationen synchron zu halten? Es ist schlecht dokumentiert. Der Ersteller der Bibliothek hat eine Videodemonstration , aber keinen Code, den ich finden kann. Ich habe ein Javascr...
08.04.2013, 18:46