处理相对于画布而不是图像可拖动的旋转画布图像

Posted 2023-05-08

【中文标题】处理相对于画布而不是图像可拖动的旋转画布图像

【英文标题】：Handling a rotated canvas image dragable relative to the canvas not the image

【发布时间】：2018-11-25 17:49:37

【问题描述】：

我想让用户在画布中旋转图像，然后拖动它来定位它。这适用于 0 度和 180 度的角度，但我无法计算出三角函数以使图像相对于画布移动，而不是相对于它的原始方向。

Demo jsfiddle：http://jsfiddle.net/jamesinealing/3chy076x/（现在更新了如下所述的修复）

摘录：

ctx.rotate(angle * Math.PI / 180);
// this is where a formula is needed to get the correct pan values based on the angle
panXTransformed = panX * Math.cos(angle * Math.PI / 180);
panYTransformed = panY * Math.cos(angle * Math.PI / 180);
ctx.drawImage(pic, panXTransformed, panYTransformed, pic.width, pic.height);

您将在此处看到，如果您在画布中单击并垂直上下拖动，图像会移向图像的“顶部”箭头，而不是跟随鼠标移动到画布顶部。换个角度试试，它会表现出一系列的行为！

我知道我需要引入一些因素来通过这样的运动来操纵 X 和 Y，但我终其一生都找不到任何有效的方法！

【参考方案1】：

通过更多的调查、反复试验和运气，找到了它！已经更新了小提琴 - http://jsfiddle.net/jamesinealing/3chy076x/ - 但对于那些发现自己有同样问题的人来说，这是一段重要的代码！关键在于将其分解，以便任何水平或垂直鼠标移动实际上都会导致旋转图像上成比例的 x 和 y 偏移，该偏移根据角度而变化（因此 90 度角意味着 x 鼠标移动被平移100% 进入图像移动等）

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate((canvas.width - pic.width) / 2, (canvas.height - pic.height) / 2); 
ctx.rotate(angle * Math.PI / 180);
// now set the correct pan values based on the angle
panXX = (panX*(Math.cos(angle * Math.PI / 180)));
panXY = (panY*(Math.sin(angle * Math.PI / 180)));
panYY = (panY*(Math.cos(angle * Math.PI / 180)));
panYX = (panX*(Math.sin(angle * Math.PI / 180)));
panXTransformed = panXX+panXY;
panYTransformed = panYY-panYX;
ctx.drawImage(pic, panXTransformed, panYTransformed, pic.width, pic.height);
ctx.fillStyle="#0000FF";
ctx.fillRect(0,0,5,5); // place marker at 0,0 for reference
ctx.fillStyle="#FF0000";
ctx.fillRect(panXTransformed, panYTransformed,5,5); // place marker at current tranform point
ctx.restore();

【讨论】：

我一直在寻找这个。非常感谢！