フォームの入力に基づくグラフィカルなjsのchaningパス

Question

私はJqueryの.keyupと.valを使用して、フォーム入力に入力するものを取得します。それから私は変数に値を置きます。いくつかの紙に円を描いた後、私はラファエルで作った。私はフォーム入力で作成した変数をベースにしたパスを変更したいと思っています。今では、数値入力を入力フィールドに入れて、別の円のサイズを描くことができます。私がしたいのは、パス上の点を変更することです。

最初のvarパスは、入力フィールドに100を入力するとポイントの1つが変わるはずです今は何もしません。

私が最終的にしようとしているのは、3つの異なる入力フィールドに入力されているものに基づいてサイズを変更するプログレスバーです。あなたが望む別のアプローチがあるならば、私は完全にオープンです。

http://jsfiddle.net/anderskitson/XPwrj/1/

var paper = new Raphael(document.getElementById('canvas_container'), 500, 500); 
    $("input").keyup(function() { 
     var value = $(this).val(); 

     //var paper = Raphael(10, 50, 320, 200); 
      var circle = paper.circle(50, 40, value); 
      var path = paper.path("M 200 250 l 0 -50 l -10 0 l 0 value z" ); 
      var path = paper.path("M 250 250 l 0 -50 l -10 0 l 0 50 z" ); 
      /*path.animate({ 
      path: "M 250 250 l 0 -100 l -10 0 l 0 100 z" 
     }, 5000, 'elastic');*/ 

     }).keyup(); 

Answer 1

あなたのコードは、文字列ではなく、変数の一部として、「値」を使用しています。 パスコードを

に変更する

var path = paper.path("M 200 250 l 0 -50 l -10 0 l 0 "+value+" z" );