javascript - 在滚动条上绘制一条弯曲的虚线 SVG

Question

我的任务是添加一条虚线来链接页面上的一堆插图。我已经搜索了一段时间，发现了一些绘制没有破折号的法线的示例，例如 http://cbron.github.io/blog/2013/12/30/draw-svg-path-on-scroll-tutorial/我以前用过。

据我所知，此技术不适用于虚线，因为它使用笔划破折号数组实际为线条的绘制设置动画。也许我在那里错了？

有人知道用虚线实现相同效果的方法吗？另一件需要注意的事情是，这条线会在不同颜色的背景上移动。

如有任何建议，我们将不胜感激。

更新:工作解决方案

var line;
var subPaths = [];

window.onload = function(){
    line = Snap(document.getElementById("drawMe"));
    getSubPaths();
}

window.addEventListener("scroll", drawLine);

function drawLine() {
  var percentDrawn = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  var percentDrawn = Math.round(percentDrawn * 100);

  line.attr({
      d: subPaths[percentDrawn]
  });

}

function getSubPaths(){
    var maxLength = line.getTotalLength();
    for(var i = 0; i<101; i++){
        var currentLength = maxLength*i/100;
        subPaths[i] = line.getSubpath(0, currentLength);
    }
}

Answer 1

根据您指向 Snap.svg 的链接，我想到了这个解决方案:

<script src="./snap.svg.js"></script>
<script>

    var line;
    var subPaths = [];
    var percentDrawn = 0;

    window.onload = function(){
        line = Snap(document.getElementById("drawMe"));
        getSubPaths();
        loop();
    }

    function loop(){
        setTimeout(function(){
            line.attr({
                d: subPaths[percentDrawn]
            });
            percentDrawn++;
            if( percentDrawn < 101) loop();
        }, 50);
    }

    function getSubPaths(){
        var maxLength = line.getTotalLength();
        for(var i = 0; i<101; i++){
            var currentLength = maxLength*i/100;
            subPaths[i] = line.getSubpath(0, currentLength);
        }
    }
</script>

所以我们要做的是构建一个数组，其中包含原始行的子路径，从开始到总长度的 x%:getSubPaths()。为此，我们实际上需要 Snap.svg，因为它为我们提供了 getSubpath(0, currentLength) 功能。

这实际上就是所有的魔法! loop() 函数只是一个 setTimeout block ，在我们完成绘制后带有中止条件。然而，实际绘图是将先前存储的数组中的相应子路径应用到您的行的 d 属性。