我正在使用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