我正在开发可以拖动全景和图像的网络应用程序。用户可以在全景边缘上拖动图像。在这种情况下，我正在计算代表全景图像一部分的值。由于这个值，我可以在全景的另一侧放置另一个图像（全景是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 拜托，有什么解决方案吗？
答案 0 :(得分：0)
您不是在旋转图像本身而是转换。该变换矩阵适用于所有后续绘制调用。您需要重置两次调用之间的转换。但这对你没有多大帮助。我注意到裁剪也会出现。所以你应该试试这个：
实际裁剪将由画布本身完成。我希望这会有所帮助。