Javascript 拉斐尔调整宽度

首先，我要说我已经用拉斐尔两天了，所以不要因为我问这个问题就朝我脸上开枪

我有一个拉斐尔创建的下拉列表，呈现如下：

当我展开窗口时，底部边框基于

宽度，因此它可以完美地展开（下图可能有点模糊）：

虚线展开（就像它们应该展开的那样），问题是如何展开（重画）拉斐尔形状以匹配给定的%

图纸部分：

    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                    
}

---

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

---

呈现

---

不确定这是否能满足您的特定需求，但您知道Raphael支持基于百分比的宽度吗？例如

paper.rect（0,0，'100%，'100%）

。调整大小时，您只需更改包含

元素的元素的宽度（该元素又包含矩形），矩形将相应地缩放。

我认为您应该使用

rect.attr（{width:…，height:…}）

（另请参见）而不是

设置大小

。后者不是Raphael的方法，可能在不同的浏览器中工作，也可能不工作。

只有IE7？！将在战斗中为你挺身而出。明智地使用它。开发者控制台最初安装在ie8中，而不是ie7@atrueresistance编辑。尽管如此，在没有控制台的情况下仍有一些调试方法，您可以随时求助于

alert

s或类似的方法。您是否尝试过

rect.attr（）

？@atureResistance如果您制作了一个JSFIDLE，会容易得多，顺便说一句。我尝试过让它在JSFIDLE上运行，但它不会在我的浏览器中运行。@atureResistance JSFIDLE通常与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++;
     });                
 });

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