0

首先，我只想说我已经使用 Raphael 2 天了，所以不要因为问这个问题而打我的脸。

我有一个 Raphael 创建的下拉菜单，如下所示：

当我扩展窗口时，底部边框基于<div>宽度，因此它可以完美扩展（下图可能有点夸张）：

虚线扩展（就像它们应该的那样），问题是如何扩展（重绘）Raphael 形状以匹配给定的 % ？

绘图部分：

    for (var i = 0; i < holder.length; i++) {
    var paper = Raphael(title[i], title.slice(i, i + 1).width(), title.slice(i, i + 1).height()); //create new paper instance based on holder height and width
    paper.setViewBox(0, 0, title.slice(i, i + 1).width(), title.slice(i, i + 1).height());
    var rect = paper.roundedRectangle(0, 0, title.slice(i, i + 1).width(), title.slice(i, i + 1).height(), 20, 20, 20, 20).attr({ //draw on paper rounded rectangle
        fill: "#E6E7E8", //background color
        stroke: "#ddd" //border color (technically shape color)

    });
    var t = paper.text((title.slice(i, i + 1).width() - (title.slice(i, i + 1).width() - 20)), (title.slice(i, i + 1).height() / 2), title_content.slice(i, i + 1).text()).attr({ //add text
        "text-anchor": "start", //left-align
        "font-size": 16,
        "font-family": "Arial, Helvetica, sans-serif"
    });
    textWrap(t, title.slice(i, i + 1).width()); //wrap text                    
}

我目前有这个用于调整大小，但它不起作用。它确实在状态栏中产生错误，但因为我只有 ie7，所以我无法启动 firebug 并读取控制台。我哪里错了？

$(window).resize(function() {
     var i = 0;
          $(title).each(function() {
              paper.setSize($(this).width(), $(this).height());
              rect.SetSize($(this).width(), $(this).height());
              redraw_element();
              i++;
     });                
 });

更新 - 设置为 100% 会导致渲染时间较短，即使容器更宽。

var paper = Raphael(title[i], title.slice(i, i + 1).width(), title.slice(i, i + 1).height()); //create new paper instance based on holder height and width

paper.setViewBox(0, 0, title.slice(i, i + 1).width(), title.slice(i, i + 1).height());

var rect = paper.roundedRectangle(0, 0, '100%', '100%', 20, 20, 20, 20).attr({ //draw on paper rounded rectangle
    fill: "#E6E7E8", //background color
    stroke: "#ddd", //border color (technically shape color)
    width: '100%',
    height: '100%'
});

渲染

4

2 回答 2

1

我认为您应该使用rect.attr({width:..., height:...})（另请参见Element.attr）而不是SetSize. 后者不是 Raphael 的方法，在不同的浏览器中可能工作也可能不工作。

于 2012-09-03T14:26:18.010 回答
0

不确定这是否能满足您的给定需求，但您知道 Raphael 支持基于百分比的宽度吗？例如paper.rect(0, 0, '100%', '100%')。调整大小时，您只需更改包含该<svg>元素的元素的宽度（该元素又包含矩形），矩形将相应地缩放。

于 2012-08-31T10:33:20.573 回答