1
我正在写一个简单的SVG绘图应用程序,现在我正在尝试优化线条绘制。原始变体在每个mousemove事件中绘制每个'lineTo'。它会造成看起来不好看的锐度。JS svg绘画。如何降低画线频率(mousemove事件)?
使用全局变量testInt来模拟lineTo的动作之间的延迟,它提供了非常好的流畅线条,但似乎是不好的做法。任何人都可以建议一个更好的解
这是我的drawLine功能代码(正如我所说的,它基本上修改现有<路径>元素):
drawLine: function(id, X, Y){
var path = document.getElementById(id);
if(path.getAttribute('d'))
{
testInt++;
if(testInt>=6)
{
PathHelper.addLineTo(path, X, Y);
testInt = 0;
}
}
else
{
PathHelper.moveTo(path, X, Y);
}
}
PathHelper是仅产生正确的串,并将其插入已经创建路径。
哦,我已经忘记了这个关闭功能。谢谢) –
我发现超时不是最好的选择,因为如果用户慢慢地移动他的鼠标 - 它会产生这种“清晰度”。我已经将之前的desicion与闭合逻辑结合起来了。 –
@StasGarcia,作为另一种选择:也许你可以计算最后绘制的坐标和当前鼠标坐标之间的距离。然后,如果距离高于某个阈值,则只绘制新线。 –