javascript - 如何使用 JavaScript 用两根手指旋转整个 Canvas ？

Question

我正在使用此功能用一根手指滚动我的绘图 Canvas :

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 。我在代码中尝试过canvas.rotate，但我认为我使用的命令不正确。

Answer 1

确实没有这样的命令!

首先，您需要修改函数来检测 2 根手指触摸事件，然后旋转 Canvas 。

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