如何使用 JavaScript 用两根手指旋转整个画布？

Question

我正在使用此功能用一根手指滚动我的绘图画布：

var targetStartX, targetStartY, touchStartX, touchStartY;

function onCanvasTouchscroll(event) {

  if (event.touches.length == 1) {

    targetStartX = parseInt(event.target.style.left);
    targetStartY = parseInt(event.target.style.top);
    touchStartX = event.touches[0].pageX;
    touchStartY = event.touches[0].pageY;


    var touchOffsetX = (event.touches[0].pageX - touchStartX) / 10,
      touchOffsetY = (event.touches[0].pageY - touchStartY) / 10; // Calculate touch

    setTimeout(function() {

      var touchOffsetX = (-event.touches[0].pageX + touchStartX) / 10,
        touchOffsetY = (-event.touches[0].pageY + touchStartY) / 10; // Calculate touch

      canvas.style.top = targetStartY + touchOffsetY + 'px';
      canvas.style.left = targetStartX + touchOffsetX + 'px';

    }, 200);
  }
}

我想创建一个用两根手指旋转整个画布的新函数。我在我的代码中尝试过canvas.rotate，但我认为我没有使用正确的命令。

Answer 1

确实没有这样的命令！

首先你需要修改你的函数来检测两指触摸事件，然后旋转你的画布。

function onCanvasTouchscroll( event )
{

    if(event.touches.length == 1)
    {
    targetStartX = parseInt(event.target.style.left);
    targetStartY = parseInt(event.target.style.top);
    touchStartX  = event.touches[0].pageX;
    touchStartY  = event.touches[0].pageY;

    var touchOffsetX = (event.touches[0].pageX - touchStartX)/10,
    touchOffsetY = (event.touches[0].pageY - touchStartY)/10; 

      setTimeout(function(){    
         var touchOffsetX = (-event.touches[0].pageX + touchStartX)/10,
         touchOffsetY = (-event.touches[0].pageY + touchStartY)/10;

         canvas.style.top = targetStartY + touchOffsetY + 'px';
         canvas.style.left = targetStartX + touchOffsetX + 'px'; 
      }, 200);
   }
   else if (event.touches.length > 1) // 2 fingers
   {
    var rotation = event.rotation;

      if (!rotation)
      {
      rotation = Math.arctan2(event.touches[0].pageY - event.touches[1].pageY,
      event.touches[0].pageX - event.touches[1].pageX) * 180 / Math.PI;
      }

   canvas.style.transform = "rotate(" + rotation + "deg)";
   }
}

PS：别忘了为浏览器添加前缀，你应该完成了。