2

我有以下代码，它有助于根据通过矩阵值从 winjs 中的手势控件获得的值转换画布上的图像。

试验一：

起初我尝试使用 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();
      }

试验二：

根据许多教程，建议在转换时遵循缩放-旋转-翻译顺序，所以我尝试了这个

      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();
      }

在这两种情况下，仅翻译的转换图像都正确定位在画布上。但是当图像被缩放和平移时，变换后的图像不会出现在它们的正确位置。所以似乎只有在图像被缩放时，图像的坐标才会发生变化。我该如何解决这个问题！？

4

0 回答 0