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) {