SVG在一条路径上找到一个点到x轴的方向（角度）

我通过移动路径上的对象来制作视差，并且它与getPointAtlength()一起工作正常，但我还需要用该路径旋转此对象。SVG在一条路径上找到一个点到x轴的方向（角度）

我需要像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); 
})

来源

2015-09-25 daredevil

穿心莲小例子小提琴，这将是有益的。 – rajuGT

Raphael中的getPointAtLength返回一个属性为'alpha'的对象。 Alpha是你需要沿着曲线的角度。在上面的例子中这将是p.alpha

所以，你应该能够旋转适用于p.alpha旋转的物体，

如..

myRaphElement.transform（“T” + px +'，'+ py +'r'+ p.alpha）。

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

如果你不能创建raph元素本身，因为svg是内联的，我怀疑你可能会更喜欢使用像Snap.svg这样的库（它与同一作者的命令基本相同），或者你可能使用类似'rotate（'+ l.alpha +'，'+ l.x +'，'+ l.y +'）的css变换来动态地旋转。'

编辑：我误读了Raphael的标签，它没有被使用。

我个人会在这个案例中使用Snap，因为Raphael在这里没有增加很多。你可以使用与inline元素相同的路径在屏幕外创建一个Raphael元素来使用角度，但感觉像是为了加载一个库来矫枉过正。

在捕捉，你可以用..

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

来源

2015-09-25 19:11:45 Ian

但我的元素不是raphael他们r在SVG标签中的正常元素在html中 – daredevil

试过Raphael.getPointAtLength（l，offset）但给了我NaNs – daredevil

如果你纯粹使用内联，那么我认为Raphael是这个工作的错误工具，试试Snap.svg。同样的答案将适用于，因为它与内联svg工作。 – Ian

访问元素使用库这样的任务将是矫枉过正。其实很简单，编写自己的函数来计算角度。所有你需要做的就是使用pointAtLength两个时间一点点偏移：

，然后计算得到的线的角度和使用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>

来源

2015-09-26 03:47:03

SVG在一条路径上找到一个点到x轴的方向（角度）

回答

相关问题