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块，一旦我们完成绘图就会出现中止条件。然而，实际的绘图是将先前存储的数组中的相应subPath应用到行的d属性。

在滚动

1 个答案: