2

我正在尝试编写一些东西来简化 SVG 路径的实验，但是当我可以验证 svg 代码是否已更新时，我遇到了一个问题，它实际上并没有更新屏幕。基本上工作流程是这样的：我在输入框中输入了一些东西（路径字符串），然后点击绘制，它会清除画布，然后根据输入的路径字符串绘制形状。

经过更多测试，我意识到这似乎是 beta chrome 中的一个错误。因为下面的代码似乎在 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>

如果有人有任何建议，将不胜感激！

杰森

4

1 回答 1

5

我认为您遇到的问题是每次执行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 中尝试过，它似乎工作正常。如果这不是您的意思，请更新您的问题。

于 2010-08-31T17:04:35.663 回答