Come ridimensiono la tela in Raphael.js?

Ho difficoltà a ridimensionare la tela in Raphael.js. Ho pensato che avrei potuto usare semplicemente:Come ridimensiono la tela in Raphael.js?

var paper = Raphael("paper", 100, 100);

e questo sarebbe creare una tela utilizzando la "carta" ID con una larghezza e un'altezza di 100 pixel. Tuttavia, quando provo a farlo, il canvas non viene inizializzato con queste impostazioni. Sto usando alcune icone gratuite sul sito Raphael.js e mi chiedevo come avrei cambiato la dimensione delle icone? Devo usare anche la funzione di trasformazione? Se così fosse, qualcuno potrebbe creare un esempio di jsfiddle.

Grazie in anticipo.

Scusa se non mi sono spiegato molto bene, ma Raphael.js è completamente nuovo per me.

EDIT:

ho provato i vostri suggerimenti, ma senza alcun risultato. Ecco il codice su cui sto lavorando. Forse ho un conflitto o qualcosa del genere. Qualche idea?

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Logo Experiment</title> 
     <link rel="stylesheet" href="css/960_16_col.css"/> 
     <link rel="stylesheet" href="css/stylesheet.css"/> 
     <script src="js/jquery.min.js"></script> 
     <script src="js/raphael-min.js"></script> 
     <script src="js/script.js"></script> 
    </head> 
    <body> 
     <div class="container_16"> 
      <div class="grid_4"> 
       <div id="design"></div> 
      </div> 
      <div class="grid_2"> 
       <div class="arrow"></div> 
      </div> 
      <div class="grid_4"> 
       <div id="build"></div> 
      </div> 
      <div class="grid_2"> 
       <div class="arrow"></div> 
      </div> 
      <div class="grid_4"> 
       <div id="deliver"></div> 
      </div> 
      <div class="clear"></div>  
     </div> 
    </body> 
</html>

window.onload = function() { 
    var design = Raphael("design"); 
    design.path("M24.359,18.424l-2.326,1.215c0.708,1.174,1.384,2.281,1.844,3.033l2.043-1.066C25.538,20.822,24.966,19.652,24.359,18.424zM19.143,14.688c0.445,0.84,1.342,2.367,2.274,3.926l2.414-1.261c-0.872-1.769-1.72-3.458-2.087-4.122c-0.896-1.621-1.982-3.108-3.454-5.417c-1.673-2.625-3.462-5.492-4.052-4.947c-1.194,0.384,1.237,4.094,1.876,5.715C16.73,10.147,17.991,12.512,19.143,14.688zM26.457,22.673l-1.961,1.022l1.982,4.598c0,0,0.811,0.684,1.92,0.213c1.104-0.469,0.81-1.706,0.81-1.706L26.457,22.673zM24.35,15.711c0.168,0.339,2.924,5.93,2.924,5.93h1.983v-5.93H24.35zM18.34,15.704h-4.726l-3.424,5.935h11.66C21.559,21.159,18.771,16.479,18.34,15.704zM3.231,21.613l3.437-5.902H2.083v5.93h1.133L3.231,21.613zM15.048,10.145c0-0.93-0.754-1.685-1.685-1.685c-0.661,0-1.231,0.381-1.507,0.936l2.976,1.572C14.97,10.725,15.048,10.444,15.048,10.145zM14.343,12.06l-3.188-1.684L9.62,13.012l3.197,1.689L14.343,12.06zM3.192,26.886l-0.384,1.108v0.299l0.298-0.128l0.725-0.896l2.997-2.354l-3.137-1.651L3.192,26.886zM9.02,14.044l-4.757,8.17l3.23,1.706l4.728-8.186L9.02,14.044z").attr({fill: "#666", stroke: "#000"}); 

    var build = Raphael("build"); 
    build.path("M28.537,9.859c-0.473-0.259-1.127-0.252-1.609-0.523c-0.943-0.534-1.186-1.316-1.226-2.475c-2.059-2.215-5.138-4.176-9.424-4.114c-1.162,0.017-2.256-0.035-3.158,0.435c-0.258,0.354-0.004,0.516,0.288,0.599c-0.29,0.138-0.692,0.147-0.626,0.697c2.72-0.383,7.475,0.624,7.116,2.966c-0.08,0.521-0.735,1.076-1.179,1.563c-1.263,1.382-2.599,2.45-3.761,3.667l0.336,0.336c0.742-0.521,1.446-0.785,2.104-0.785c0.707,0,1.121,0.297,1.276,0.433c0.575-0.618,1.166-1.244,1.839-1.853c0.488-0.444,1.047-1.099,1.566-1.178l0.949-0.101c1.156,0.047,1.937,0.29,2.471,1.232c0.27,0.481,0.262,1.139,0.521,1.613c0.175,0.324,0.937,1.218,1.316,1.228c0.294,0.009,0.603-0.199,0.899-0.49l1.033-1.034c0.291-0.294,0.501-0.6,0.492-0.896C29.754,10.801,28.861,10.035,28.537,9.859zM13.021,15.353l-0.741-0.741c-3.139,2.643-6.52,5.738-9.531,8.589c-0.473,0.443-1.452,1.021-1.506,1.539c-0.083,0.781,0.95,1.465,1.506,2c0.556,0.533,1.212,1.602,1.994,1.51c0.509-0.043,1.095-1.029,1.544-1.502c2.255-2.374,4.664-4.976,6.883-7.509c-0.312-0.371-0.498-0.596-0.498-0.596C12.535,18.451,11.779,17.272,13.021,15.353zM20.64,15.643c-0.366-0.318-1.466,0.143-1.777-0.122c-0.311-0.266,0.171-1.259-0.061-1.455c-0.482-0.406-0.77-0.646-0.77-0.646s-0.862-0.829-2.812,0.928L7.44,6.569C7.045,6.173,7.203,4.746,7.203,4.746L3.517,2.646L2.623,3.541l2.1,3.686c0,0,1.428-0.158,1.824,0.237l7.792,7.793c-1.548,1.831-0.895,2.752-0.895,2.752s0.238,0.288,0.646,0.771c0.196,0.23,1.188-0.249,1.455,0.061c0.264,0.312-0.196,1.41,0.12,1.777c2.666,3.064,6.926,7.736,8.125,7.736c0.892,0,2.021-0.724,2.948-1.64c0.925-0.917,1.639-2.055,1.639-2.947C28.377,22.567,23.704,18.309,20.64,15.643z").attr({fill: "#666", stroke: "#000"}); 

    var deliver = Raphael("deliver"); 
    deliver.path("M17.078,22.004l-1.758-4.129l-2.007,4.752l-7.519-3.289l0.174,3.905l9.437,4.374l10.909-5.365l-0.149-4.989L17.078,22.004zM29.454,6.619L18.521,3.383l-3.006,2.671l-3.091-2.359L1.546,8.199l3.795,3.048l-3.433,5.302l10.879,4.757l2.53-5.998l2.257,5.308l11.393-5.942l-3.105-4.709L29.454,6.619zM15.277,14.579l-9.059-3.83l9.275-4.101l9.608,3.255L15.277,14.579z").attr({fill: "#666", stroke: "#000"}); 

    $('.arrow').each(function(i) { 
     arrow = Raphael($(this)[0]); 
     arrow.path("M10.129,22.186 16.316,15.999 10.129,9.812 13.665,6.276 23.389,15.999 13.665,25.725z").attr({fill: "#666", stroke: "#000"}); 
    }); 
};

