如何使用 Raphael 动态更新 svg？

发布于 2024-09-16 14:40:04 字数 763 浏览 1 评论 0原文

我正在尝试编写一些东西来简化 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>

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

贾森

原文

I'm trying to write something to simplify experimentation with SVG path, but i have a problem where it doesn't actually update the screen when i can verify that the svg code is updated. Basically the work flow is as follows: I type something into the input box (A path string), and click draw, it will clear the canvas, then draw the shape according to the typed path string.

After some more testing, i realized that it seem to be a bug in beta chrome. As the following code seem to work fine in firefox. If anyone have any insights, it would be much appreciated!

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>

If anyone have any suggestions, it would be much appreciated!

Jason

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

零度℉ 2024-09-23 14:40:04

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

I think the problem you're experiencing is that you're writing a new path each time you execute your onchange function, whereas what you really want to do is update your existing path. To do this take the declarations for rect and path outside of your event handler function, then update the existing objects inside the function like this:

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());
});

I've tried this in Firefox and IE and it seems to work fine. If this isn't what you meant please update your question.

回复收藏 0 原文

~没有更多了~