p5.j​​s如何在旋转后沿轴平移

Question

在我旋转坐标系后，它会沿着新的轴平移。是否有可能在旋转之前沿轴平移它？

想法是用户上传一张图片，然后他可以旋转它、缩放它并在视口中间移动它。不知何故，我一次未能实现所有这些功能。

有什么建议吗？

编辑

即有一个画布。我在那里画了一个图像。然后我将它旋转 90°，我想在 X 轴上平移它。它在屏幕上向下移动。因为轴是转过来的。

编辑

这是我用于转换的代码 sn-p。图像总是在它的 (0,0) 点旋转。这就是为什么我以它在中间点旋转的方式翻译它。然后我在一个偏移点上绘制图像。

    p.push();
        p.translate(canvasWidth/2, canvasHeight/2);
        p.rotate(angle * p.TWO_PI/360);

        var x = -loadedImage.width/2  - offsetX;
        var y = -loadedImage.height/2 - offsetY;

        p.image(loadedImage, x, y);
    p.pop();

编辑

我决定先平移，然后旋转。它使翻译正确，但围绕错误的枢轴点旋转。我无法拥有我猜想的一切。

Answer 1

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.save();
ctx.fillStyle="red";
ctx.translate(100,0);
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(0, 0, 100, 50);
ctx.restore();
ctx.fillRect(100,0,50,50);

试试这个代码：在你的代码中使用 drawImage 而不是 fillRect