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

Question

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

想法是用户上传图像然后他可以旋转它，缩放它并在视口中间移动它。不知何故，我无法完成所有这些功能。

有什么建议吗？

修改

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

修改

这是我用于转换的代码段。图像始终在其（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