我正在使用SVG应用程序,现在想让用户使用可拖动的角来调整对象的大小,这与SVG-edit(http://svg-edit.googlecode.com /svn/trunk/editor/svg-editor.html)。 该功能应该如下工作:用户选择一个SVG对象,将其拖动到主“画布”上,并在“画布”上拖动一次,出现对象外侧的四个角,用户可以拖动每个角点&拖动放大对象。这些对象的形状将是矩形的,并且使用路径创建,而不是使用SVG的“矩形”功能。 有没有人有任何建议,应如何实施? 由于提前调整SVG元素的组的大小
1
A
回答
1
这都是可以由你包裹在g组件所调整的项目,然后通过应用转换到元件来实现。让我们拖一下右下角的简单例子。您将需要首先确定g元素的边界框。您可以将mousedown,mousemove,mouseup事件添加到该元素,或者使用一些占位符元素(如矩形)作为拖动来重新调整大小的句柄。这里一个重要的注意事项是,如果你使用小形状进行跟踪,那么不好的事情肯定会发生。用户拖动速度很快,以至于鼠标超出形状,从而取消拖动操作。为了解决这个问题,我通常在整个画布上使用一个透明的形状,并转动点事件。我在那里注册我的鼠标跟踪事件。这样您就可以跟踪鼠标而不用担心会退出形状。
所以,回到调整大小。您需要将您的当前位置与新位置进行比较。我可能会使用从左上角到右下角长度的比率除以您拖动的左上角和右下角的长度。现在,您可以构建一个按照该数量缩放g元素的变换。然而,这里的事情有点棘手,这可能是你有困难。首先,您需要将左上角翻译为原点,然后缩放,然后将原点翻译回原点。这会给左上角留下当前位置的效果,同时调整g元素内容的其余部分。
HTH, Kevin
相关问题
- 1. 调整大小和可拖动该组的SVG元素
- 2. 调整SVG foreignObject元素的大小以适应HTML元素
- 3. 调整大小的元素
- 4. 元素的调整大小
- 5. 调整窗口上的html元素的大小调整大小
- 6. 将SVG元素的大小调整为其内容
- 7. 使用JavaScript和D3调整大小的SVG元素
- 8. 在调整窗口大小时调整UI元素的大小
- 9. 调整大小时缩小/扩大子元素的大小
- 10. 如何调整SVG大小?
- 11. 自动调整SVG大小?
- 12. SVG动态调整大小
- 13. Highcharts svg元素“highcharts-series-group”不调整大小
- 14. SVG图片元素调整大小图片
- 15. 使用jscrollpane调整元素的大小
- 16. 使调整大小的元素动态
- 17. 调整UI元素的大小Cocoa
- 18. 嵌套可调整大小的元素
- 19. 调整jQuery中的元素大小/ javascript
- 20. 调整滚动元素的大小
- 21. 可调整大小的HTML元素
- 22. jQuery调整CSS元素的大小
- 23. 调整uniform.js div.selector元素的大小
- 24. 元素大小调整后的事件
- 25. jQuery-UI可调整大小,调整子元素大小
- 26. 在窗口调整大小元素宽度调整大小jquery
- 27. 调整元素的大小会触发窗口的大小调整事件
- 28. 动态调整窗口大小为jquery的元素的大小
- 29. 固定元素的子元素的大小调整不正确
- 30. 可调整大小的html svg图像
哪个svg-editor? – eumiro 2010-10-21 07:12:49
NetBeans IDE 6.9 – 2010-10-21 07:15:56
使用此信息更新您的问题(我为您添加了标签) – eumiro 2010-10-21 07:17:53