如何在Raphael.js中调整画布大小？

Question

如何在Raphael.js中调整画布大小？

5

我在使用Raphael.js时遇到了改变画布大小的问题，我本以为可以简单地使用以下代码：

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

这将创建一个使用ID“paper”的画布，宽度和高度为100像素。但是，当我尝试时，画布不会使用这些设置初始化。我正在使用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;
}

- user1408643

我把你的代码放到了这个fiddle http://jsfiddle.net/twe7J/ 上，这样你就可以看到结果了。顺便说一下，在 $().each 中，你不需要做 $(this)[0]，因为这与直接放置 this 是相同的（JQuery默认在 this 中放置一个直接的DOM元素引用）。 - Plynx

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Plynx · Accepted Answer

回答标题中的问题，您需要使用paper.setSize(width, height)

根据Raphael文档：

enter image description here

你的其他问题有不同的答案。

var paper = Raphael("paper", 100, 100); 要求您在页面上已经有一些带有 id="paper" 的 DOM 元素。该 DOM 元素应具有足够的宽度和高度来容纳您的画布（在本例中为 100x100）。或者，您可以省略宽度和高度，它将采用容器的宽度和高度（非常方便）。您还可以通过输入所有四个维度来创建一个没有 DOM 元素的画布，例如 var paper = Raphael(0, 0, 100, 100); 在文档左上角创建一个 100x100 的画布。

要调整 Raphael 图标的大小，您可以使用 transform 函数。例如 icon.transform("s2"); 使其扩大两倍。

这个 fiddle 展示了如何创建 Raphael 画布并将铅笔图标放在上面，使其变成黄色并加倍大小。请注意，我们需要围绕左上角进行缩放（通常会围绕中心进行缩放），以防止其在页面的顶部和左侧被裁剪。

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