p5.js中基于图像尺寸设置数组对象Y轴位置的问题

以下几个细节是最可能的问题根源，你对照代码逐一检查：

• 全局变量被覆盖导致数值混乱
  如果你用的是全局的objectRadius，循环创建Block实例时每次更新这个变量，所有Block的Y值都会被最后一次的objectRadius覆盖——因为对象引用的是同一个变量地址，不是创建时的固定数值。解决办法是创建Block时把当前计算好的radius值传进去，存在实例自身的属性里，比如new Block(..., currentRadius)，之后用实例的this.radius计算Y位置。

• 图像异步加载导致尺寸计算错误
  计算objectRadius时如果用到了图像宽高，但图像还没加载完成，拿到的宽高是0或默认值，算出来的radius自然错误，Y位置也就乱了。必须确保在图像onload事件触发后，再计算radius、创建Block实例；或者在Block的绘制方法里，实时根据已加载的图像尺寸更新radius和Y位置。

• Y轴位置的计算逻辑与绘制逻辑不匹配
  要实现图像顶部对齐画布顶部，得看你的绘制逻辑：

  • 如果绘制时是把图像中心放在(x,y)，那Y设为objectRadius是对的（图像高度为2*objectRadius，中心Y为radius时，顶部刚好在Y=0）。
  • 如果绘制时是把图像左上角放在(x,y)，那Y应该设为0，用objectRadius反而会把图像往下移，看起来位置随机。

• Block实例未绑定独立的radius值
  要是你在Block类里直接引用外部的objectRadius，而不是把它存在实例内部，后续objectRadius变化时，所有Block的Y都会跟着改变，导致位置混乱。必须在创建实例时把当前的radius值存在实例里，比如：

  class Block {
    constructor(x, radius) {
      this.x = x;
      this.radius = radius;
      this.y = radius; // 用实例自身的radius，而非全局变量
    }
  }
  

内容的提问来源于stack exchange，提问作者mweinberg