Javascript 如何使用Matter.js和p5.js将文本放入矩形中

我按照本教程介绍了如何使用codetrain的matter.js。 我在想我怎么能把文字放在矩形里？ 现在，文本是什么并不重要，只要我能以某种方式把文本放进去

这就是我的javascript现在的样子 我正在使用matter.js库和p5.js

var Engine = Matter.Engine,
  World = Matter.World,
  Bodies = Matter.Bodies;

var engine;
var world;
var boxes = [];

var ground;


function setup() {
    createCanvas(window.innerWidth, window.innerHeight);
    engine = Engine.create();
    world = engine.world;
    Engine.run(engine);
    var options = {
      isStatic: true
    }
    ground = Bodies.rectangle(200, height, width, 10, options);
    World.add(world, ground);
  }


function Box(x, y, w, h) {
    this.body = Bodies.rectangle(x, y, w, h);
    this.w = w;
    this.h = h;
    World.add(world, this.body);

    this.show = function(){
      var pos = this.body.position;
      var angle = this.body.angle;

      push();
      translate(pos.x, pos.y);
      rotate(angle);
      rectMode(CENTER);
      strokeWeight(1);
      stroke(255);
      fill(0);
      rect(0, 0, this.w, this.h);
      pop();
    }
  }

function mousePressed(){
  boxes.push(new Box(mouseX, mouseY, 100, 100))
}

  function draw() {
    background(0);
    for (var i = 0; i < boxes.length; i++) {
      boxes[i].show();
    }
  }

var引擎=物质引擎，
世界=物质。世界，
物体=物质。物体；
var发动机；
var世界；
变量框=[]；
无功接地；
函数设置（）{
createCanvas（window.innerWidth，window.innerHeight）；
engine=engine.create（）；
world=engine.world；
引擎。运行（引擎）；
变量选项={
是的
}
地面=实体。矩形（200，高度，宽度，10，选项）；
世界。添加（世界，地面）；
}
功能盒（x、y、w、h）{
this.body=Bodies.rectangle（x，y，w，h）；
这个.w=w；
这个，h=h；
添加（World，this.body）；
this.show=函数（）{
var pos=此主体位置；
var angle=此.body.angle；
推（）；
翻译（位置x、位置y）；
旋转（角度）；
矩形模式（中心）；
冲程重量（1）；
中风（255）；
填充（0）；
rect（0，0，this.w，this.h）；
pop（）；
}
}
函数mousePressed（）{
盒子。推（新盒子（mouseX，mouseY，100100））
}
函数绘图（）{
背景（0）；
对于（变量i=0；i

您可以使用p5js函数：

this.show = function () {
    var pos = this.body.position;
    var angle = this.body.angle;

    push();
    translate(pos.x, pos.y);
    rotate(angle);
    rectMode(CENTER);
    strokeWeight(1);
    stroke(255);
    fill(0);
    rect(0, 0, this.w, this.h);
    stroke(255);
    // translate(-this.w/2, -this.h/2); // Is you want to move the text at the top left corner
    fill(255);
    stroke(255);
    text("foo", 0, 0);
    pop();
};

text（）

将要绘制的字符串及其位置作为参数。因为你已经

翻译了（pos.x，pos.y）

您可以简单地使用

0,0

作为坐标。如果在某个时候您想将文本居中，您可能也会感兴趣