#design { 
    width: 100px; 
    height: 100px; 
}

fonte

2013-02-10 user1408643

Metto il codice su questo violino http://jsfiddle.net/twe7J/ in modo da poter vedere i risultati. Ad ogni modo in '$(). Each' non devi fare' $ (this) [0] 'dato che questo è lo stesso di mettere semplicemente questo' (JQuery mette un riferimento diretto all'elemento DOM in 'questo 'di default). – Plynx

per rispondere alla tua domanda esatta nel titolo, si usa paper.setSize(width, height)

Dalla documentazione Raphael:

enter image description here

vostre altre domande hanno risposte diverse .

var paper = Raphael("paper", 100, 100); richiede che tu abbia qualche elemento DOM con lo id="paper" già sulla tua pagina. Quell'elemento DOM dovrebbe avere larghezza e altezza sufficienti per contenere la tela (in questo caso 100x100). Oppure, puoi lasciare la larghezza e l'altezza e occuperà la larghezza e l'altezza del contenitore (molto conveniente). Puoi anche produrre una tela senza un elemento DOM inserendo tutte e quattro le dimensioni, ad esempio var paper = Raphael(0, 0, 100, 100); per creare una tela 100x100 nella parte superiore sinistra del documento.

Per ridimensionare le icone di Raphael, è possibile utilizzare la funzione di trasformazione. Ad esempio icon.transform("s2"); per renderlo due volte più grande.

This fiddle mostra come creare una tela Raphael e posizionare l'icona a forma di matita, renderla gialla e doppia. Nota che abbiamo bisogno di ridimensionare l'angolo in alto a sinistra (normalmente si scala attorno al centro) per evitare che si ritagli dalla parte superiore e sinistra della pagina.

var pencil = "M25.31,2.872l-3.384-2.127c-0.854-0.536-1.979-0.278-2.517,0.576l-1.334,2.123l6.474,4.066l1.335-2.122C26.42,4.533,26.164,3.407,25.31,2.872zM6.555,21.786l6.474,4.066L23.581,9.054l-6.477-4.067L6.555,21.786zM5.566,26.952l-0.143,3.819l3.379-1.787l3.14-1.658l-6.246-3.925L5.566,26.952z" 
var paper = Raphael(0,0,200,200); 
var icon = paper.path(pencil).attr({fill: "yellow"}).transform("s2,2,0,0");

fonte

2013-02-10 22:37:50 Plynx

Come ridimensiono la tela in Raphael.js?

risposta

Problemi correlati