应用“旋转”变换后调整图像大小（SVG格式）

Question

我一直在开发一个应用程序，允许用户将图像添加到视口，然后调整它们的大小，裁剪它们并旋转它们。为了使旋转起作用，使用Raphael.js库将图像添加为SVG。

所有图片都有一个轮廓（称为 包装 ）。调整图像大小时，其包装也是如此。旋转图像时，包装器也会展开，因此它将包含旋转的图像（参见下图）。

到目前为止，这么好。除了当我试图在旋转后调整图像对象的大小时，它不再被包含在其轮廓内（见下图）。

调整图片大小时，svg对象＆＃34; x＆＃34;和＆＃34; y＆＃34;属性也需要调整。图像的新尺寸（宽度+高度）和＆＃34; x＆＃34;和＆＃34; y＆＃34;如下所示计算属性：

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
});

＆＃34; init＆＃34; 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);

因此，如果我只是移除对象，然后使用上面的值再次创建它，为什么不能简单地更改其属性来完成应有的工作？我现在已经把头发拉了3天了，所以我很感激一些帮助！