Mercurial > hg > digilib
changeset 1338:3da1ca0a33d9
support Circle shape
author | hertzhaft |
---|---|
date | Sun, 01 Feb 2015 14:58:22 +0100 |
parents | 1e9e86dbaa1e |
children | 8a0cdf624dc2 |
files | webapp/src/main/webapp/jquery/jquery.digilib.measure.js webapp/src/main/webapp/jquery/jquery.digilib.vector.js |
diffstat | 2 files changed, 57 insertions(+), 13 deletions(-) [+] |
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/jquery.digilib.measure.js Sun Feb 01 13:07:36 2015 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.measure.js Sun Feb 01 14:58:22 2015 +0100 @@ -702,7 +702,7 @@ // color of selected objects selectColor : 'red', // implemented measuring shape types, for select widget - implementedShapes : ['Line', 'LineString', 'Rectangle', 'Polygon'], + implementedShapes : ['Line', 'LineString', 'Rectangle', 'Polygon', 'Circle'], // all measuring shape types shapeInfo : { Line : { name : 'line', display : 'length', }, @@ -745,7 +745,7 @@ // draw rectangles from the diagonal and one point drawFromDiagonal : false, // draw circles from center - drawFromCenter : false, + drawFromCenter : true, // snap to endpoints snapEndPoints : false, // snap to mid points of lines @@ -923,7 +923,8 @@ properties : { stroke : getSelectedStroke(data), editable : true, - cssclass : 'dl-measure-item' + cssclass : 'dl-measure-item', + center : data.settings.drawFromCenter } }; };
--- a/webapp/src/main/webapp/jquery/jquery.digilib.vector.js Sun Feb 01 13:07:36 2015 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.vector.js Sun Feb 01 14:58:22 2015 +0100 @@ -28,7 +28,7 @@ * * Shapes are objects with "geometry" and "properties" members. * geometry is an object with "type" and "coordinates" members. - * Currently supported types: "Point", "Line", "LineString", "Rectangle", "Polygon". + * Currently supported types: "Point", "Line", "LineString", "Rectangle", "Polygon", "Circle". * coordinates is a list of pairs of relative coordinates. * properties are the SVG properties "stroke", "stroke-width", "fill" and other properties. * A property 'editable':true will display drag-handles to change the shape. @@ -55,7 +55,9 @@ var digilib = null; // SVG namespace var svgNS = 'http://www.w3.org/2000/svg'; - + // implemented shape types + var supportedShapeTypes = ['Line', 'Rectangle', 'LineString', 'Polygon', 'Circle']; + var defaults = { // is vector active? 'isVectorActive' : true, @@ -474,6 +476,34 @@ } $svg.append($vertexElems); } + } else if (gt === 'Circle') { + /* + * Circle + */ + var p1 = trafo.transform(geom.position(coords[0])); + var p2 = trafo.transform(geom.position(coords[1])); + var $elem = $(svgElement('circle', { + 'id': id, 'class': cssclass, + 'cx': p1.x, 'cy': p1.y, 'r' : p1.distance(p2), + 'fill' : 'none', 'stroke': stroke, 'stroke-width': strokeWidth, + 'style': style})); + shape.$elem = $elem; + $svg.append($elem); + if (props.editable) { + var $e1 = $(svgElement('rect', { + 'x': p1.x-hs/2, 'y': p1.y-hs/2, 'width': hs, 'height': hs, + 'stroke': 'darkgrey', 'stroke-width': 1, 'fill': 'none', + 'class': css+'svg-handle', 'style': 'pointer-events:all'})); + var $e2 = $(svgElement('rect', { + 'x': p2.x-hs/2, 'y': p2.y-hs/2, 'width': hs, 'height': hs, + 'stroke': 'darkgrey', 'stroke-width': 1, 'fill': 'none', + 'class': css+'svg-handle', 'style': 'pointer-events:all'})); + var $vertexElems = [$e1, $e2]; + shape.$vertexElems = $vertexElems; + $svg.append($vertexElems); + $e1.one("mousedown.dlVertexDrag", getVertexDragHandler(data, shape, 0)); + $e2.one("mousedown.dlVertexDrag", getVertexDragHandler(data, shape, 1)); + } } else { console.error("Unable to render shape type:", gt); return; @@ -525,8 +555,8 @@ // cancel if not left-click if (evt.which != 1) return; pt0 = geom.position(evt); - if (shapeType === 'Rectangle') { - // save rectangle screen endpoints + if (shapeType === 'Rectangle' || shapeType === 'Circle') { + // save screen points of coordinates pt1 = data.imgTrafo.transform(geom.position(shape.geometry.coordinates[0])); pt2 = data.imgTrafo.transform(geom.position(shape.geometry.coordinates[1])); } @@ -562,10 +592,15 @@ ps[vtx] = pt.x + ',' + pt.y; points = ps.join(' '); $shape.attr('points', points); + } else if (shapeType === 'Circle') { + if (vtx == 0) { + $shape.attr({'cx': pt.x, 'cy': pt.y, 'r' : pt.distance(pt2)}); + } else if (vtx == 1) { + $shape.attr({'r': pt.distance(pt1)}); + } } // update shape object and trigger drag event - if (shapeType === 'Line' || shapeType === 'Rectangle' || - shapeType === 'Polygon' || shapeType === 'LineString') { + if (isSupported(shapeType)) { var p = data.imgTrafo.invtransform(pt); shape.geometry.coordinates[vtx] = [p.x, p.y]; $(data).trigger('dragShape', shape); @@ -582,8 +617,7 @@ pt.clipTo(imgRect); var p1 = data.imgTrafo.invtransform(pt); // update shape object - if (shapeType === 'Line' || shapeType === 'Rectangle' || - shapeType === 'Polygon' || shapeType === 'LineString') { + if (isSupported(shapeType)) { shape.geometry.coordinates[vtx] = [p1.x, p1.y]; } // remove move/end handler @@ -604,6 +638,16 @@ return dragStart; }; + + /** + * returns true if shapeType is supported + * + * @param shapeType shapeType to test + */ + var isSupported = function(shapeType) { + return supportedShapeTypes.indexOf(shapeType) > -1; + }; + /** * define a shape by click and drag. * @@ -635,8 +679,7 @@ var vtxidx = 1; if (shapeType === 'Point') { shape.geometry.coordinates = [[p.x, p.y]]; - } else if (shapeType === 'Line' || shapeType === 'Rectangle' || - shapeType === 'LineString' || shapeType === 'Polygon') { + } else if (isSupported(shapeType)) { shape.geometry.coordinates = [[p.x, p.y], [p.x, p.y]]; } else { console.error("defineShape: unsupported shape type: "+shapeType);