Question

我通过在路径上移动一个对象来进行视差，并且它与getPointAtlength()一起工作正常但我还需要用路径旋转这个对象。

我需要类似getPointAtLength()的东西，但对于角度，我得到了点的角度。 Rapheal似乎有一个方法，但它对用html创建的svg元素不友好，或者我不知道如何处理它。有什么想法吗？

var l = document.getElementById('path');
var element=$('#svg_26')
$(window).scroll(function(){
    var pathOffset=parseInt($('#l1').css('stroke-dashoffset'));
    var p = l.getPointAtLength(-1*pathOffset);
    translation = 'translate('+p.x+'px,'+p.y+'px)'
    $(element).css('transform',translation);
})

Answer 1

使用库来完成这类任务会有点过分。实际上编写自己的函数来计算角度非常简单。你所要做的就是使用pointAtLength两次带一点偏移：

var p1 = path.getPointAtLength(l)
var p2 = path.getPointAtLength(l + 3)

然后使用Math.atan2

计算结果线和x轴的角度

var deg = Math.atan2(p1.y - p2.y, p1.x - p2.x) * (180 / Math.PI);

这是使用上述公式的一个小例子

var path = document.getElementById("path")
var obj = document.getElementById("obj")
var l = 0
var tl = path.getTotalLength()

function getPointAtLengthWithRotation(path, length) {
  var p1 = path.getPointAtLength(length)
  var p2 = path.getPointAtLength(length + 3)
  var deg = Math.atan2(p1.y - p2.y, p1.x - p2.x) * (180 / Math.PI);
  return {
    x: p1.x,
    y: p1.y,
    angle: deg
  }
}

setInterval(function() {
  l += 1
  if (l > tl) l = 0;
  var p = getPointAtLengthWithRotation(path, l)
  obj.setAttribute("transform", "translate(" + p.x + "," + p.y + ") rotate(" + (p.angle + 180) + ")")
}, 30)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <path id="path" d="M 81.713425,82.629068 C 77.692791,85.788547 73.298237,77.367896 68.194886,79.039107 63.091534,80.710434 58.027628,96.952068 53.04637,97.140958 48.065112,97.329732 50.503508,75.285207 45.397105,74.05952 40.290703,72.833834 38.487501,93.968537 33.85932,91.287114 29.23114,88.605807 32.245641,70.914733 29.647307,66.19971 27.048973,61.484686 19.604932,68.733636 17.542589,63.315055 15.480245,57.896474 32.172733,59.004979 32.053727,53.363216 31.93472,47.721442 8.0865997,39.989401 9.2246856,34.665848 10.362772,29.342295 28.830448,38.693055 31.065274,33.7132 33.300101,28.733334 22.734045,13.601966 26.210126,9.6067771 29.686208,5.6115765 41.809938,29.357138 46.524268,27.383715 c 4.71433,-1.973424 3.011846,-23.1001292 8.022646,-23.3332919 5.0108,-0.2331744 4.529056,18.3713929 9.45006,20.4259809 4.921003,2.054588 12.017373,-15.4803016 16.717604,-13.058602 4.700233,2.421699 -6.261038,14.180819 -2.913997,18.778859 3.347041,4.59804 12.339067,-3.78046 13.896719,1.543011 1.557652,5.323471 -9.713912,13.199372 -9.176986,18.679109 0.536926,5.479772 19.347976,2.957331 18.124596,8.213665 -1.223374,5.256392 -21.036293,1.236997 -24.253076,5.968111 -3.216785,4.731114 9.342224,14.869033 5.321591,18.028511 z"
  fill="none" stroke="grey" />
  <path id="obj" d="M-5 -5 L5 0L-5 5z" fill="green" />
</svg>

Answer 2

拉斐尔的

getPointAtLength返回一个属性为＆＃39; alpha＆＃39;的对象。 Alpha是曲线所需的角度。在上面的例子中，它将是p.alpha

因此，您应该能够对由p.alpha

旋转的对象应用旋转

例如..

myRaphElement.transform（＆＃39; t＆＃39; + p.x +＆＃39;，＆＃39; + p.y +＆＃39; r＆＃39; + p.alpha）。

最后一部分将围绕其中心旋转元素。

如果你不能创建raph元素本身，因为svg是内联的，我怀疑你可能会更喜欢像Snap.svg这样的库（它的命令与同一作者大致相同），或者你可以可能通过css变换动态旋转使用类似＆＃39;旋转（＆＃39; + l.alpha +＆＃39;，＆＃39; + l.x +＆＃39;，＆＃39; + l。 Y +＆＃39;）＆＃39;

编辑：我误读了标签中的拉斐尔，当它没有被使用时。

我个人会在这种情况下使用Snap，因为拉斐尔并没有在这里添加很多东西。您可以在屏幕外创建一个Raphael元素，其路径与内联元素相同，只是为了使用角度，但感觉就像过度使用加载库一样。

在Snap中，您可以使用..

访问该元素

myElement = Snap('#svg_26')
p = myElement.getPointAtLength(-1*pathOffset);    
myElement.transform('t' + p.x + ',' + p.y + 'r' + p.alpha)

SVG在路径

2 个答案: