如何在Raphael.js中調整畫布大小？

我很難在Raphael.js中調整畫布大小。我以爲我可以簡單地使用：如何在Raphael.js中調整畫布大小？

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

這將創建一個使用寬度和高度爲100像素的ID「紙張」的畫布。但是，當我嘗試這個畫布不用這些設置初始化。我正在使用Raphael.js網站上的一些免費圖標，並且想知道如何更改圖標的大小？我是否也必須使用轉換函數？如果有的話，請創建一個jsfiddle示例。

在此先感謝。

對不起，如果我沒有很好地解釋我自己，但Raphael.js對我來說是全新的。

編輯：

我試過你的建議，但無濟於事。這是我正在處理的代碼。也許我有衝突什麼的。有任何想法嗎？

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

來源

2013-02-10 user1408643

我把你的代碼放到這個小提琴http://jsfiddle.net/twe7J/上，所以你可以看到結果。順便說一句，在'$（）。each'中你不需要做'$（this）[0]'，因爲這和放這個'this'是一回事（JQuery在'this中放入一個直接的DOM元素引用'默認情況下）。 – Plynx 2013-02-10 23:08:11

要回答在標題您的具體問題，你會用paper.setSize(width, height)

從拉斐爾文檔：

enter image description here

你的其他問題有不同的答案。

var paper = Raphael("paper", 100, 100);要求您在頁面上已經有一些DOM元素，並且id="paper"已經存在。該DOM元素應具有足夠的寬度和高度來容納您的畫布（在這種情況下，100x100）。或者，您可以忽略寬度和高度，它會佔用容器的寬度和高度（非常方便）。您還可以通過放入所有四個維度生成沒有DOM元素的畫布，如var paper = Raphael(0, 0, 100, 100);在文檔的左上角製作100x100畫布。

要調整Raphael圖標的大小，可以使用transform函數。例如icon.transform("s2");使其成倍增大。

This fiddle顯示瞭如何創建拉斐爾帆布，並將鉛筆圖標放在上面，使其變成黃色，然後放大。請注意，我們需要圍繞左上角進行縮放（通常圍繞中心縮放），以防止它從頁面的頂部和左側裁剪掉。

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

來源

2013-02-10 22:37:50 Plynx

如何在Raphael.js中調整畫布大小？

回答

相關問題