P5.js旋转后如何沿轴平移

p5.js how to translate along axes after rotate

本文关键字：何沿轴 js 旋转 P5      更新时间：2023-09-26

当我旋转一个坐标系统后，它会沿着它的新轴进行平移。有没有可能在旋转之前沿着坐标轴平移它?

的想法是，用户上传的图像，然后他可以旋转它，缩放它，并移动它周围的视窗中间。不知怎么的，我没能一次实现所有这些功能。

有什么建议吗?

编辑

。有一块帆布。我在这里画一个图像。然后我旋转它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();

编辑

我决定先平移，然后旋转。它使得平移是正确的，但是它围绕错误的枢轴点旋转。我不可能事事如意

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
相关文章：