Question

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

试验1：

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

试验2：

根据许多教程，有人建议在转换时遵循scaling-rotate-translate命令，所以我尝试了这个

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

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

HTML5缩放翻译产生错误的位置

0 个答案: