6

Paper JS で非常に単純なビーコンのようなアニメーションを作成しようとしています。円は非常に小さく完全に不透明な状態から始まり、消えてアニメーションが再開するまで大きくなり、透明度が増します。

スケーリングを使用して画像を大きくしていますが、元のサイズにリセットすると問題が発生し、現在、単一の形状で作業するのではなく、2 つ目の円を複製してリセットすることに頼っています。これを行う方法。

これまでの大まかなコードを示すために jsFiddle を作成しました。

http://jsfiddle.net/colethecoder/Y3S9n/1

4

3 に答える 3

6

Paperjsは元のパスを保存せず、現在の状態に到達するために適用された操作を記憶しないため、前の状態にリセットするのが難しい場合があります。最も簡単なアプローチはthis.scale、現在のコードが計算しているものを使用することです。リセットする場合this.circle.scale(1/this.scale); は、その方法でjsfiddleを実行します。

参考までに、スケーリングのコードパスは次のとおりです。

  • Item.scale()
  • Item.transform()
  • Item.apply()
  • Path._apply()
  • Segment._transformCoordinates()

したがって、最終結果は_transformCoordinates()、円内の4つのセグメントのそれぞれで呼び出され、ポイント座標を移動するだけです...後でスケーリングを「元に戻す」ことは何も記憶されていません。

スケールを自分で覚える代わりに、Path.fitBounds（）関数を使用して、円を任意のサイズに縮小できます。たとえば、円を作成した直後に外接する長方形を保存して、fitBoundsをそのサイズに戻すことができます。

于 2012-08-09T16:29:39.177 に答える
1

私がこの問題にアプローチした方法は、インスタンス化の直後に paper.js シェイプに originalBounds という新しいオブジェクトをアタッチすることでした。そのサイズで遊ぶ必要がある場合、元のサイズに戻すことはかなり簡単になりました。

于 2015-05-28T14:43:41.107 に答える