locked
HTML5 scaling translating yields wrong position

    Question

  • I have the following code which helps in transforming the images on the canvas based on the values obtained via the matrix value from the gesture control in winjs.

    Trial 1:

    At first i tried using canvas.setTransform(a,b,c,d,e,f);

    for (var i = 0; i < elt.length; i++) {
         elt[i] = document.getElementById("Img" + i);
         can.appendChild(elt[i]);
    
    }
    for (var i = 0; i < elt.length; i++) {
         var m = new MSCSSMatrix(elt[i].style.transform);
         ctx.save();             
         ctx.setTransform(m.a, m.b, m.c, m.d, m.e, m.f);
         ctx.drawImage(can.children[i], parseInt(elt[i].style.left), parseInt(elt[i].style.top), 180, 500);
         ctx.restore();
    }

    Trial 2:

    As per many tutorials, it was suggested that scaling-rotate-translate order to be followed while transforming,so I tried this

    for (var i = 0; i < elt.length; i++) {
         elt[i] = document.getElementById("Img" + i);
         can.appendChild(elt[i]);
    }
    for (var i = 0; i < elt.length; i++) {
         var m = new MSCSSMatrix(elt[i].style.transform);
         ctx.save();             
         ctx.scale(Math.sqrt((m.a * m.a) + (m.c * m.c)), Math.sqrt((m.b * m.b) + (m.d * m.d)));
         ctx.rotate(Math.atan(-(m.m21) / m.m22));
         ctx.translate(m.e, m.f);
         ctx.drawImage(can.children[i], parseInt(elt[i].style.left), parseInt(elt[i].style.top), 180, 500);
         ctx.restore();
    }

    In both cases,the transformed images which are only translated are properly positioned on the canvas . But when the images are scaled and translated the transformed images does not appear in their right positions.So there seems to be a change in the coordinates of the image only when the image is scaled. How do I go about to fix this!?



    Monday, February 18, 2013 12:26 PM

All replies