2012-04-09 8 views
2

Ich versuche, eine ziehbare Grafik ähnlich http://raphaeljs.com/graffle.html zu erstellen (funktioniert in 1.5.2 und 2.1), aber ich möchte Text in die Felder einfügen.RaphaelJS 2.1 vs. 1.5.2 getBBox Fehler

Ich habe den Text den Vorschlag in einer anderen Frage mit: How can I combine objects in the Raphael javascript library?

Diese Lösung mit RaphaelJS großen Werke 1.5.2, aber es bricht in RaphaelJS 2.1.

jsFiddle Beispiel:http://jsfiddle.net/ScBtZ/

Der einzige Unterschied, den ich gefunden habe, ist, dass Element.getBBox() ein ganz anderes Ergebnis liefert.

Probe:

In 1.5.2:

SVGRect 
    height: 40 
    width: 100 
    x: 526.5 
    y: 25 

In 2.1:

Object 
    height: 500780.9482062537 
    width: 1009980 
    x: 526.51 
    x2: 1010506.51 
    y: -399735.94795512746 
    y2: 101045.00025112627 

Bin ich etwas über die Änderung von v1 fehlt. 5 zu v2, oder ist das ungerade BBox ein Fehler? Irgendwelche Ideen, wie ich dieses Problem beheben kann?

Danke!

Antwort

1

Nun, es sieht so aus, als ob es einen Versuch gab, die native Methode getBBox durch eine benutzerdefinierte Implementierung in Raphael zu ersetzen. Der Grund dafür könnte sein, dass die native getBBox-Methode einige Fehler aufweist und für einige Shapes falsche Ergebnisse zurückgibt. Ein anderer Grund könnte die Browser-Portabilität sein, ich bin mir nicht sicher, ob es eine getBBox-Methode in VML gibt.

Allerdings scheint von den Werten, auf die Sie hingewiesen haben, diese benutzerdefinierte Implementierung ihre Schwächen hat. Sie können die nativen getBBox in Raphael 2.x mit diesem Code verwenden:

var bb1 = obj1.node.getBBox(), 
    bb2 = obj2.node.getBBox(), 

ich es getestet und sieht gut aus: http://jsfiddle.net/ScBtZ/2/

2

Raphael 2 getBBox könnte ein wenig fehlerhaft sein, aber in Ihrem Fall Ihre Daten falsch. Versuchen Sie, die "um die Zahlen zu entfernen:

http://jsfiddle.net/nhatcher/ScBtZ/9/

Gutes Beispiel

(beachten Sie, dass die andere Lösung in VML gebrochen)

1

Raphael hat Fehler, wenn Sie verwenden BBox! in Kombination mit Umwandlung. Ich fand eine Lösung, die für mich funktioniert.

Linie 1300 in Raphael.js

var pathDimensions = R.pathBBox = function (path) { 
    var pth = paths(path); 
    if (pth.bbox) { 
     return clone(pth.bbox) ; // FREEGROUP FIX!!!!!! 
    } 
    if (!path) { 
     return {x: 0, y: 0, width: 0, height: 0, x2: 0, y2: 0}; 
    } 
+0

Ich klon die Bbox! Grund: Die Bbox wird intern von Raphael wiederverwendet. In diesem Fall modifizieren verschiedene Teile des Codes das gleiche Objekt. –

0

Andreas' Antwort richtig ist ...

reffered auch bei https://github.com/DmitryBaranovskiy/raphael/issues/543

Klon ist die richtige fix, wenn u die getBBox wiederverwenden müssen() Funktion mehr als ein paar mal wie es intern verändert wird ....

BTW: Danke an Dimitry für Raphael.js, es ist wirklich ein bemerkenswertes Stück Arbeit !!

2

Ich kam hierher, nachdem die Antwort angenommen wurde, aber ich hatte immer noch einige Probleme. Wenn Sie wie ich sind, können Sie die neueste Entwickler-Version aus der Raphael.js GitHub greifen: https://github.com/DmitryBaranovskiy/raphael/

Raphael eingebaut Antwort Andreas zu haben scheint (auf der Linie 1972 nicht 1300 wie es der Fall war, als Die Antwort wurde geschrieben). Die letzte Entwicklerversion von Raphael hat für mich funktioniert.