javascript - 有没有办法 *getRotationAngleAtLength(in float distance)* 类似于 getPointAtLength(in float distance)

Question

嘿，各位极客们!

我对 Web 3.0 有一个革命性的想法，呵呵。我将创建一个像 jQuery-UI 一样的 SVG-UI-lib。为了使某些功能成为可能，我需要 fork /贡献 d3.js。IE。我希望能够沿着曲线/路径设置动画/定位。

是的，我知道有 Raphael，但是 d3 在 github 上，我更喜欢 d3s 的语法...

所以，我现在正在考虑的是如何创建实际上不是直线而是路径的滚动条 - 非常“华丽”，是吗？

所以，我找到了一种使用 SMIL 来做到这一点的方法:使用 beginElementAt() 和 endElementAt() 或 pausAnimations() 的某种组合将允许我沿着路径进行动画...而没有时间通过​​利用路径精确到该位置。 pathLength attr .getTotalLength( )方法---使用旋转属性我什至可以让它沿着路径倾斜度旋转

因此，在另一篇文章中，我发现了一个很棒的方法 getPointAtLength(0..1)这将使沿着路径创建滚动条变得很容易......而且我真的不需要旋转，因为如果 handle 始终以 90 度的方式定向以暗示其行驶方向，这并不是一件坏事。

但是无论如何，我想知道，

_ 是否有像 getPointAtLength(0..1) 这样表示方向的方法？？？ _

干杯，乔汉内斯

Answer 1

我已经让它大致工作了: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)