Как динамически обновить SVG с помощью Рафаэля? - PullRequest
Новая
       0

Как динамически обновить SVG с помощью Рафаэля?

2 голосов
/ 30 августа 2010

Я пытаюсь написать что-нибудь, чтобы упростить эксперименты с SVG-путём, но у меня есть проблема, когда он не обновляет экран, когда я могу убедиться, что код svg обновлен. В основном рабочий процесс выглядит следующим образом: я что-то набираю в поле ввода (строка пути) и нажимаю кнопку «Рисование», он очистит холст, а затем нарисует фигуру в соответствии с набранной строкой пути.

После еще одного тестирования я понял, что это, похоже, ошибка в бета-хроме. Как кажется, следующий код нормально работает в Firefox. Если у кого-то есть идеи, это будет высоко ценится!

Javascript: 

$(function(){
  var paper = Raphael($('#paper')[0], 500, 500);
  $('#path').change(function(){
    console.log($(this).val());
    var rect = paper.rect(10, 10, 50, 50);
    console.log(rect);
    var path = paper.path($(this).val());
  });
});

HTML: 

<div id="content">
  <div id="paper"></div>
  <div id="pathDiv">
    <input id="path" type="text" name="path" />
  </div>
</div>

Если у кого-то есть какие-либо предложения, мы будем очень признательны!

Jason

1 Ответ

5 голосов
/ 31 августа 2010

Я думаю, что проблема, с которой вы сталкиваетесь, заключается в том, что вы пишете новый путь каждый раз, когда выполняете функцию onchange, тогда как вы действительно хотите обновить существующий путь.Чтобы сделать это, возьмите объявления для rect и path вне вашей функции-обработчика событий, затем обновите существующие объекты внутри функции следующим образом: 

var paper = Raphael($('#paper')[0], 500, 500);
var rect = paper.rect(0, 0, 50, 50);
var path = paper.path("M100,25 L100,140 L50,50");

$('#path').change(function(){
  rect.attr({x: "10", y: "10"});
  path.attr("path",$(this).val());
});

Я пробовал это в Firefox и IE, и, кажется, работает нормально.Если это не то, что вы имели в виду, обновите ваш вопрос.

...