jquery - How to get boundary value of rect tag in svg using javascript -
i working in svg editor 2.7 version,here need 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>
my rectangle getting selected tool.but need select individual corner of rectangle below images
in svg edit files contain mousedown,mousemove , mouseup event.here used getbbox()
function boundary value. need split boundary selection above image 2. here working on mouseover event getting boundary of rectangle in svg. didn't achieve it. kindly guide me or drag me 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; }
it ui issue, not coding.
- on mouseenter()
<rect>
, outline box using 4<line>
, overlay on <rect>`. - attach
mousedown()
,mousemove()
event listener 4 lines, can click on them , drag them around. - update
<rect>
x, y, width , height values whenever 1 edge dragged. - on mouseleave(), destroy these 4 lines , remove event listener.
this skips calculation of edge nearest mouse.
snap svg or raphaeljs can used implement ui, saves low level coding.
Comments
Post a Comment