基於表單輸入的raphael js chaning路徑

Question

我正在使用Jquery .keyup和.val來抓取我輸入的表單輸入。然後我將該值放入一個變量中。在我用拉斐爾創作的一些紙上畫了一圈之後。我想修改一個路徑基於我創建的變量與表單輸入。現在我可以將數字輸入放入輸入字段並繪製不同的圓圈大小。我想要做的是改變一個點的路徑var path = paper.path("M 250 250 l 0 -50 l -10 0 l 0 50 z" );與被鍵入的是什麼，所以它看起來像這樣var path = paper.path("M 200 250 l 0 -50 l -10 0 l 0 value z" );

所以第一個變種路徑應該改變它的點之一，當你鍵入100到輸入字段中的值到100.現在它什麼也沒做。

我最終試圖做的是有一個進度條，根據輸入到三個不同的輸入字段中的內容改變大小。如果你有另一種方法，我完全開放。

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" );