圍繞其中心旋轉兩個畫布

Question

我正在開發可拖動全景圖和圖像的Web應用程序。 用戶可以將圖像拖到全景圖的邊緣。 在這種情況下，我正在計算代表全景圖像之外的部分圖像的值。 由於這個值，我可以將另一個圖像以該值的寬度放置在全景圖的另一側（全景圖為360°）。
圖像可以通過鼠標右鍵單擊來旋轉，當圖像沒有超出邊緣時（全景圖中只有1幅圖像），它旋轉得很好。 但是，當我有2張圖像（將圖像拖到邊緣上）時，一個旋轉得很好，但是第二個旋轉得很差（繞着全景行駛）。
有一張圖像時旋轉：

img_canvas.width = 150;
img_canvas.getContext('2d').clearRect(0,0,img_canvas.width, img_canvas.height);
img_canvas.getContext('2d').drawImage(img, 0,0, 150, 150);
main_ctx.clearRect(0,0,canvas.width, canvas.height);
main_ctx.drawImage(bg_canvas, panoramaX,panoramaY,bg_canvas.width,bg_canvas.height);
main_ctx.translate(imageX+img_canvas.width/2, imageY+img_canvas.height/2);
main_ctx.rotate(angle);
main_ctx.translate(-(imageX+img_canvas.width/2),-(imageY+img_canvas.height/2));
main_ctx.drawImage(img_canvas, imageX, imageY);
main_ctx.setTransform(1,0,0,1,0,0);

旋轉兩個圖像：

var img_canvas_width = 150 - over_value;
img_canvas.width = img_canvas_width;
img_canvas.getContext('2d').drawImage( img, 0, 0, 150, 150 );
img_canvas_split.width = over_value;
img_canvas_split.getContext('2d').drawImage( img_split, -img_canvas_width, 0, 150, 150 );
main_ctx.clearRect(0, 0, canvas.width, canvas.height );
main_ctx.drawImage( bg_canvas, panoramaX, panoramaY, bg_canvas.width, bg_canvas.height );
main_ctx.translate( imageX_hit + (img_canvas_width)/2, imageY + img_canvas.height/2 );
main_ctx.rotate( angle );
main_ctx.translate( -( imageX_hit + (img_canvas_width)/2), -(imageY + img_canvas.height/2) );
main_ctx.drawImage( img_canvas, imageX_hit, imageY );
main_ctx.translate( (bg_canvas.width - img_canvas_width/2 - over_value/2), imageY + img_canvas.height/2 );
main_ctx.translate( - (bg_canvas.width - img_canvas_width/2 - over_value/2), -(imageY + img_canvas.height/2) );
main_ctx.drawImage( img_canvas_split, panoramaX, imageY );
main_ctx.setTransform( 1, 0, 0, 1, 0, 0 );

有一個FIDDLE與我的問題。
請問有什么解決辦法嗎？

Answer 1

您本身不是旋轉圖像，而是旋轉。 該變換矩陣適用於所有后續繪制調用。 您需要重置兩個調用之間的轉換。 但這對您沒有太大幫助。 我注意到剪輯也會出現。 因此，您應該嘗試以下操作：

• 轉換1
• 畫1不剪
• 轉換2
• 畫2不剪

實際的裁剪將由畫布本身完成。 我希望這有幫助。