HTML 5畫布 - 旋轉，縮放，翻譯和繪製圖像

Question

我正在嘗試在畫布內部放置一個html5圖像。圖像是使用CSS變換屬性翻譯，旋轉和縮放。主要問題是如何複製圖像的屬性並在畫布上將它們應用於。

您可以嘗試下面的jsfiddle鏈接：可以縮放，移動和旋轉圖像，並且在綠色框中出現的任何圖像都應該與紅色中的相同。

https://jsfiddle.net/q7y1py5f/3/。在這裏，我可以移動和縮放圖像，但是當旋轉開始時沒有任何效果。這裏是代碼的錯誤我（在JavaScript的jsfiddle 58線）：

context.save(); 

context.translate(image.width/2, image.height/2); 
context.rotate(angle * Math.PI/180); 
context.translate(((-image.width)/2), ((-image.height)/2)); 

context.translate(-x, -y); 
context.scale(scale, scale); 

context.drawImage(image, 0, 0); 

context.restore(); 

這裏x和y是綠色容器的左上角和圖像左上角之間的差異。任何幫助，將不勝感激。

我已經設法讓每個屬性單獨工作，但是當它們結合在一起時它不起作用。當我只翻譯和縮放圖像並應用到畫布上下文時，一切都很好，但是當我在圖像中添加旋轉並不是它應該在的位置時。

我嘗試了以下方法 - 用角度計算元素的左上角以獲得正確的值，然後使用它進行平移和旋轉。

Answer 1

在功能canvasCropping你寫

var left = cropper.offset().left - img.offset().left, top = cropper.offset().top - img.offset().top,

但旋轉和縮放將改變元件空間偏移，所以你有翻譯錯誤的座標系下。將其更改爲： var left = -(cropper.offset().left - transform.translate.x-initialOffset.left), top = -(cropper.offset().top -transform.translate.y-initialOffset.top),

initialOffset - 圖像的初始偏移量。

而在drawRotatedImage ' 變種drawRotatedImage =函數（上下文中，圖像，X，Y，角度，寬度，高度，尺度）{

context.save(); 

    // Move registration point to the center of the canvas 
    context.translate(x+image.width/2,y+image.height/2); 
    context.rotate(angle* Math.PI/180);// angle must be in radians 
    context.scale(scale, scale); 
    // Move registration point back to the top left corner of canvas 
    context.translate((-image.width)/2, (-image.height)/2); 

    context.drawImage(image, 0, 0); 

    context.restore(); 
}; 

`