如何使用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中的边界值

回答

相关问题