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

Question

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

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);

您会在这里看到，如果您在 canvas 中单击并垂直上下拖动，图像将移向图像的 'top' 箭头，而不是跟随鼠标移动到图像的顶部canvas。在其他角度尝试它，它会表现出一系列行为！

我知道我需要引入一些因素来通过这种运动来操纵 X 和 Y，但我这辈子都找不到任何有用的东西！

Answer 1

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

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();

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

Handling a rotated canvas image dragable relative to the canvas not the image

javascript

canvas

rotation

draggable