拉斐尔调整宽度

Question

首先我会说我现在已经使用拉斐尔2天了，所以不要因为问这个问题而面对我。

我有拉斐尔创建的下拉渲染如下：

当我展开窗口时，底部边框基于<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我无法拔出萤火虫并读取控制台。我哪里错了？

$(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%'
});

呈现

Answer 1

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

Answer 2

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