Wie dreht man die gesamte Leinwand mit zwei Fingern mit JavaScript?

Question

ich diese Funktion bin mit meiner Zeichnung Leinwand mit einem Finger blättern:

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

ich eine neue Funktion erstellen möchten, die die gesamte Leinwand mit zwei Fingern dreht. Ich habe versucht canvas.rotate in meinem Code, aber ich glaube nicht, dass ich den richtigen Befehl verwendet habe.

Answer 1

Tatsächlich gibt es keinen solchen Befehl!

Zuerst müssen Sie Ihre Funktion ändern, um das 2-Finger-Berührungsereignis zu erkennen, und dann die Leinwand drehen.

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: Vergessen Sie nicht, Präfixe für Browser hinzufügen und Sie getan werden sollte.