2

SVGパスの実験を簡素化するために何かを書こうとしていますが、svgコードが更新されたことを確認できるときに実際に画面が更新されないという問題があります。基本的なワークフローは次のとおりです。入力ボックス (パス文字列) に何かを入力し、[描画] をクリックすると、キャンバスがクリアされ、入力されたパス文字列に従って形状が描画されます。

さらにテストした後、ベータクロムのバグのように見えることに気付きました。次のコードは、Firefox で正常に動作するようです。誰かが何か洞察を持っているなら、それは大歓迎です！

Javascript:

$(function(){
  var paper = Raphael($('#paper')[0], 500, 500);
  $('#path').change(function(){
    console.log($(this).val());
    var rect = paper.rect(10, 10, 50, 50);
    console.log(rect);
    var path = paper.path($(this).val());
  });
});

HTML:

<div id="content">
  <div id="paper"></div>
  <div id="pathDiv">
    <input id="path" type="text" name="path" />
  </div>
</div>

誰か提案があれば、それは大歓迎です！

ジェイソン

4

1 に答える 1

5

あなたが経験している問題は、onchange関数を実行するたびに新しいパスを書いていることだと思いますが、本当にやりたいことは既存のパスを更新することです。これを行うには、イベント ハンドラー関数の内外で宣言をrect行い、関数内の既存のオブジェクトを次のように更新します。path

var paper = Raphael($('#paper')[0], 500, 500);
var rect = paper.rect(0, 0, 50, 50);
var path = paper.path("M100,25 L100,140 L50,50");

$('#path').change(function(){
  rect.attr({x: "10", y: "10"});
  path.attr("path",$(this).val());
});

これを Firefox と IE で試してみましたが、問題なく動作するようです。これが意図したものでない場合は、質問を更新してください。

于 2010-08-31T17:04:35.663 に答える