Mercurial > hg > digilib-old
changeset 664:d5a5ee4cbf04 jquery
work on getting transformation to work with rotation (currently still doesn't)
author | robcast |
---|---|
date | Mon, 24 Jan 2011 00:13:16 +0100 |
parents | 9791a2cec863 |
children | 3de056c96bcf |
files | client/digitallibrary/jquery/dlGeometry.js client/digitallibrary/jquery/jquery.digilib.js |
diffstat | 2 files changed, 66 insertions(+), 21 deletions(-) [+] |
line wrap: on
line diff
--- a/client/digitallibrary/jquery/dlGeometry.js Sun Jan 23 00:26:07 2011 +0100 +++ b/client/digitallibrary/jquery/dlGeometry.js Mon Jan 24 00:13:16 2011 +0100 @@ -225,26 +225,29 @@ * defines a class of affine transformations */ var transform = function (spec) { - var that = jQuery.extend({ + var that = { m00 : 1.0, m01 : 0.0, m02 : 0.0, m10 : 0.0, m11 : 1.0, + m12 : 0.0, m20 : 0.0, - m12 : 0.0, m21 : 0.0, m22 : 1.0 - }, spec); + }; + if (spec) { + jQuery.extend(that, spec); + }; that.concat = function(traf) { // add Transform traf to this Transform for (var i = 0; i < 3; i++) { for (var j = 0; j < 3; j++) { var c = 0.0; for (var k = 0; k < 3; k++) { - c += traf["m"+i+k] * this["m"+k+j]; + c += traf["m"+i.toString()+k.toString()] * this["m"+k.toString()+j.toString()]; } - this["m"+i+j] = c; + this["m"+i.toString()+j.toString()] = c; } } return this; @@ -280,24 +283,42 @@ } return position(x, y); }; + that.toString = function (pretty) { + var s = '['; + if (pretty) s += '\n'; + for (var i = 0; i < 3; ++i) { + s += '['; + for (var j = 0; j < 3; ++j) { + if (j) s += ','; + s += this['m'+i+j]; + } + s += ']'; + if (pretty) s += '\n'; + } + s += ']'; + if (pretty) s += '\n'; + return s; + }; + // add class methods to instance that.getRotation = transform.getRotation; + that.getRotationAround = transform.getRotationAround; that.getTranslation = transform.getTranslation; that.getScale = transform.getScale; return that; }; - transform.getRotation = function (angle, pos) { - // returns a Transform that is a rotation by angle degrees around [pos.x, pos.y] + transform.getRotation = function (angle) { + // returns a Transform that is a rotation by angle degrees around [0,0] if (angle !== 0) { - var t = 2.0 * Math.PI * parseFloat(angle) / 360.0; + var t = Math.PI * parseFloat(angle) / 180.0; + var cost = Math.cos(t); + var sint = Math.sin(t); var traf = { - m00 : Math.cos(t), - m01 : - Math.sin(t), - m10 : Math.sin(t), - m11 : Math.cos(t), - m02 : pos.x - pos.x * Math.cos(t) + pos.y * Math.sin(t), - m12 : pos.y - pos.x * Math.sin(t) - pos.y * Math.cos(t) + m00 : cost, + m01 : -sint, + m10 : sint, + m11 : cost }; return transform(traf); } @@ -313,6 +334,14 @@ return transform(traf); }; + transform.getRotationAround = function (angle, pos) { + // returns a Transform that is a rotation by angle degrees around pos + var traf = transform.getTranslation({x : -pos.x, y : -pos.y}); + traf.concat(transform.getRotation(angle)); + traf.concat(transform.getTranslation(pos)); + return traf; + }; + transform.getScale = function (size) { // returns a Transform that is a scale by [size.width, size.height] var traf = {
--- a/client/digitallibrary/jquery/jquery.digilib.js Sun Jan 23 00:26:07 2011 +0100 +++ b/client/digitallibrary/jquery/jquery.digilib.js Mon Jan 24 00:13:16 2011 +0100 @@ -406,8 +406,6 @@ redisplay(data); } - - }; @@ -775,15 +773,32 @@ }; // create Transform from area and $img - var getImgTrafo = function ($img, area) { + var getImgTrafo = function ($img, area, data) { var picrect = geom.rectangle($img); var trafo = geom.transform(); - // subtract area offset and size + // zoom area offset trafo.concat(trafo.getTranslation(geom.position(-area.x, -area.y))); + // zoom area size trafo.concat(trafo.getScale(geom.size(1/area.width, 1/area.height))); - // scale to screen size + // rotate + if (data) { + var rot = trafo.getRotationAround(-parseFloat(data.settings.rot), + geom.position(0.5 * area.width + area.x, 0.5 * area.height + area.y)); + trafo.concat(rot); + } + // scale to screen position and size trafo.concat(trafo.getScale(picrect)); trafo.concat(trafo.getTranslation(picrect)); + /* if (data && data.settings.rot) { + var rot = trafo.getRotationAround(-data.settings.rot, + geom.position(0.5 * picrect.width + picrect.x, 0.5 * picrect.height + picrect.y)); + //var trans1 = trafo.getTranslation(geom.position(-0.5*picrect.width, -0.5*picrect.height)); + //var rot = trafo.getRotation(data.settings.rot); + //var trans2 = trafo.getTranslation(geom.position(0.5*picrect.width, 0.5*pirect.height)); + //trafo.concat(trans1); + trafo.concat(rot); + //trafo.concat(trans2); + } */ return trafo; }; @@ -793,7 +808,7 @@ return function () { console.debug("img loaded! this=", this, " data=", data); // create Transform from current area and picsize - data.imgTrafo = getImgTrafo($img, data.zoomArea); + data.imgTrafo = getImgTrafo($img, data.zoomArea, data); // display marks renderMarks(data); //digilib.showArrows(); // show arrow overlays for zoom navigation @@ -821,6 +836,7 @@ var mark = marks[i]; if (data.zoomArea.containsPosition(mark)) { var mpos = data.imgTrafo.transform(mark); + console.debug("renderMarks: mpos=",mpos); // create mark var html = '<div class="mark">'+(i+1)+'</div>'; var $mark = $(html); @@ -841,7 +857,7 @@ // offset minus frame width $ind.offset({ left : indRect.x-2, top : indRect.y-2 }); $ind.css(data.settings.birdIndicatorStyle); - } + }; // zooms by the given factor var zoomBy = function(data, factor) {