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

Question

我想允许用户在 Canvas 中旋转图像，然后拖动它来定位它。这对于 0 度和 180 度的 Angular 工作得很好，但我在计算三 Angular 函数以使图像相对于 Canvas 移动而不是相对于其原始方向移动时遇到困难。

演示 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 中单击并垂直上下拖动，图像将移向图像的“顶部”箭头，而不是跟随鼠标移动到 Canvas 的顶部。从其他 Angular 尝试一下，它会表现出一系列行为!

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

Answer 1

通过更多的调查、反复试验和一点运气，找到了它!已更新 fiddle - http://jsfiddle.net/jamesinealing/3chy076x/ - 但对于发现自己遇到同样问题的人来说，这是重要的代码!关键的一点是将其分解，以便任何水平或垂直鼠标移动实际上都可以在旋转图像上产生成比例的 x 和 y 移动，该移动根据 Angular 而变化(因此 90 度 Angular 意味着 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();