1

Raphael を使用していくつかのパスを描画しています。各パスには、バウンディング ボックスのサイズと位置に関連付けられた四角形 [コンテナー] があります。両方の形状をドラッグするためにコンテナーを使用しています。

移動コールバックでは、両方の位置を更新して、両方が一緒に移動するようにします。

シリアル化するまで、これはすべてうまく機能します。パスをシリアル化するだけで、逆シリアル化後にその場でコンテナーを作成します。

json に変換してから戻すと、問題なく動作します。パスの現在の変換を印刷でき、正しく見えます。この後にパスで変換を行うと、パスがリセットされて 0,0 に移動します。

ここに問題を示すフィドルがあります。

長方形を動かすと、両方のオブジェクトが一緒に動くことがわかります。

[保存/読み込み] をクリックすると問題なく表示され、パスも同じように出力されます。

ここでドラッグすると、パスは 0,0 にリセットされます。印刷は、変換が 0,0 からリセットされたことを示しています。

シリアル化前と同じようにパスを移動する方法を見つけようとしています。その過程で何かが失われていますか？または、更新が必要な内部状態はありますか?

4

2 に答える 2

1

ドラッグの開始時に要素の初期変換オフセットを取得し、それらをドラッグ移動変換の基礎として使用する必要があります。次の点を考慮してください。

var start_x, start_y;
cont.drag(function(x, y, e)
    {
        p.transform('t' + ( start_x + x ) + ',' + ( start_y + y ) );
        cont.transform('t' + ( start_x + x ) + ',' + ( start_y + y ) );
    },
    function( x, y )
    {
        var start_bbox = p.getBBox();
        start_x = start_bbox.x;
        start_y = start_bbox.y;
        console.log("Drag start at %s,%s", start_x, start_y );
    } );

ここにあるフィドルでこれをステージングしました。

残念ながら、パスにはまだ問題があります。パスのオフセットは、ドラッグが使用されるたびに、バウンディング ボックスの y 値と y 軸の差 (正確には 12 の差) だけ増加します。それがどこから来ているのか正確にはわかりません。

于 2012-06-26T19:55:48.750 に答える
1

Raphael.JSON は、要素に格納されたデータをシリアル化します。paper オブジェクトに格納された一時データは保存されないため、 を呼び出すときに実際に何かが失われますR.clear()。たとえば、要素にバインドされたドラッグ イベントは保持されません。

ただし、ここでの主な問題はドラッグ機能にあります。正方形をもう一度ドラッグすると、用紙の左上から変換が適用されることに注意してください。これを処理するには、Raphael.FreeTransform (既に Fiddle に含まれています) を使用することをお勧めします。

Raphael.JSON プラグインと Raphael.FreeTransform プラグインの両方を作成しましたが、同じ問題に苦しんでいます。私は現在、紙の状態を保存して復元できるアプリケーションに取り組んでおり (あなたがしていることと同様)、正常に動作します。ヘルプが必要な場合は、お気軽に Github で問題を開いてください。

于 2012-06-30T00:40:23.107 に答える