调整SVG元素组的大小

Question

我正在开发一个SVG应用程序，现在我想让用户使用可拖动的边角来调整对象的大小，这与SVG-edit (http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html)非常类似。该功能应如下所示:用户选择一个SVG对象，将其拖动到主“画布”上，一旦在“画布”上，对象外部的四个角出现，用户可以在每个角点上拖动并拖动以放大对象。对象将是矩形的，并使用路径创建，而不是使用SVG‘rect’函数创建。对于如何实现这一点，有人有什么建议吗？提前感谢

Answer 1

这可以通过将要调整大小的项包装在g元素中，然后对该元素应用转换来实现。让我们以拖动右下角的简单情况为例。您需要首先确定g元素的边界框。您可以将mousedown、mousemove、mouseup事件添加到该元素中，也可以使用某些占位符元素(如矩形)作为手柄拖动以调整大小。这里一个重要的注意事项是，如果你使用小形状进行跟踪，那么肯定会发生不好的事情。用户可以轻松地快速拖动，以至于鼠标移到形状之外，从而取消拖动操作。为了解决这个问题，我通常在整个画布上使用一个透明的形状，并将点事件翻转。我在那里注册了我的鼠标跟踪事件。这样，您可以跟踪鼠标，而不必担心会退出形状。

那么，回到调整大小的问题。你需要将你现在的职位和新职位进行比较。我可能会使用从左上角到右下角的长度的比率除以您正在拖动的左上角和新的右下角的长度。现在，您可以构造一个转换，将g元素缩放该值。然而，事情在这里变得有点棘手，这可能是你遇到了困难。首先，您需要将左上角平移到原点，然后缩放，然后再将原点平移回来。这将产生左上角保留在当前位置的效果，同时调整g元素的其余内容的大小。

哈哈，凯文