0

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

我的问题始于已经绘制了一些线，并且在用户单击按钮后，应该再绘制几条线。新线的绘制以非常不均匀的方式进行。

我做了一个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。

我可以为此使用一些帮助:-)

更正：第三个 stepCount 日志发生在前两行绘制之后，并且在用户单击“下一个绘制”之前。

已解决：好的，仍然使用逐步绘制更长的子路径的方法，我通过使用melc的解决方案修改了jsfiddle 。我还解决了 David Fregoli 指出的 DOM 中的这种邪恶路径混乱。在 step 函数的每次迭代中，我都会删除之前的子路径。最后，在完整的函数中，我展示了原始路径。这不仅可以生成干净的 DOM，还可以解决一些抗锯齿问题。

4

2 回答 2

2

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

于 2013-11-08T11:38:45.703 回答
2

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

于 2013-11-08T11:23:55.030 回答