0

paper.text オブジェクトが現在の位置から別の位置に移動する Raphael.js で簡単なアニメーションを実行しようとしています。これが私のコードの一部です（すべてを投稿するには多すぎます）：

songPos = getSongPosition(this, charIndex);
letter.path.animate({x: songPos.x, y: songPos.y, "font-size": this.correctFontSize}, 500, onAnimationComplete);

上記のコードで参照されている Letter オブジェクトは次のとおりです。

function Letter(args)
{
    this.letter = args.letter || "A";
    this.correct = args.correct || false;
    this.transformation = args.transformation || "";
    this.initX = args.x || 0;
    this.initY = args.y || 0;
    this.path = null;
}

Letter.prototype.buildPath = function()
{
    this.path = paper.text(this.initX, this.initY, this.letter);
    if(this.transformation)
    {
        this.path.transform(this.transformation);
    }
    return this;
};

問題は、によって返されたxとの値を出力していて、それらは正しいのですが、animate メソッドがテキスト オブジェクトを画面外のどこかに送信していることです。また、アニメーション属性を に設定しようとしましたが、それでも同じ結果が得られます。必要に応じて、さらに多くのコードを投稿できます。ygetSongPosition{x: 0, y: 0}

どんな助けでも大歓迎です。

更新 1: 私のプログラムの一部では、オブジェクトを特定の座標に移動できる必要があります。一部のオブジェクトは回転し、他のオブジェクトは回転しないので、次のように書きました。

Letter.prototype.getMoveTransform = function(x, y)
{
    var bbox = this.path.getBBox(true);
    var dx = x - bbox.x;
    var dy = y - bbox.y;
    return "T" + dx + "," + dy + (this.transformation == null ? "" : this.transformation);
};

これが私の問題の根源だと思います。この関数は、回転したオブジェクトを (x, y) に移動するために必要な変換を生成することになっています。アニメーションごとにオブジェクトを再回転する必要がある理由がわかりません。

更新 2: 何とか問題を解決しました。私は自分のソリューションを投稿しますが、なぜこれが機能するのか、そもそも機能しないのかわかりません。

4

1 に答える 1

1

this.path.getBBox(真); this.path.getBBox() または this.path.getBBox(false) にする必要があります。

dx と dy を計算するために毎回変換された位置を取得する必要があります

于 2013-09-01T05:11:36.173 に答える