Wie ändere ich die Größe der Leinwand in Raphael.js?

Ich habe Schwierigkeiten, die Leinwand in Raphael.js zu skalieren. Ich dachte, ich könnte einfach verwenden:Wie ändere ich die Größe der Leinwand in Raphael.js?

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

und dies würde eine Leinwand mit der ID „Papier“ mit einer Breite und Höhe von 100 Pixeln erstellen. Wenn ich dies jedoch versuche, wird die Arbeitsfläche mit diesen Einstellungen nicht initialisiert. Ich benutze einige der kostenlosen Icons auf der Raphael.js Website und ich frage mich, wie ich die Größe der Icons ändern würde? Muss ich auch die Transformationsfunktion verwenden? Wenn ja, könnte jemand bitte ein Beispiel erstellen.

Vielen Dank im Voraus.

Sorry, wenn ich mich nicht sehr gut erklärt habe, aber Raphael.js ist völlig neu für mich.

EDIT:

habe ich versucht, Ihre Anregungen, aber ohne Erfolg. Hier ist der Code, an dem ich gerade arbeite. Vielleicht habe ich einen Konflikt oder etwas. Irgendwelche Ideen?

<!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; 
}

Quelle

2013-02-10 user1408643

Ich legte Ihren Code auf diese Geige http://jsfiddle.net/twe7J/, so können Sie die Ergebnisse sehen. Übrigens muss man in '$(). Each' nicht' $ (this) [0] 'tun, da dies das Gleiche ist, als nur 'this' zu setzen (JQuery bringt eine direkte DOM-Element-Referenz in' this 'standardmäßig). – Plynx

Um Ihre genaue Frage im Titel zu beantworten, würden Sie paper.setSize(width, height)

Aus dem Raphael docs verwenden:

enter image description here

Ihre Fragen unterschiedliche Antworten haben .

var paper = Raphael("paper", 100, 100); erfordert, dass Sie ein DOM-Element mit der id="paper" bereits auf Ihrer Seite haben. Dieses DOM-Element sollte ausreichend breit und hoch sein, um die Leinwand aufzunehmen (in diesem Fall 100x100). Oder Sie können die Breite und die Höhe weglassen und es wird die Breite und Höhe des Containers einnehmen (sehr praktisch). Sie können eine Leinwand auch ohne ein DOM-Element erstellen, indem Sie alle vier Dimensionen wie var paper = Raphael(0, 0, 100, 100); eingeben, um eine 100 x 100-Leinwand oben links im Dokument zu erstellen.

Um die Größe der Raphael-Symbole zu ändern, können Sie die Transformationsfunktion verwenden. Zum Beispiel icon.transform("s2");, um es doppelt so groß zu machen.

This fiddle zeigt, wie Sie eine Raphael-Leinwand erstellen und das Stiftsymbol darauf platzieren, es gelb und doppelt so groß machen. Beachten Sie, dass wir um die obere linke Ecke skalieren müssen (normalerweise wird es um die Mitte herum skaliert), um zu verhindern, dass es oben und links von der Seite abgeschnitten wird.

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");

Quelle

2013-02-10 22:37:50 Plynx

Wie ändere ich die Größe der Leinwand in Raphael.js?

Antwort

Verwandte Themen