如何在p5的倒置坐标系右侧正常显示文本？

方法一：调整坐标系变换逻辑（推荐） #

直接通过平移而非翻转y轴实现目标坐标系，从根源避免文本倒置问题：

function setCoordinateSystem(p) {
  // 1. 将原点移到画布左下角
  p.translate(0, p.height);
  // 2. 缩放画布，使x/y范围对应-25到25
  p.scale(p.width / 50, p.height / 50);
  // 3. 将原点移到画布中心
  p.translate(25, 25);
}

完整测试代码 #

function setup() {
  createCanvas(400, 400);
  setCoordinateSystem(this);
}

function setCoordinateSystem(p) {
  p.translate(0, p.height);
  p.scale(p.width / 50, p.height / 50);
  p.translate(25, 25);
}

function draw() {
  background(220);
  // 绘制坐标轴
  line(-25, 0, 25, 0);
  line(0, -25, 0, 25);
  // 直接绘制文本，无需额外调整
  text('test', -25, 0);
}

这种方式的坐标系完全符合需求：原点居中、x轴向右、y轴向上，且所有绘制内容（包括文本）都能正常显示，不需要额外修改文本绘制逻辑。

方法二：重写text函数适配原有坐标系 #

如果不想修改已有的坐标系变换代码，可以通过重写text函数，自动处理文本的翻转和坐标修正：

function setCoordinateSystem(p) {
  p.translate(p.width/2, p.height/2);
  p.scale(p.width/50, -p.height/50);
  
  // 保存原始text函数
  const originalText = p.text.bind(p);
  // 重写text函数，自动修正文本方向
  p.text = function(str, x, y, ...args) {
    p.push();
    p.scale(1, -1); // 临时翻转y轴恢复文本方向
    originalText(str, x, -y, ...args); // 调整y坐标适配变换
    p.pop();
  }
}

完整测试代码 #

function setup() {
  createCanvas(400, 400);
  setCoordinateSystem(this);
}

function setCoordinateSystem(p) {
  p.translate(p.width/2, p.height/2);
  p.scale(p.width/50, -p.height/50);
  
  const originalText = p.text.bind(p);
  p.text = function(str, x, y, ...args) {
    p.push();
    p.scale(1, -1);
    originalText(str, x, -y, ...args);
    p.pop();
  }
}

function draw() {
  background(220);
  line(-25, 0, 25, 0);
  line(0, -25, 0, 25);
  text('test', -25, 0); // 无需手动调整坐标
}

这种方式保留了你原有的坐标系变换逻辑，同时让文本绘制自动适配，不需要每次单独调整。

内容的提问来源于stack exchange，提问作者Pierre-olivier Gendraud