2012-12-19 14 views
6

come posso modificare la larghezza e l'altezza delle icone dalle icone di Raphael gratis?come cambiare la dimensione delle icone raphael?

Ho cercato di usare attr, ha cercato di utilizzare %, come questo var paper = Raphael("canvas", 100%, 100%);.

Ho bisogno di fare questo: se cambio la dimensione del blocco genitore, anche la dimensione della mia icona cambia.

UPD: Ho provato l'uso "scala" e "trasformare", ma l'icona ridimensionare dal centro e si adatta il genitore correttamente

risposta

3

Secondo la documentazione Raphaël.js

var el = paper.rect(10, 20, 300, 200); 
// translate 100, 100, rotate 45°, translate -100, 0 
el.transform("t100,100r45t-100,0"); 
// if you want you can append or prepend transformations 
el.transform("...t50,50"); 
el.transform("s2..."); 
// or even wrap 
el.transform("t50,50...t-50-50"); 
// to reset transformation call method with empty string 
el.transform(""); 
// to get current value call it without parameters 
console.log(el.transform()); 

Check this Fiddle: Dimostrazione di tutte le trasformazioni

var icon = paper.rect(100,200,100,100); 

var anim = Raphael.animation({ 
    "10%":{transform:'t100,0'}, //transform on x-axis 
    "20%":{transform:'...t0,100'},//transform on y-axis 
    "30%":{transform:'...t-100,0'},//transform on x-axis(negative) 
    "40%":{transform:'...t0,-100'},//transform on y-axis(negative) 
    "50%":{transform:'...t200,200'},//transform diagonally 
    "60%":{transform:'...t-100,-100'},//transform diagonally(negative) 
    "70%":{transform:'...s1,1.5'},//scale y-axis 
    "80%":{transform:'...s1.5,1'},//scale x-axis 
    "90%":{transform:'...s2'},//scale in both direction 
    "100%":{transform:'...r45'},//rotate 
},5000); 

icon.animate(anim.delay(1000)); 
.

Quindi nel tuo caso dovrete fare questo:

var = nomeacaso paper.path ("coordinate percorso") trasformare ('s2,3');

dove 2 è per larghezza & 3 è per altezza.

+0

thx, ma non è assolutamente giusto per il mio problema. Se utilizzo la trasformazione del codice, ottengo lo stesso effetto, come "element.scale" nella documentazione. –

+0

quindi cosa vuoi fare –

+0

se cambio genitore larghezza e altezza - icona riempire tutto lo spazio. Grazie. –

Problemi correlati