Commit 6ec71a8f authored by hertzhaft's avatar hertzhaft

support Ellipse

parent 525f3102
......@@ -15,9 +15,16 @@ div#dl-measure-toolbar {
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-label {
span#dl-measure-shapeinfo {
display: inline-block;
width: 5em;
text-align: right;
}
span#dl-measure-value2 {
......
......@@ -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
......
......@@ -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;
};
/**
......
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