有沒有辦法* getRotationAngleAtLength（浮點距離）*類似於getPointAtLength（浮點距離）

嘿夥計們和其他極客！有沒有辦法* getRotationAngleAtLength（浮點距離）*類似於getPointAtLength（浮點距離）

我對Web 3.0有這個革命性的想法，呵呵。我要創建一個SVG-UI-lib的la jQuery-UI。爲了使一些可能的功能，我需要fork /貢獻給d3.js。即。我想能夠沿着曲線/路徑進行動畫/定位。

是的，我知道有拉斐爾，但隨後D3在GitHub上，我更喜歡D3S'語法...

那麼，我想現在的問題是如何創建滾動條，實際上是不直線，但路徑 - 非常「華麗」，是吧？因此，我找到了一種使用SMIL的方法：使用beginElementAt（）和endElementAt（）或pausAnimations（）的某種組合，可以讓我沿着一條路徑進行動畫...沒有時間準確定位通過利用路徑。 ~~光程ATTR~~ .getTotalLength（）方法---使用旋轉屬性我甚至可以讓它旋轉沿着路徑傾斜

因此，在不同的崗位在這裏我發現了精彩的方法getPointAtLength（0..1 ）這將使它很容易創建一個滾動條沿路徑... 而我並不真的需要旋轉，因爲它不是一件壞事，如果手柄總是以90度的方向定位，以暗示這是駕駛方向。

但無論如何，我想知道，

_有沒有像這樣getPointAtLength（0..1）表示取向的方法??? _

乾杯，Joehannes

來源

2012-11-13 Joehannes

如果我理解'getPointAtLength'正確，它計算兩個這樣的點之間的角度應該是一件微不足道的事情。 – Shmiddty

@Shmiddty路徑可以是貝塞爾曲線，所以角度不包含。 – Duopixel

@Duopixel如果您正在尋找沿路徑某處某點的「方向」，則可以通過簡單地抓住點之前的點和點之後的點並計算它們之間的角度來近似該點。顯然，你想要儘可能小的點之間的距離。 – Shmiddty

我已經得到了它非常粗略的工作路徑動畫：http://jsfiddle.net/UT69H/18/

這真是戰戰兢兢，但它與路徑旋轉。請注意，我將mousemove處理程序移動到body元素，以便在鼠標移出本機外時不會突然停止。

bod.on "mousemove",() -> 
    if mousedown 
     pos = getPosHandle { x: d3.mouse(h[0][0])[0], y: d3.mouse(h[0][0])[1] } 
     pos1 = getPosHandle { x: d3.mouse(h[0][0])[0], y: d3.mouse(h[0][0])[1] - 1 } 
     pos2 = getPosHandle { x: d3.mouse(h[0][0])[0], y: d3.mouse(h[0][0])[1] + 1 } 
     ang = Math.round(Math.atan2(pos2.y - pos1.y, pos2.x - pos1.x) * 180/Math.PI) - 90 
     h.attr "transform", "rotate(#{ang} #{pos.x} #{pos.y})" 
     h.attr "x", (pos.x - h.attr("width")/2) 
     h.attr "y", (pos.y - h.attr("height")/2)

這是一個好一點：http://jsfiddle.net/UT69H/19/

bod.on "mousemove",() -> 
    if mousedown 
     pos = getPosHandle { x: d3.mouse(bod[0][0])[0], y: d3.mouse(bod[0][0])[1] } 
     pos1 = getPosHandle { x: d3.mouse(bod[0][0])[0], y: d3.mouse(bod[0][0])[1] - 1 } 
     pos2 = getPosHandle { x: d3.mouse(bod[0][0])[0], y: d3.mouse(bod[0][0])[1] + 1 } 
     ang = Math.round(Math.atan2(pos2.y - pos1.y, pos2.x - pos1.x) * 180/Math.PI) - 90 
     h.attr "transform", "rotate(#{ang} #{pos.x} #{pos.y})" 
     h.attr "x", (pos.x - h.attr("width")/2) 
     h.attr "y", (pos.y - h.attr("height")/2)

您可以通過另外的間隔測試點出減少抖動：http://jsfiddle.net/UT69H/21/

bod.on "mousemove",() -> 
    if mousedown 
     pos = getPosHandle { x: d3.mouse(bod[0][0])[0], y: d3.mouse(bod[0][0])[1] } 
     pos1 = getPosHandle { x: d3.mouse(bod[0][0])[0], y: d3.mouse(bod[0][0])[1] - 4 } 
     pos2 = getPosHandle { x: d3.mouse(bod[0][0])[0], y: d3.mouse(bod[0][0])[1] + 4 } 
     ang = Math.round(Math.atan2(pos2.y - pos1.y, pos2.x - pos1.x) * 180/Math.PI) - 90 
     h.attr "transform", "rotate(#{ang} #{pos.x} #{pos.y})" 
     h.attr "x", (pos.x - h.attr("width")/2) 
     h.attr "y", (pos.y - h.attr("height")/2)

來源

2012-11-13 22:55:06 Shmiddty

http://jsfiddle.net/UT69H/20/這幾乎適用於任何路徑，但也許有點古怪。 – Shmiddty

嘿，這很酷。我喜歡插入歐幾里德距離的方式，當它涉及到一條不僅跟隨一個軸，而且還有兩個方向的路徑時:)我只是想知道如何擺脫這種怪異......你必須計算角度並且看看它是否高於或低於45°，擺脫歐幾里得公式，只是做一個切換，如果是這樣，使用這個軸作爲公式基礎，如果不同其他...可能我猜，酷男，保持它 – Joehannes

@Joehannes很不錯的主意。 coffeescript的語法會讓我有點不適應，所以我沒有太多玩法，但我相信你可以從這裏拿下。 :) – Shmiddty

好吧，我的問題實際上是/是如果有一個相當程序/ JavaScript的這樣的方式，不涉及SMIL或至少不涉及動畫的功能。似乎有點hacky濫用一個動畫標籤只是爲了設置一個值...

嗯，我發現了另一個標籤，它又是SMIL，所以不是純粹的js，但它看起來更像是一些東西專門用於此目的：

http://www.w3.org/TR/SVG11/animate.html#SetElement ...您是否可以使用「正常」動畫標籤的所有attrs/params，但不涉及 - 至少我是這麼想的 - 通過其名稱 - 在動畫中第一個地方，立即停止。它將使我只能說begin =「onBegin」，然後調用beginElement（）方法。

編輯：好吧，設置不是很酷。它不能夠使用特定animateMotion-道具，我需要沿着

來源

2012-11-13 18:34:00 Joehannes

有沒有辦法* getRotationAngleAtLength（浮點距離）*類似於getPointAtLength（浮點距離）

回答

相關問題