Mercurial > hg > digilib
changeset 1370:eaa128e7cb14
more line geometry functions; steps towards oval construction
author | hertzhaft |
---|---|
date | Mon, 23 Feb 2015 01:01:35 +0100 |
parents | 7bf408354341 |
children | a71ca1a6251c |
files | webapp/src/main/webapp/jquery/jquery.digilib.geometry.js webapp/src/main/webapp/jquery/jquery.digilib.measure.js |
diffstat | 2 files changed, 116 insertions(+), 40 deletions(-) [+] |
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/jquery.digilib.geometry.js Sun Feb 22 13:54:28 2015 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.geometry.js Mon Feb 23 01:01:35 2015 +0100 @@ -214,16 +214,16 @@ */ var line = function(p, q) { var that = { // definition point - x: p.x, - y: p.y + x : p.x, + y : p.y }; - if (q.x != null) { + if (q.x != null) { // second point that.dx = q.x - that.x; that.dy = q.y - that.y; - } else if ($.isArray(q)) { - that.dx = q[0]+0; - that.dy = q[1]+0; - } else if (q === 0) { + } else if ($.isArray(q)) { // vector + that.dx = q[0]; + that.dy = q[1]; + } else if (q === 0) { // slope that.dx = 0; that.dy = 1; } else if (q === Infinity) { @@ -238,45 +238,108 @@ } else { that.dx = 1; that.dy = 1; - } + } + // get/set origin of line + that.origin = function(p) { + if (p == null) { + return position(this.x, this.y); + } + this.x = p.x; + this.y = p.y; + return this; + }; + // get/set vector + that.vector = function(vector) { + if (vector == null) { + return [this.dx, this.dy]; + } + this.dx = vector[0]; + this.dy = vector[1]; + return this; + }; + // vector + that.invertedVector = function() { + return [-this.dx, -this.dy]; + }; + // perpendicular vector + that.perpendicularVector = function(clockwise) { + return clockwise ? [-this.dy, this.dx] : [this.dy, -this.dx]; + }; + // get/set vector length + that.length = function(length) { + var dist = Math.sqrt(this.dx * this.dx + this.dy * this.dy); + if (length == null) { + return dist; + } + var ratio = length/dist; + this.dx *= ratio; + this.dy *= ratio + return this; + }; // slope that.slope = function() { return this.dx/this.dy; - }; - + }; // return a copy that.copy = function() { - return line(position(this.x, this.y), [this.dx, this.dy]); - }; + return line(position(this.x, this.y), this.vector()); + }; + // invert direction + that.invert = function() { + this.vector(this.invertedVector); + return this; + }; // return a parallel through a point that.parallel = function(p) { - return line(position(p.x, p.y), [this.dx, this.dy]); - }; - // return perpendicular line, with optional directon - that.perpendicular = function(clockwise) { - var delta = clockwise ? [-this.dy, this.dx] : [this.dy, -this.dx]; - return line(position(this.x, this.y), delta) - }; + return line(position(p.x, p.y), this.vector()); + }; + // return perpendicular line, with optional directon or other point + that.perpendicular = function(p, clockwise) { + var point = (p == null || p.x == null) + ? position(this.x, this.y) : p; + return line(point, this.perpendicularVector(clockwise)); + }; + // return perpendicular point on line + that.perpendicularPoint = function(p) { + return this.intersection(this.perpendicular(p)); + }; + // return perpendicular line from point + that.perpendicularLine = function(p) { + return line(p, this.perpendicularPoint(p)); + }; + // return point in mirrored position (with regard to this line) + that.mirrorPoint = function(p) { + var line = this.perpendicularLine(p); + return line.add(line.vector()); + }; // return a point (position) by adding a vector to the definition point - that.add = function(q) { - return $.isArray(q) - ? position(this.x + q[0], this.y + q[1]) - : position(this.x + q.x, this.y + q.y); - }; - // point on line, moved from origin by factor + that.add = function(vector) { + return $.isArray(vector) + ? position(this.x + vector[0], this.y + vector[1]) + : position(this.x + vector.x, this.y + vector.y); + }; + // point on the line, moved from origin by factor that.point = function(factor) { - return position(this.x + factor*this.dx, this.y + factor*this.dy) - }; + if (factor == null) { factor = 1; } + var vector = [factor*this.dx, factor*this.dy]; + return this.add(vector); + }; + // factor of point (assuming it is on the line) + that.factor = function(p) { + return (dx === 0) + ? (p.y - this.y)/this.dy + : (p.x - this.x)/this.dx; + }; // intersection point with other line that.intersection = function(line) { - var det = this.dy*line.dx - this.dx*line.dy - if (det === 0) { // parallel + var denominator = this.dy*line.dx - this.dx*line.dy + if (denominator === 0) { // parallel return null; } - var c = this.dx*(line.y - this. y) + this.dy*(this.x - line.x); - return line.point(c/det); + var num = this.dx*(line.y - this.y) + this.dy*(this.x - line.x); + return line.point(num/denominator); + }; + return that; }; - return that; - }; /* * Rectangle class
--- a/webapp/src/main/webapp/jquery/jquery.digilib.measure.js Sun Feb 22 13:54:28 2015 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.measure.js Mon Feb 23 01:01:35 2015 +0100 @@ -1181,8 +1181,8 @@ return $s; }; factory['Rect'] = function (shape) { + var trafo = data.imgTrafo; var $s = factory['Polygon'](shape); - var trafo = data.imgTrafo; var props = shape.properties; props.maxvtx = 3; $s.place = function () { @@ -1196,27 +1196,40 @@ var p2 = p3.copy().add(d); p[2] = p2.mid(p3); // handle position shape.geometry.coordinates[2] = trafo.invtransform(p[2]).toArray(); + props.pos = [p3, p2]; // save other points } this.attr({points: [p[0], p[1], p2, p3].join(" ")}); }; return $s; }; factory['Oval'] = function (shape) { + var trafo = data.imgTrafo; var $s = factory['Rect'](shape); var place = $s.place; var props = shape.properties; props.maxvtx = 4; var $g = $(fn.svgElement('g', {'id': shape.id + '-oval'})); - var $c = $(fn.svgElement('circle', {'id': shape.id + '-circle', stroke: props.stroke, fill: 'none'})); - $g.append($s).append($c); + var $c1 = $(fn.svgElement('circle', {'id': shape.id + '-circle1', stroke: props.stroke, fill: 'none'})); + var $c2 = $(fn.svgElement('circle', {'id': shape.id + '-circle2', stroke: props.stroke, fill: 'none'})); + var $l1 = $(fn.svgElement('line', {'id': shape.id + '-line1', stroke: props.stroke })); + var $l2 = $(fn.svgElement('line', {'id': shape.id + '-line2', stroke: props.stroke })); + $g.append($s).append($c1).append($c2).append($l1).append($l2); $g.place = function () { var p = props.screenpos; - var vtx = props.vtx; place.call($s); if (p.length > 3) { // p[3] is the mouse pointer - var m = p[2].mid(p[3]); - var r = m.distance(p[2]); - $c.attr({cx: m.x, cy: m.y, r: r}); + var mp0 = p[0].mid(p[1]); + var line1 = geom.line(p[2], mp0); + var mp1 = line1.perpendicularPoint(p[3]); + var radius = mp1.distance(p[2]); + var mp2 = geom.line(mp0, p[2]).length(radius).point(); + var pt = geom.line(p[0], p[1]).parallel(p[0].mid(props.pos[0])).length(radius).point(); + $c1.attr({cx: mp1.x, cy: mp1.y, r: radius}); + $c2.attr({cx: mp2.x, cy: mp2.y, r: radius}); + $l1.attr({x1: mp1.x, y1: mp1.y, x2 : pt.x, y2 : pt.y}); + $l2.attr({x1: mp2.x, y1: mp2.y, x2 : pt.x, y2 : pt.y}); + p[3] = mp1; + shape.geometry.coordinates[3] = trafo.invtransform(p[3]).toArray(); } }; return $g;