javascript - 「回転」変換を適用した後の画像のサイズ変更（SVG形式）

Question

私は、ユーザーがビューポートに画像を追加し、サイズを変更し、トリミングし、回転できるようにするアプリケーションに取り組んできました。回転が機能するように、Raphael.jsライブラリを使用して画像がSVGとして追加されます。

すべての画像にはアウトラインがあります（ラッパーと呼ばれます）。画像のサイズが変更されると、そのラッパーもサイズ変更されます。画像を回転させると、ラッパーも拡張され、回転した画像が含まれるようになります（以下の画像を参照）。

ここまでは順調ですね。回転した後に画像オブジェクトのサイズを変更しようとすると、そのアウトラインに含まれなくなります（以下の画像を参照）。

画像のサイズを変更するときは、svgオブジェクトの「x」および「y」属性も調整する必要があります。画像の新しいサイズ（幅+高さ）と「x」および「y」属性の両方が、次のように計算されます。

var ratio_width = w / init.wrapper.width,         // w = the new width of the wrapper (computed at each resize step)
    ratio_height = h / init.wrapper.height,       // h = the new height of the wrapper

    svg_width = init.svg.width * ratio_width,     // svg_width = the new width of the image
    svg_height = init.svg.height * ratio_height,  // svg_height = the new height of the image

    x = init.svg.x*ratio_width,
    y = init.svg.y*ratio_height;

this.svg.attr({
    "x": x,
    "y": y,
    "width": svg_width,
    "height": svg_height
});

「init」JavaScriptオブジェクトには、ラッパーのサイズ（幅と高さ）と画像のサイズ（画像が回転した後、サイズが異なります）だけでなく、サイズ変更操作前のx属性とy属性の値も含まれます。 。

重要なのは、上記で計算されたすべての値が正しいということです。サイズ変更の各ステップでsvgを破棄して再追加しようとしたので（ただし、オプションではなく、ちらつきが多すぎます）、サイズ、x、yの値は同じで、次のようになります。

// "this.angle" on the second line is the current rotation angle
this.svg.remove();
this.svg = this.canvas.image(this.src,x,y,svg_width,svg_height).transform("r"+this.angle);

したがって、単にオブジェクトを削除してから、上記の値を使用してオブジェクトを再作成した場合、属性を変更するだけで適切に機能しないのはなぜですか？３日間髪を抜いてますので、よろしくお願いします！