P5画布的宽度或高度偏移

时间:2019-05-16 18:32:33

标签: canvas p5.js

我想在P5js画布中放置文本(和其他一些东西)。我通过了坐标50、50,但是文本放错了位置,如彩色条所示。

enter image description here

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

我的画布宽度是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
}

1 个答案:

答案 0 :(得分:0)

来自the reference

默认情况下,您传递到text()函数中的坐标指定了文本的左下角。

  

如果未指定x2y2,则默认为基线对齐方式,这意味着将从xy开始向上绘制文本。

您有几种选择:

  • 计算字符串的绘制位置时要考虑其高度。 the reference印刷术部分中有一些方便的功能可以帮助您完成此操作。
  • 使用text()函数的4参数版本传入边界矩形。
  • 使用textAlign()函数来指定文本的显示方式。同样,the reference是您的朋友。