如何使用javascript獲取rect標籤在svg中的邊界值

我在svg編輯器2.7版本中工作，在這裏我需要使用javascript在svg中選擇矩形的個別邊界值。如何使用javascript獲取rect標籤在svg中的邊界值

<svg width="9000" height="100" style="border:1px solid black"> 
<rect x="9000" y="0" height="100" width="200"></rect> 
</svg>

RECTANGLE ORIGINAL

我的矩形得到這個選擇tool.But我需要選擇長方形的各個角落如下圖像

RECTANGLE RESULT

在SVG編輯文件包含鼠標按下，mousemove和mouseup event.Here我使用GETBBOX()函數來獲得邊界val UE。但我需要分裂的邊界選擇像上面的圖像2. 這裏正在處理鼠標懸停事件獲取svg矩形的邊界。但我沒有達到它。請親引導我，或將我拖入正確的方式。

var mouseOver = function(evt) { 
     evt.preventDefault(); 
     var root_sctm = $('#svgcontent g')[0].getScreenCTM().inverse(); 
     var pt = svgedit.math.transformPoint(evt.pageX, evt.pageY, root_sctm), 
     mouse_x = pt.x * current_zoom, 
     mouse_y = pt.y * current_zoom; 
     var x = mouse_x/current_zoom, 
     y = mouse_y/current_zoom, 
     mouse_target = getMouseTarget(evt); 
     mouse_target =selectedElements[0]; 
    switch (current_mode) { 

      case 'rect': 
       var test =selectedElements[0].getBBox(); 
       console.log(test); 
      break; 
    }

來源

2014-09-22 VIVEK-MDU

如果您試圖確定您所在的矩形的哪一邊，那麼您可以使用'getBoundingClientRect（）'，然後使用這些座標來測試鼠標x，y是否接近四個邊中的任何一個。 – 2014-09-22 11:51:56

@ BigBadaboom ..我真的試圖找到矩形的邊緣，但我無法實現它..你能澄清更多的闡述？或者爲此提供一些其他解決方案？ – 2014-09-23 08:31:28

向我們展示您迄今爲止所嘗試的代碼，並且我們可以看到您出錯的位置。 – 2014-09-23 10:03:36

這是一個UI問題，而不是編碼。

上的mouseenter（）<rect>，介紹了使用4 <line>盒子，它覆蓋在<RECT>`。
附加mousedown()和mousemove()所有4行的事件監聽器，所以你可以實際點擊它們並拖動它們。
每當拖動一個邊時，更新<rect> x，y，寬度和高度值。
在mouseleave（）上，銷燬這4行並刪除事件偵聽器。

這跳過了計算哪條邊最靠近鼠標。

Snap SVG或RaphaelJS可用於實現此UI，爲您節省一些低級編碼。

來源

2014-09-24 08:14:02

感謝您的寶貴迴應@Alvin K.但我使用SVG編輯器2.7。我正在使用svg rect標記並對其進行了修改。但有一件事，我將rect標記轉換爲行標記意味着我面對任何其他基於svg編輯器的問題。我會通過使用此方法獲得矩形x，y，寬度和高度值getBBox（）與在svg編輯器2.7中獲取矩形的各個邊界值的任何方法相同嗎？ – 2014-09-24 09:58:19

svg-edit具有我不喜歡的功能，而我上面解釋了我自己的UI調整。 'getBBox（）'在瀏覽器之間給出不同的值，而不是svg-edit錯誤，但是它會擾亂精度。 – 2014-09-24 17:32:54

我希望我能很好地理解你的問題。

如果你想獲得一個元素的界限，你可以使用getBoundingClientRect()功能的JavaScript

例如：

document.getElementsByTagName('rect')[0].getBoundingClientRect() 
document.getElementsByTagName('rect')[1].getBoundingClientRect()

這會給你width，height，left，top，bottom和right值

如果你想選擇矩形的邊距，我認爲這是不可能的，你必須建立你的直接與svg-lines

來源

2014-09-22 09:18:41 Kosmog

嗨@ Kosmo ..我嘗試getBoundingClientRect（）函數也..所有其他方法來獲取矩形的邊緣。？不可能啊？ – 2014-09-22 09:50:46

我不這麼認爲 – Kosmog 2014-09-22 10:23:00

如何使用javascript獲取rect標籤在svg中的邊界值

回答

相關問題