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;
    }
Jothi Kannan
  • 3,320
  • 6
  • 40
  • 77
VIVEK-MDU
  • 2,483
  • 3
  • 36
  • 63
  • If you are trying to determine which edge of the rectangle you are near, then you can use `getBoundingClientRect()` and then use those coords to test whether the mouse x,y is close to any of the four edges. – Paul LeBeau Sep 22 '14 at 11:51
  • @BigBadaboom..I really tried to find edge of the rectangle but i can't achieve it..Can you please clarify much more elaboration? or else provide some other solution for this? – VIVEK-MDU Sep 23 '14 at 08:31
  • Show us the code for what you have tried so far, and we can see where you are going wrong. – Paul LeBeau Sep 23 '14 at 10:03
  • @BigBadaboom.. i working in that demo coding: http://pastebin.com/1vGNeVuC, – VIVEK-MDU Sep 23 '14 at 10:43
  • HI @BigBadaboom..are u analysis about my code...? Note: I working on svg editor2.7 https://code.google.com/p/svg-edit/... – VIVEK-MDU Sep 23 '14 at 13:57
  • 1
    It looks like you just copied the above code to pastebin. That's not what I meant. I meant something like a demo in jsfiddle.net showing some "working" code. – Paul LeBeau Sep 23 '14 at 16:16
  • @BigBadaboom... Here i worked in svg editor js file.it seems to know how to create demo in jsfiddle.net.. i provide my working demo website url for your convenience..http://www.floordraw.osiztechnologies.com/floordraw/tool.. Let choose third tab button and draw rectangle section. – VIVEK-MDU Sep 24 '14 at 05:00

2 Answers2

1

I hope I understood well what you asked.

If you want to get boundaries of an element you can use getBoundingClientRect() function for javascript

ex: 

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

This will give you width, height, left, top, bottom and right values

If you want to select margins of the rect, I think that's not possible and you have to build your rect with svg-lines

Cosmin
  • 2,184
  • 21
  • 38
  • Hi @Kosmo..I try getBoundingClientRect() function also..any other method to get edges of rectangle.?it not possible ah? – VIVEK-MDU Sep 22 '14 at 09:50
1

It is an UI issue, not coding.

  1. On mouseenter() <rect>, outline the box using 4 <line> and overlay it over the <rect>`.
  2. Attach mousedown() and mousemove() event listener to all 4 lines, so you can actually click on them and drag them around.
  3. Update the <rect> x, y, width AND height values whenever one edge is dragged.
  4. On mouseleave(), destroy these 4 lines and remove the event listener.

This skips the calculation of which edge is nearest to mouse.

Snap SVG or RaphaelJS can be used to implement this UI, saves you some low level coding.

Alvin K.
  • 4,329
  • 20
  • 25
  • Thank your valuable response @Alvin K. but i using SVG EDITOR 2.7.I am using to svg rect tag and modified it.but one thing, i convert rect tag into line tag meant i face any another problem based on svg editor.I would get rectangle x,y,width and height value by using this method getBBox() same like any method that get individual boundary values for rectangle in svg editor 2.7? – VIVEK-MDU Sep 24 '14 at 09:58
  • svg-edit has features that I didn't like and my own UI tweak is explained above. Also `getBBox()` gives different values between browsers, not svg-edit fault but it messes up the precision. – Alvin K. Sep 24 '14 at 17:32