基于表单输入的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 时，第一个 var 路径应该将其中一个点更改为 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"  );