Commit 6ec71a8f authored by hertzhaft's avatar hertzhaft

support Ellipse

parent 525f3102
...@@ -15,9 +15,16 @@ div#dl-measure-toolbar { ...@@ -15,9 +15,16 @@ div#dl-measure-toolbar {
z-index: 20; z-index: 20;
} }
div#dl-measure-toolbar input { input#dl-measure-value1 {
font-size: 100%; font-size: 100%;
width: 8em; width: 8em;
text-align: right;
}
input#dl-measure-value1:disabled {
color: black;
background-color: silver;
border: none;
} }
span.dl-measure-label { span.dl-measure-label {
...@@ -27,6 +34,7 @@ span.dl-measure-label { ...@@ -27,6 +34,7 @@ span.dl-measure-label {
span#dl-measure-shapeinfo { span#dl-measure-shapeinfo {
display: inline-block; display: inline-block;
width: 5em; width: 5em;
text-align: right;
} }
span#dl-measure-value2 { span#dl-measure-value2 {
......
...@@ -702,7 +702,7 @@ ...@@ -702,7 +702,7 @@
// color of selected objects // color of selected objects
selectColor : 'red', selectColor : 'red',
// implemented measuring shape types, for select widget // implemented measuring shape types, for select widget
implementedShapes : ['Line', 'LineString', 'Rectangle', 'Polygon', 'Circle'], implementedShapes : ['Line', 'LineString', 'Rectangle', 'Polygon', 'Circle', 'Ellipse'],
// all measuring shape types // all measuring shape types
shapeInfo : { shapeInfo : {
Line : { name : 'line', display : 'length', }, Line : { name : 'line', display : 'length', },
...@@ -711,6 +711,7 @@ ...@@ -711,6 +711,7 @@
Square : { name : 'square', display : 'length' }, Square : { name : 'square', display : 'length' },
Polygon : { name : 'polygon', display : 'area' }, Polygon : { name : 'polygon', display : 'area' },
Circle : { name : 'circle', display : 'radius' }, Circle : { name : 'circle', display : 'radius' },
Ellipse : { name : 'ellipse', display : 'area' },
Arch : { name : 'arch', display : 'radius' }, Arch : { name : 'arch', display : 'radius' },
Ratio : { name : 'ratio', display : 'ratio' }, Ratio : { name : 'ratio', display : 'ratio' },
Grid : { name : 'linegrid', display : 'spacing' }, Grid : { name : 'linegrid', display : 'spacing' },
...@@ -854,11 +855,14 @@ ...@@ -854,11 +855,14 @@
return geom.position(ar * c[0], c[1]); return geom.position(ar * c[0], c[1]);
}; };
var coords = $.map(shape.geometry.coordinates, rectifyPoint); var coords = $.map(shape.geometry.coordinates, rectifyPoint);
var area = 0; if (shape.geometry.type === 'Ellipse') { // ellipse formula
j = coords.length-1; 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++) { for (i = 0; i < coords.length; i++) {
area += (coords[j].x + coords[i].x) * (coords[j].y - coords[i].y); 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); return Math.abs(area/2);
}; };
...@@ -869,7 +873,6 @@ ...@@ -869,7 +873,6 @@
var val = parseFloat(widgets.value1.val()); var val = parseFloat(widgets.value1.val());
var fac = val / data.lastMeasuredValue; var fac = val / data.lastMeasuredValue;
data.measureFactor = fac; data.measureFactor = fac;
setActiveShapeType(data, 'Line');
updateCalculation(data); updateCalculation(data);
}; };
...@@ -887,7 +890,6 @@ ...@@ -887,7 +890,6 @@
widgets.shape.val(type); widgets.shape.val(type);
widgets.value1.val(fn.cropFloatStr(mRound(val))); widgets.value1.val(fn.cropFloatStr(mRound(val)));
widgets.value2.text(fn.cropFloatStr(mRound(result))); widgets.value2.text(fn.cropFloatStr(mRound(result)));
widgets.info.text(display);
}; };
// recalculate with new units // recalculate with new units
...@@ -929,6 +931,16 @@ ...@@ -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 // return the currently selected shape type
var getActiveShapeType = function(data) { var getActiveShapeType = function(data) {
return data.settings.activeShapeType; return data.settings.activeShapeType;
...@@ -937,11 +949,13 @@ ...@@ -937,11 +949,13 @@
// set the currently selected shape type // set the currently selected shape type
var changeShapeType = function(data) { var changeShapeType = function(data) {
data.settings.activeShapeType = data.measureWidgets.shape.val(); data.settings.activeShapeType = data.measureWidgets.shape.val();
setInputState(data);
}; };
// set the currently selected shape type // set the currently selected shape type
var setActiveShapeType = function(data, type) { var setActiveShapeType = function(data, type) {
data.settings.activeShapeType = type; data.settings.activeShapeType = type;
setInputState(data);
}; };
// return line color chosen by user // return line color chosen by user
......
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
// SVG namespace // SVG namespace
var svgNS = 'http://www.w3.org/2000/svg'; var svgNS = 'http://www.w3.org/2000/svg';
// implemented shape types // implemented shape types
var supportedShapeTypes = ['Line', 'Rectangle', 'LineString', 'Polygon', 'Circle']; var supportedShapeTypes = ['Line', 'Rectangle', 'LineString', 'Polygon', 'Circle', 'Ellipse'];
var defaults = { var defaults = {
// is vector active? // is vector active?
...@@ -426,6 +426,17 @@ ...@@ -426,6 +426,17 @@
'cx': p1.x, 'cy': p1.y, 'r' : p1.distance(p2), 'cx': p1.x, 'cy': p1.y, 'r' : p1.distance(p2),
'fill' : 'none', 'stroke': stroke, 'stroke-width': strokeWidth, 'fill' : 'none', 'stroke': stroke, 'stroke-width': strokeWidth,
'style': style})); '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 { } else {
console.error("Unable to render shape type:", gt); console.error("Unable to render shape type:", gt);
return; return;
...@@ -480,7 +491,7 @@ ...@@ -480,7 +491,7 @@
// cancel if not left-click // cancel if not left-click
if (evt.which != 1) return; if (evt.which != 1) return;
pt0 = geom.position(evt); pt0 = geom.position(evt);
if (shapeType === 'Rectangle' || shapeType === 'Circle') { if ($.inArray(shapeType, ['Rectangle', 'Circle', 'Ellipse']) > -1) {
// save screen points of coordinates // save screen points of coordinates
pt1 = data.imgTrafo.transform(geom.position(shape.geometry.coordinates[0])); pt1 = data.imgTrafo.transform(geom.position(shape.geometry.coordinates[0]));
pt2 = data.imgTrafo.transform(geom.position(shape.geometry.coordinates[1])); pt2 = data.imgTrafo.transform(geom.position(shape.geometry.coordinates[1]));
...@@ -523,6 +534,14 @@ ...@@ -523,6 +534,14 @@
} else if (vtx == 1) { } else if (vtx == 1) {
$shape.attr({'r': pt.distance(pt1)}); $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 // update shape object and trigger drag event
if (isSupported(shapeType)) { if (isSupported(shapeType)) {
...@@ -570,7 +589,7 @@ ...@@ -570,7 +589,7 @@
* @param shapeType shapeType to test * @param shapeType shapeType to test
*/ */
var isSupported = function(shapeType) { var isSupported = function(shapeType) {
return supportedShapeTypes.indexOf(shapeType) > -1; return $.inArray(shapeType, supportedShapeTypes) > -1;
}; };
/** /**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment