canvas - P5 画布宽度或高度偏移

Question

我想在 P5js 画布中放置一个文本（和其他一些东西）。我传递了坐标 50、50，但文本放错了位置，正如您在彩色条中看到的那样。

另一个例子是当我想将屏幕平移到一个特定矩形的中心时，当它通过某个点后尝试使用画布宽度跟随它时。

我的画布宽度是 1000。

在我的计算中使用 450 时我的居中工作正常，但是当我使用 width/2 时它不起作用。

如何让 P5js 相应地显示我的画布，或者一般有什么问题？

function setup() {
  createCanvas(1000, 700);
}

function draw() {
  // Some other stuff

  textSize(32);
  fill(255);
  text("Some Text", 50, 50);

  // Some other stuff
}

标签： canvasp5.js

Answer 1

从参考：

默认情况下，您传递给text()函数的坐标指定文本的左下角。

如果x2和y2没有指定，基线对齐是默认的，这意味着文本将从x和向上绘制y。

你有几个选择：

• 在计算绘制位置时要考虑字符串的高度。参考资料的排版部分中有一些方便的功能可以帮助您做到这一点。
• 使用该text()函数的 4 参数版本传入一个边界矩形。
• 使用该textAlign()函数指定文本的显示方式。同样，参考是您的朋友。