javascript - 如何使用 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 上自动计算尺寸，等等来使其更具动态性……