Drawing an SVG Selection Box with Batik -
i notice on many svg builder tools each element can resized , rotated. shown below
what common way implement whenever element whenever clicked, bordering line appear long side small rectangles used resizing rotating ?
are these objects "hidden" default , visible during mouse click ? or have drawn on every mousedown , removed on every mouseup ?
are these objects "hidden" default , visible during mouse click ?
no have draw elements yourself.
all tools see floating around have code somewhere create rectangle see on top of selected item - rectangle called visible bounding box of element - in modern browser fetched using svg getbbox() method. more info on method here.
the returned bbox gives information need(x,y,width,height) draw selection rectangle minus colors , strokes
how svg tools work in regards this:
typically have canvas on work (might div, might svg rectangle whatever) - nothing html5 canvas here - note
- you draw selection rectangle on clicking element
- you remove selection rectangle on clicking on canvas(since mean didn't click on element)
here snippet i've made allows multi-selection holding 'shift'.
var svgns = "http://www.w3.org/2000/svg"; //if click on elem class "element" getbbox of elem , draw selection rect. $(".element").click(function() { var bbox = $(this)[0].getbbox(); //if shift key down allow multiselection if (shiftkeydown) { drawselectionrect(bbox.x, bbox.y, bbox.width, bbox.height); } else { $(".selectionrect").remove(); drawselectionrect(bbox.x, bbox.y, bbox.width, bbox.height); } }); //if click on svgcanvas remove selection rectangles $("#svgcanvas").click(function() { $(".selectionrect").remove(); }); //function draws selection box function drawselectionrect(x, y, width, height) { var rect = document.createelementns(svgns, 'rect'); rect.setattributens(null, 'x', x); rect.setattributens(null, 'y', y); rect.setattributens(null, 'height', height); rect.setattributens(null, 'width', width); rect.setattributens(null, 'stroke-width', '2px'); rect.setattributens(null, 'stroke', 'red'); rect.setattributens(null, 'fill', 'none'); rect.setattributens(null, 'stroke-dasharray', '5,1'); rect.setattributens(null, 'class', 'selectionrect'); document.getelementbyid('workarea').appendchild(rect); } //determine if shift-key being pressed var shiftkeydown = false; $(document).keydown(function(e) { if (e.keycode == 16) { shiftkeydown = true; } }); $(document).keyup(function(e) { shiftkeydown = false; });@import url(https://fonts.googleapis.com/css?family=lato); * { font-family: 'lato', sans-serif; color: #555; } h5 { margin: 2px; } #container { position: absolute; margin: 5% auto; width: 90%; height: 320px; background-color: #eee; } .element { cursor: pointer; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <h2>click on element draw it's bbox</h2> <h5>hold down "shift" allow multi-selection<h5> <h5>press anywhere else on canvas remove selections<h5> <div id="container"> <svg id="workarea" width="100%" height="100%"> <rect id="svgcanvas" width="100%" height="100%" x="0" y="0" style="fill:transparent"/> <rect class="element" width="100" height="100" x="50" y="100" style="fill:#009688;" /> <rect class="element" width="75" height="100" x="250" y="150" style="fill:#009688;" /> </svg> </div>