2010-10-21 126 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