raphael js меняет путь на основе ввода формы

Я использую Jquery .keyup и .val, чтобы получить то, что я ввожу в форму ввода. Затем я помещаю значение в переменную. После того, как я нарисовал круг на бумаге, которую я создал с помощью raphael. Я хочу изменить путь на основе переменной, которую я создал с помощью ввода формы. Прямо сейчас я могу ввести числовые данные в поле ввода, и будет нарисован круг другого размера. Что я хочу сделать, так это изменить точку на пути 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" );

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

person Cool Guy Yo    schedule 25.02.2012    source источник


Ответы (1)


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

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