0

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

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

包含在其包装中的图像

到目前为止，一切都很好。除了当我尝试在旋转后调整图像对象的大小时，它不会再包含在其轮廓中（见下图）。

图像在旋转后调整大小

调整图片大小时，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);

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

4

0 回答 0