0

I am working in svg editor 2.7 version,Here i need to selected individual boundary value of rectangle in svg using javascript.

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

RECTANGLE ORIGINAL

My rectangle getting this selected tool.But i need to select individual corner of rectangle as below images

RECTANGLE RESULT

In svg edit files contain mousedown,mousemove and mouseup event.Here i used GETBBOX() function to get boundary value. but i need to split boundary for selection like above image 2. Here am working on mouseover event for getting boundary of rectangle in svg. but i didn't achieve it. kindly guide me for this or drag me into right way. 

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;
    }
4

2 回答 2

1

这是一个 UI 问题，而不是编码问题。

  1. 在 mouseenter()<rect>上，使用 4 勾勒框<line>并将其覆盖在 <rect>` 上。
  2. 将事件监听器附加mousedown()到mousemove()所有 4 行，因此您实际上可以单击它们并拖动它们。
  3. <rect>每当拖动一条边时，更新x、y、宽度和高度值。
  4. 在 mouseleave() 上，销毁这 4 行并删除事件侦听器。

这将跳过计算哪条边距鼠标最近。

Snap SVG 或 RaphaelJS 可用于实现此 UI，为您节省一些低级编码。

于 2014-09-24T08:14:02.567 回答
1

我希望我能很好地理解你的问题。

如果要获取元素的边界，可以使用getBoundingClientRect() javascript 函数

前任：

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

这将为您提供 width, height, left, top,bottom和right值

如果你想选择矩形的边距，我认为这是不可能的，你必须用svg-lines

于 2014-09-22T09:18:41.130 回答