javascript - 在 P5.js 中更改坐标系

Question

如您所知，P5 坐标系不是从 Canvas 中间开始加上 y 轴翻转
我的问题是如何更改 p5 的坐标，使其与笛卡尔坐标系相同

Answer 1

使用 translate() 将原点转换为中心。使用 scale 翻转 y 轴:

function draw() {
    translate(width/2, height/2); 
    scale(1, -1);

    // [...] 
}

注意， width 和 height 是 Canvas 的宽度和高度。translate(width/2, height/2)将所有内容移动一半宽度和高度。它将场景的对象从左上角移动到 Canvas 的中心。

这种方法会导致文本被翻转。再次输入文本，每个文本都必须插入到 push() 中/ pop() 反转翻转的 block ::

push();
scale(1, -1); // reverse the global flip
text(...);
pop();