Question

嘿伙计们和伙伴们！

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

是的，我知道有拉斐尔，但后来d3在github上，我更喜欢d3s的语法......

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

所以，我找到了一种使用SMIL的方法：使用beginElementAt（）和endElementAt（）或pausAnimations（）的某种组合将允许我沿路径动画...没有时间通过利用路径确切地说明该位置。 ~~pathLength attr~~ .getTotalLength（）方法---使用旋转属性我甚至可以让它沿路径倾斜旋转

所以在这里的另一篇文章中，我发现了一个很棒的方法getPointAtLength（0..1）这样可以轻松地沿路径创建滚动条... 而且我并不真的需要旋转，因为如果手柄始终以90度方向定向以便暗示它的行驶方向，这并不是一件坏事。

但无论如何，我想知道，

_有一种像这样的方法getPointAtLength（0..1）代表方向??? _

干杯，Joehannes

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)

Answer 2

好吧，我的问题实际上是/是否有一个相当程序化/ javascript方式这样做，不涉及SMIL或至少不涉及动画功能。为了设置一个值而误用animate-tag似乎有些麻烦......

好吧，我发现了另外一个又是SMIL的标签，所以不是纯粹的js，但它看起来更像是为了这个目的的意思：

http://www.w3.org/TR/SVG11/animate.html#SetElement ...你能使用“正常”动画标签的所有attrs / params，但不涉及 - 至少我猜它的名字 - 首先是动画并立即停止。它将使我能够说出begin =“onBegin”，然后调用beginElement（）方法。

修改：好的，设置不是那么酷。它无法使用animateMotion特定的道具，我需要沿路径动画

有没有办法* getRotationAngleAtLength（浮动距离）*类似于getPointAtLength（浮动距离）

2 个答案: