1

こんにちは、オタクの皆さん！

私は Web 3.0 についてこの革新的なアイデアを持っています。jQuery-UI の SVG-UI-lib を作成します。いくつかの機能を可能にするために、d3.js にフォーク/貢献する必要があります。すなわち。曲線/パスに沿ってアニメーション化/配置できるようにしたいです。

はい、Raphael が存在することは知っていますが、d3 は github にあり、d3s の構文の方が好きです ...

それで、私が今考えているのは、実際には直線ではなくパスであるスクロールバーを作成する方法です-非常に「派手」ですよね？

そこで、SMIL を使用してこれを行う 1 つの方法を見つけました。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

わかりました、私の質問は、実際には、SMIL を使用せず、少なくともアニメーション機能を使用せずに、プログラム/javascript でこれを行う方法があるかどうかです。値を設定するためだけに animate-tag を誤用するのは少しハックに思えます...

さて、私は再び SMIL である別のタグを見つけたので、純粋な js ではありませんが、むしろこの目的のために意図されたもののように見えます:

http://www.w3.org/TR/SVG11/animate.html#SetElement ...「通常の」アニメーションタグのすべての属性/パラメーターを使用できるようにしますが、関与しません-少なくとも私はその名前からそう推測できます - そもそもアニメーション化してすぐに停止します。これにより、begin="onBegin" と言って beginElement() メソッドを呼び出すことができます。

編集：OK、セットはそれほどクールではありません。パスに沿ってアニメーション化する必要がある animateMotion-specific-props を使用することはできません

于 2012-11-13T18:34:00.090 に答える