0

まず最初に、Raphael を 2 日間使用しているとだけ言っておきますので、この質問をしたことで私を撃たないでください。

Raphael が作成したドロップダウンを次のようにレンダリングしています。

ウィンドウを拡大すると、下の境界線は幅に基づいて<div>いるため、完全に拡大されます (下の画像は少し歪んでいる可能性があります)。

点線は（本来あるべきように）拡大します。問題は、指定された % に一致するようにラファエル形状を拡大（再描画）する方法です。

描画部分:

    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

0

これが特定のニーズに合うかどうかはわかりませんが、Raphael がパーセンテージベースの幅をサポートしていることをご存知ですか? 例えばpaper.rect(0, 0, '100%', '100%')。<svg>サイズを変更するときは、要素を含む要素 (長方形を含む)の幅を変更するだけで、長方形はそれに応じて拡大/縮小されます。

于 2012-08-31T10:33:20.573 に答える