如何使用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

确实没有这样的命令！

首先，您需要修改函数以检测 2 指触摸事件，然后旋转画布。

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 ：不要忘记为浏览器添加前缀，您应该完成。