p5.js Constructor中文字不显示问题求助（版本兼容+布局需求）

核心问题 #

1. 绘制逻辑位置错误：把绘制代码放在类的构造函数中，p5.js新版本的渲染机制对这种非标准写法兼容性下降，导致构造函数内的绘制操作无法被正确捕获，旧版本则能兼容这类写法。
2. 文本区域裁剪问题：text()函数的后两个参数是文本的显示宽高，你的参数设置让文本被限制在过小的区域内，甚至超出可视范围，所以文字无法显示。
3. 坐标模式混淆：使用rectMode(CENTER)后，矩形坐标以中心为锚点，但文本定位时未对应调整，导致布局混乱。

修复步骤 #

1. 重构类结构，分离初始化与绘制逻辑 #

将构造函数中的绘制代码移到单独的draw()方法中，在p5的draw()循环里调用这个方法，这是p5.js的标准写法。

2. 调整文本定位与显示区域 #

• 标题（name）放在矩形左上角：基于矩形中心坐标转换出左上角位置，配合文本对齐属性精准定位。
• 描述（desc）放在底部：用底部对齐的文本属性，结合矩形坐标计算出底部位置，合理设置文本显示区域。

3. 避免重复创建对象 #

在draw()里每次new Item会重复创建对象，造成性能浪费，应该在setup()里创建一次，draw()里只调用绘制方法。

修复后的完整代码 #

var thing;

class Item {
  constructor(x, y, width, height, name, desc) {
    // 仅做属性初始化，不执行绘制
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.name = name;
    this.desc = desc;
    this.textSize = windowWidth / 95;
  }

  draw() {
    // 绘制透明矩形
    let tc = color(1, 1, 1);
    tc.setAlpha(0);
    fill(tc);
    rectMode(CENTER);
    rect(this.x, this.y, this.width, this.height);

    // 绘制左上角标题
    fill(0);
    textSize(this.textSize);
    textAlign(LEFT, TOP);
    // 从中心坐标转换到左上角，加上内边距
    const titleX = this.x - this.width / 2 + this.textSize / 2;
    const titleY = this.y - this.height / 2 + this.textSize / 2;
    text(this.name, titleX, titleY);

    // 绘制底部居中描述
    textAlign(CENTER, BOTTOM);
    const descY = this.y + this.height / 2 - this.textSize / 2;
    text(this.desc, this.x, descY, this.width);
  }
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  // 仅创建一次Item对象
  thing = new Item((windowWidth / 3) / 4, windowWidth / 7, windowWidth / 6.7, windowWidth / 7, 'samplename', 'sampledesc');
}

function draw() {
  background(255); // 每次绘制前清屏，避免画面重叠
  thing.draw(); // 调用对象的绘制方法
}

关键调整说明 #

• 类的constructor只负责初始化属性，绘制逻辑全部移到draw()方法中，符合p5.js的渲染生命周期要求。
• 使用textAlign(LEFT, TOP)和textAlign(CENTER, BOTTOM)精准控制文本对齐方式，配合坐标转换实现需求布局。
• 移除text()函数中不必要的高度参数，避免文本被意外裁剪；描述文本保留宽度参数，实现自动换行。
• 在setup()中仅创建一次Item对象，draw()循环中仅调用绘制方法，提升运行性能。

内容的提问来源于stack exchange，提问作者don't ask