如何使用PhysicsJS将文本添加到画布中

Question

我正在使用Physics.JS做一个简单的项目，我希望能够向PhysicsJS世界添加文本。我查看了文档，但找不到允许我这样做的东西。有没有一种方法可以添加文本，也可以操纵其中的部分，比如提高速度、恢复原状和引擎上的其他东西？

Answer 1

只需扩展rectangle主体，并将其view更改为包含文本的画布：

 Physics.body('text', 'rectangle', function (parent) {
      var canv = document.createElement('canvas');
      canv.width = 310;
      canv.height = 60;
      var ctx  = canv.getContext("2d");
      ctx.fillStyle = "#ffffff";
      ctx.textAlign = "left"
      ctx.textBaseline = "top";
      ctx.font = "80px sans-serif";

      return {
           // Called when the body is initialized
           init: function(options) {
               parent.init.call(this, options);
               ctx.fillText(options.text,0,0);
            },
            // Called when the body is added to a world
            connect: function() {
                this.view = canv;
            }
      }
  });

然后，实例化它：

 Physics.body('text', {
     x: 400,
     y: 570,
     width: 310,
     height: 60,
     text: "Some text here",
 })

您可以通过options.text指定文本字符串。

当然，通过允许在选项中指定字体参数，然后自动计算init上的维度，等等，可以使它更加动态.