0
我正在開發可拖動全景和圖像的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與我的問題。
請問有沒有解決方法？