Mercurial > hg > digilib
changeset 1341:77b2a646767b
support Ellipse
author | hertzhaft |
---|---|
date | Sun, 01 Feb 2015 17:54:11 +0100 |
parents | 758036e8e8ed |
children | 6c169dca1ea7 |
files | webapp/src/main/webapp/jquery/jquery.digilib.measure.css webapp/src/main/webapp/jquery/jquery.digilib.measure.js webapp/src/main/webapp/jquery/jquery.digilib.vector.js |
diffstat | 3 files changed, 51 insertions(+), 10 deletions(-) [+] |
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/jquery.digilib.measure.css Sun Feb 01 16:03:29 2015 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.measure.css Sun Feb 01 17:54:11 2015 +0100 @@ -15,9 +15,16 @@ z-index: 20; } -div#dl-measure-toolbar input { +input#dl-measure-value1 { font-size: 100%; width: 8em; + text-align: right; +} + +input#dl-measure-value1:disabled { + color: black; + background-color: silver; + border: none; } span.dl-measure-label { @@ -27,6 +34,7 @@ span#dl-measure-shapeinfo { display: inline-block; width: 5em; + text-align: right; } span#dl-measure-value2 {
--- a/webapp/src/main/webapp/jquery/jquery.digilib.measure.js Sun Feb 01 16:03:29 2015 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.measure.js Sun Feb 01 17:54:11 2015 +0100 @@ -702,7 +702,7 @@ // color of selected objects selectColor : 'red', // implemented measuring shape types, for select widget - implementedShapes : ['Line', 'LineString', 'Rectangle', 'Polygon', 'Circle'], + implementedShapes : ['Line', 'LineString', 'Rectangle', 'Polygon', 'Circle', 'Ellipse'], // all measuring shape types shapeInfo : { Line : { name : 'line', display : 'length', }, @@ -711,6 +711,7 @@ Square : { name : 'square', display : 'length' }, Polygon : { name : 'polygon', display : 'area' }, Circle : { name : 'circle', display : 'radius' }, + Ellipse : { name : 'ellipse', display : 'area' }, Arch : { name : 'arch', display : 'radius' }, Ratio : { name : 'ratio', display : 'ratio' }, Grid : { name : 'linegrid', display : 'spacing' }, @@ -854,11 +855,14 @@ return geom.position(ar * c[0], c[1]); }; var coords = $.map(shape.geometry.coordinates, rectifyPoint); - var area = 0; - j = coords.length-1; + if (shape.geometry.type === 'Ellipse') { // ellipse formula + return Math.abs((coords[0].x-coords[1].x) * (coords[0].y-coords[1].y) * Math.PI); + } + var area = 0; // polygon area algorithm + j = coords.length-1; // set j to the last vertex for (i = 0; i < coords.length; i++) { area += (coords[j].x + coords[i].x) * (coords[j].y - coords[i].y); - j = i; //j is previous vertex to i + j = i; // set j to the current vertex, i increments } return Math.abs(area/2); }; @@ -869,7 +873,6 @@ var val = parseFloat(widgets.value1.val()); var fac = val / data.lastMeasuredValue; data.measureFactor = fac; - setActiveShapeType(data, 'Line'); updateCalculation(data); }; @@ -887,7 +890,6 @@ widgets.shape.val(type); widgets.value1.val(fn.cropFloatStr(mRound(val))); widgets.value2.text(fn.cropFloatStr(mRound(result))); - widgets.info.text(display); }; // recalculate with new units @@ -929,6 +931,16 @@ }; }; + // dusable the calibration acccording to shapeType + var setInputState = function(data) { + var widgets = data.measureWidgets; + var type = getActiveShapeType(data); + var display = data.settings.shapeInfo[type].display; + var state = display !== 'length' && display !== 'radius'; + widgets.value1.prop('disabled', state); + widgets.info.text(display); + }; + // return the currently selected shape type var getActiveShapeType = function(data) { return data.settings.activeShapeType; @@ -937,11 +949,13 @@ // set the currently selected shape type var changeShapeType = function(data) { data.settings.activeShapeType = data.measureWidgets.shape.val(); + setInputState(data); }; // set the currently selected shape type var setActiveShapeType = function(data, type) { data.settings.activeShapeType = type; + setInputState(data); }; // return line color chosen by user
--- a/webapp/src/main/webapp/jquery/jquery.digilib.vector.js Sun Feb 01 16:03:29 2015 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.vector.js Sun Feb 01 17:54:11 2015 +0100 @@ -56,7 +56,7 @@ // SVG namespace var svgNS = 'http://www.w3.org/2000/svg'; // implemented shape types - var supportedShapeTypes = ['Line', 'Rectangle', 'LineString', 'Polygon', 'Circle']; + var supportedShapeTypes = ['Line', 'Rectangle', 'LineString', 'Polygon', 'Circle', 'Ellipse']; var defaults = { // is vector active? @@ -426,6 +426,17 @@ 'cx': p1.x, 'cy': p1.y, 'r' : p1.distance(p2), 'fill' : 'none', 'stroke': stroke, 'stroke-width': strokeWidth, 'style': style})); + } else if (gt === 'Ellipse') { + /* + * Ellipse + */ + $elem = $(svgElement('ellipse', { + 'id': id, 'class': cssclass, + 'cx': p1.x, 'cy': p1.y, + 'rx' : Math.abs(p1.x - p2.x), + 'ry' : Math.abs(p1.y - p2.y), + 'fill' : 'none', 'stroke': stroke, 'stroke-width': strokeWidth, + 'style': style})); } else { console.error("Unable to render shape type:", gt); return; @@ -480,7 +491,7 @@ // cancel if not left-click if (evt.which != 1) return; pt0 = geom.position(evt); - if (shapeType === 'Rectangle' || shapeType === 'Circle') { + if ($.inArray(shapeType, ['Rectangle', 'Circle', 'Ellipse']) > -1) { // 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])); @@ -523,6 +534,14 @@ } else if (vtx == 1) { $shape.attr({'r': pt.distance(pt1)}); } + } else if (shapeType === 'Ellipse') { + if (vtx == 0) { + $shape.attr({'cx': pt.x, 'cy': pt.y, + 'rx': Math.abs(pt.x - pt2.x), + 'ry': Math.abs(pt.y - pt2.y)}); + } else if (vtx == 1) { + $shape.attr({'rx': Math.abs(pt.x - pt1.x), 'ry': Math.abs(pt.y - pt1.y)}); + } } // update shape object and trigger drag event if (isSupported(shapeType)) { @@ -570,7 +589,7 @@ * @param shapeType shapeType to test */ var isSupported = function(shapeType) { - return supportedShapeTypes.indexOf(shapeType) > -1; + return $.inArray(shapeType, supportedShapeTypes) > -1; }; /**