Skalieren Sie den Pfad zur Papiergröße oder legen Sie die Pfadabmessungen in Pixeln mit RaphaelJS fest.

Question

Ich versuche die Symbole zu verkleinern, die ich mit RaphaelJS rendere. Die Verwendung von funktioniert gut, aber ich würde viel lieber absolute Pixelwerte, z. 20px. Eine gute Alternative wäre es, die Pfade automatisch auf die Papiergröße zu skalieren. Sind beide von diesen möglich?

Mein aktueller Code, transform verwendet:

$('.cog-menu-options-icon').each(function (i) { 
    paper = Raphael($(this)[0], 20, 20); 
    paper.path(window.icons.wrench).attr({ "fill": "#333", "transform": "s.5,.5,0,0" }); 
}); 

Kann der Weg das Papier passen werden automatisch zu skalieren? Kann die Höhe/Breite des Pfades in Pixeln angegeben werden?

Answer 1

Ich bin nicht sehr vertraut mit Raphael, aber könnten Sie die Bounding-Box-Funktion getBBox() verwenden, um die Dimensionen zu erhalten, und diese verwenden, um die richtige Skala zu berechnen? Hier

$('.cog-menu-options-icon').each(function (i) { 
    paper = Raphael($(this)[0], 20, 20); 

    var icon = paper.path(window.icons.wrench); 
    var max = icon.getBBox().width; 
    var h = icon.getBBox().width; 
    if(h>max) { 
     max = h; 
    } 
    var scale = 20/max; 
    icon.attr({ "fill": "#333", "transform": "s"+scale+","+scale+",0,0" }); 
}); 

ist ein Beispiel: http://jsfiddle.net/xUyRS/

I-Code hinzugefügt, um das Symbol zu übersetzen, wenn der Pfad nicht einen 0,0 Ursprung hat, und das Symbol zu zentrieren.

Ich fand auch, dass Raphael hat einen Fehler mit getBBox, die schlechte Ergebnisse bei mehreren Aufrufen auf den gleichen Pfad zurückgibt, so verwende ich eine gegabelte Version mit dem Update.