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軸的方向（角度）

回答

相關問題