1

数学の助けが必要です。Raphael要素セットをキャンバス内の特定のバインド ボックスに動的に変換しようとしています。

たとえば、私のキャンバス (紙) が 600 x 300 で、パスで埋められているとします。これらのパスはすべてセットになっています。

ここで、キャンバスを特定のバインドされたボックスで埋めたいと思います。バインドされたボックスはピクセル座標です。例 [[50,10]、[100,20]]

したがって、最終的な結果は、SVG 要素をズームして配置する関数呼び出しになります。これにより、キャンバスが座標境界にトリミングされます。

var bbox = [[50,10], [100,20]]
animateToBoundBox(set, bbox, duration);
function animateToBoundBox(set, bbox, duration) { /* beautiful code */ }

これを達成する方法は、要素マトリックスを使用することだと思いますが、よくわかりません。これを処理する最もエレガントな方法は何だと思いますか?

ありがとう

4

3 に答える 3

1

他の答えは正しいです-あなたはsetViewBoxを使いたいです。

アニメーションをサポートするバージョンは次のとおりです。それは完全に美しいわけではなく、コードを抽出するためにページのソースを確認する必要がありますが、多かれ少なかれ希望どおりに動作するはずです。

Raphael 拡張としてのビュー ボックス アニメーションは次のとおりです。

Raphael.fn.animateViewBox = function animateViewBox( x, y, w, h, duration, easing_function, callback )
{
    var cx = this._viewBox ? this._viewBox[0] : 0,
        dx = x - cx,
        cy = this._viewBox ? this._viewBox[1] : 0,
        dy = y - cy,
        cw = this._viewBox ? this._viewBox[2] : this.width,
        dw = w - cw,
        ch = this._viewBox ? this._viewBox[3] : this.height,
        dh = h - ch,
        self = this;;
    easing_function = easing_function || "linear";

    var interval = 25;
    var steps = duration / interval;
    var current_step = 0;
    var easing_formula = Raphael.easing_formulas[easing_function];

    var intervalID = setInterval( function()
        {
            var ratio = current_step / steps;
            self.setViewBox( cx + dx * easing_formula( ratio ),
                             cy + dy * easing_formula( ratio ),
                             cw + dw * easing_formula( ratio ),
                             ch + dh * easing_formula( ratio ), false );
            if ( current_step++ >= steps )
            {
                clearInterval( intervalID );
                callback && callback();
            }
        }, interval );
}

(あまり美しくない) デモンストレーションはこちら: http://voidblossom.com/tests/easedViewBox.php

変換を使用することに本当に熱心な場合 (うまく活用すればいくつかの利点がありますが、一般的にはビューボックスの操作に比べて脆弱です)、 http ://voidblossom.com/tests/zoomByTransform に変換を使用した別の例があります。.php .

于 2013-01-30T20:21:44.240 に答える
0

私が言えることは、達成したいことはすべてPaper.setViewBox()アニメーションで処理したほうがよいということです。http://raphaeljs.com/reference.html#Paper.setViewBoxを参照してください。

于 2013-01-30T19:05:48.043 に答える
0

あなたが探しているものを完全に理解しているかどうかはわかりませんが、ビューを特定の境界ボックスにズームしたいようです。setViewBox関数を見ましたか? 基本的に、関数は次のように呼び出します。

setViewBox(bbox[0][0], bbox[0][1], bbox[1][0] - bbox[0][1], bbox[1][1] - bbox[0][0])
于 2013-01-30T19:05:09.310 に答える