2010-10-21 128 views
1

我正在使用SVG应用程序,现在想让用户使用可拖动的角来调整对象的大小,这与SVG-edit(http://svg-edit.googlecode.com /svn/trunk/editor/svg-editor.html)。 该功能应该如下工作:用户选择一个SVG对象,将其拖动到主“画布”上,并在“画布”上拖动一次,出现对象外侧的四个角,用户可以拖动每个角点&拖动放大对象。这些对象的形状将是矩形的,并且使用路径创建,而不是使用SVG的“矩形”功能。 有没有人有任何建议,应如何实施? 由于提前调整SVG元素的组的大小

+0

哪个svg-editor? – eumiro 2010-10-21 07:12:49

+0

NetBeans IDE 6.9 – 2010-10-21 07:15:56

+1

使用此信息更新您的问题(我为您添加了标签) – eumiro 2010-10-21 07:17:53

回答

1

这都是可以由你包裹在g组件所调整的项目,然后通过应用转换到元件来实现。让我们拖一下右下角的简单例子。您将需要首先确定g元素的边界框。您可以将mousedown,mousemove,mouseup事件添加到该元素,或者使用一些占位符元素(如矩形)作为拖动来重新调整大小的句柄。这里一个重要的注意事项是,如果你使用小形状进行跟踪,那么不好的事情肯定会发生。用户拖动速度很快,以至于鼠标超出形状,从而取消拖动操作。为了解决这个问题,我通常在整个画布上使用一个透明的形状,并转动点事件。我在那里注册我的鼠标跟踪事件。这样您就可以跟踪鼠标而不用担心会退出形状。

所以,回到调整大小。您需要将您的当前位置与新位置进行比较。我可能会使用从左上角到右下角长度的比率除以您拖动的左上角和右下角的长度。现在,您可以构建一个按照该数量缩放g元素的变换。然而,这里的事情有点棘手,这可能是你有困难。首先,您需要将左上角翻译为原点,然后缩放,然后将原点翻译回原点。这会给左上角留下当前位置的效果,同时调整g元素内容的其余部分。

HTH, Kevin