1

嘿，伙计们和极客们！

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

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

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

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

因此，在这里的另一篇文章中，我发现了美妙的方法 getPointAtLength(0..1) 这将使沿着路径创建滚动条变得很容易......而且我真的不需要旋转，因为它还不错如果手柄始终以 90 度的方式定向，以提示其行驶方向。

但无论如何，我想知道，

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

干杯，乔汉内斯

4

2 回答 2

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)
于 2012-11-13T22:55:06.960 回答
0

好的，我的问题实际上是/是否有一种相当程序化/javascript 的方式来执行此操作，不涉及 SMIL 或至少不涉及动画功能。滥用动画标签只是为了设置一个值似乎有点 hacky...

好吧，我发现了另一个标签，它也是 SMIL，所以不是纯 js，但它看起来更像是为此目的而设计的东西：

http://www.w3.org/TR/SVG11/animate.html#SetElement ...您是否可以使用“正常”动画标签的所有属性/参数，但不涉及 - 至少我按它的名字猜——首先是动画，然后立即停止。它将使我能够只说 begin="onBegin" 然后调用 beginElement() 方法。

编辑：好的，设置不是很酷。它无法使用我需要沿路径设置动画的 animateMotion-specific-props

于 2012-11-13T18:34:00.090 回答