Question

我需要逐步绘制基本的几何形状。也就是说，当我画一条线时，你需要看到它像动画一样延伸。这里有几个关于如何做的问题，我采用了这个approach。

我的问题在已经绘制了一些线条时开始，并且在用户单击按钮之后，应该绘制更多的线条。新线条的绘制以非常不平衡的方式发生。

我做了一个jsfiddle来说明。它首先正确绘制两条线。然后，如果用户单击“绘制下一个”，则会绘制另外两行，但绘图不平滑。

我一直在尝试调试，并且jquery的animate的step函数存在一些问题。

var stepCount = 0;
$('path[fill*="none"]').animate({
    'to': 1
}, {
    duration: duration,
        step: function(pos, fx) {
    //console.log("fx = ", fx);
    stepCount += 1;
        var offset = length * fx.pos;
        var subpath = line.getSubpath(0, offset);
        canvas.path(subpath).attr({

           'stroke-width': 2,
           stroke: "black"
        });
        },
    complete: function() {
    console.log("stepCount = ", stepCount);
    }
});

我已经计算了这些步骤，并在完整函数中为每一行记录了它们：

stepCount =  139
stepCount =  140
stepCount =  278
stepCount =  1261
stepCount =  1262
 ....
stepCount =  2318

所以前两个stepCounts代表前两行。 139,140，这是合理的。然后第三行得到278的计数 - 步数的两倍。但是对于第四个，它变得混乱，它从1261到2318打印出一长串stepCounts。

我可以使用一些帮助： - ）

更正：第三步计数日志在绘制前两行后，用户点击“下一步绘制”之前发生。

已解决：确定，仍在使用逐步绘制更长路径的方法，我使用melc的解决方案修改了jsfiddle。我还解决了David Fregoli指出的这个不道德的道路混乱。在step函数的每次迭代中，我删除前一个子路径。最后，在完整的功能中，我展示了原始路径。这不仅可以实现干净的DOM，还可以解决一些抗锯齿问题。

Answer 1

在renderPath函数中，您正在查询页面中所有<path>元素的DOM，并为每一个元素设置动画。

Answer 2

选择器$('path[fill*="none"]').animate({选择所有路径元素。要使其正常工作，您需要将其替换为$(line.node).animate({。

svg渐进线绘图hickups，jQuery animate-step的问题

2 个答案: