Raphael JS изменяющий путь на основе ввода формы - PullRequest
Новая
       31

Raphael JS изменяющий путь на основе ввода формы

0 голосов
/ 25 февраля 2012

Я использую 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" );

Таким образом, первая переменная path должна изменить одну из своих точек, когда вы вводите 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();

1 Ответ

1 голос
/ 25 февраля 2012

Ваш код использует значение как часть строки, а не как переменную. Измените свой код пути на 

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