围绕其中心旋转两个画布

rotate two canvases around their center

本文关键字：两个 旋转      更新时间：2023-09-26

我正在开发可拖动全景图和图像的网络应用程序。用户可以将图像拖到全景图的边缘。在本例中，我正在计算表示全景图像部分的值。由于这个值，我可以将另一个图像放置在全景图的另一侧（全景图是 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 );

我的问题有一个小提琴。
拜托，有什么解决办法吗？

您不是在旋转图像本身，而是在转换。该转换矩阵适用于所有后续绘制调用。您需要重置两个调用之间的转换。但这对你没有多大帮助。我注意到剪辑也进入了视野。所以你应该试试这个：

  • 变换 1
  • 绘制 1 而不进行剪切
  • 变换 2
  • 绘制 2 而不进行剪裁

实际的剪辑将由画布本身完成。我希望这有所帮助。

相关文章：