Commit 07a4199a authored by hertzhaft's avatar hertzhaft

support Circle shape

parent 3508e165
...@@ -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'], implementedShapes : ['Line', 'LineString', 'Rectangle', 'Polygon', 'Circle'],
// all measuring shape types // all measuring shape types
shapeInfo : { shapeInfo : {
Line : { name : 'line', display : 'length', }, Line : { name : 'line', display : 'length', },
...@@ -745,7 +745,7 @@ ...@@ -745,7 +745,7 @@
// draw rectangles from the diagonal and one point // draw rectangles from the diagonal and one point
drawFromDiagonal : false, drawFromDiagonal : false,
// draw circles from center // draw circles from center
drawFromCenter : false, drawFromCenter : true,
// snap to endpoints // snap to endpoints
snapEndPoints : false, snapEndPoints : false,
// snap to mid points of lines // snap to mid points of lines
...@@ -923,7 +923,8 @@ ...@@ -923,7 +923,8 @@
properties : { properties : {
stroke : getSelectedStroke(data), stroke : getSelectedStroke(data),
editable : true, editable : true,
cssclass : 'dl-measure-item' cssclass : 'dl-measure-item',
center : data.settings.drawFromCenter
} }
}; };
}; };
......
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
* *
* Shapes are objects with "geometry" and "properties" members. * Shapes are objects with "geometry" and "properties" members.
* geometry is an object with "type" and "coordinates" 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. * coordinates is a list of pairs of relative coordinates.
* properties are the SVG properties "stroke", "stroke-width", "fill" and other properties. * properties are the SVG properties "stroke", "stroke-width", "fill" and other properties.
* A property 'editable':true will display drag-handles to change the shape. * A property 'editable':true will display drag-handles to change the shape.
...@@ -55,7 +55,9 @@ ...@@ -55,7 +55,9 @@
var digilib = null; var digilib = null;
// SVG namespace // SVG namespace
var svgNS = 'http://www.w3.org/2000/svg'; var svgNS = 'http://www.w3.org/2000/svg';
// implemented shape types
var supportedShapeTypes = ['Line', 'Rectangle', 'LineString', 'Polygon', 'Circle'];
var defaults = { var defaults = {
// is vector active? // is vector active?
'isVectorActive' : true, 'isVectorActive' : true,
...@@ -474,6 +476,34 @@ ...@@ -474,6 +476,34 @@
} }
$svg.append($vertexElems); $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 { } else {
console.error("Unable to render shape type:", gt); console.error("Unable to render shape type:", gt);
return; return;
...@@ -525,8 +555,8 @@ ...@@ -525,8 +555,8 @@
// 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') { if (shapeType === 'Rectangle' || shapeType === 'Circle') {
// save rectangle screen endpoints // 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]));
} }
...@@ -562,10 +592,15 @@ ...@@ -562,10 +592,15 @@
ps[vtx] = pt.x + ',' + pt.y; ps[vtx] = pt.x + ',' + pt.y;
points = ps.join(' '); points = ps.join(' ');
$shape.attr('points', points); $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 // update shape object and trigger drag event
if (shapeType === 'Line' || shapeType === 'Rectangle' || if (isSupported(shapeType)) {
shapeType === 'Polygon' || shapeType === 'LineString') {
var p = data.imgTrafo.invtransform(pt); var p = data.imgTrafo.invtransform(pt);
shape.geometry.coordinates[vtx] = [p.x, p.y]; shape.geometry.coordinates[vtx] = [p.x, p.y];
$(data).trigger('dragShape', shape); $(data).trigger('dragShape', shape);
...@@ -582,8 +617,7 @@ ...@@ -582,8 +617,7 @@
pt.clipTo(imgRect); pt.clipTo(imgRect);
var p1 = data.imgTrafo.invtransform(pt); var p1 = data.imgTrafo.invtransform(pt);
// update shape object // update shape object
if (shapeType === 'Line' || shapeType === 'Rectangle' || if (isSupported(shapeType)) {
shapeType === 'Polygon' || shapeType === 'LineString') {
shape.geometry.coordinates[vtx] = [p1.x, p1.y]; shape.geometry.coordinates[vtx] = [p1.x, p1.y];
} }
// remove move/end handler // remove move/end handler
...@@ -604,6 +638,16 @@ ...@@ -604,6 +638,16 @@
return dragStart; 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. * define a shape by click and drag.
* *
...@@ -635,8 +679,7 @@ ...@@ -635,8 +679,7 @@
var vtxidx = 1; var vtxidx = 1;
if (shapeType === 'Point') { if (shapeType === 'Point') {
shape.geometry.coordinates = [[p.x, p.y]]; shape.geometry.coordinates = [[p.x, p.y]];
} else if (shapeType === 'Line' || shapeType === 'Rectangle' || } else if (isSupported(shapeType)) {
shapeType === 'LineString' || shapeType === 'Polygon') {
shape.geometry.coordinates = [[p.x, p.y], [p.x, p.y]]; shape.geometry.coordinates = [[p.x, p.y], [p.x, p.y]];
} else { } else {
console.error("defineShape: unsupported shape type: "+shapeType); console.error("defineShape: unsupported shape type: "+shapeType);
......
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