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

【问题标题】：How to add text to canvas with PhysicsJS如何使用 PhysicsJS 将文本添加到画布
【发布时间】：2019-02-08 07:02:47
【问题描述】：

我正在使用 Physics.JS 做一个简单的项目，我希望能够将文本添加到 PhysicsJS 世界。我查看了文档，但找不到可以让我做这样的事情的东西。有没有办法添加文本并能够操作它的某些部分，例如增加速度、恢复原状和引擎的其他内容？

【问题讨论】：

如果你想渲染与世界物理交互的文本，你需要创建一个你想要的文本形状的物理体。至于静态绘制文本，PhysicsJS 并不是为此而构建的。
你的意思是用凸多边形画出文本的每个字符来创建一个身体吗？
是的。也就是说，如果您希望它充当物理身体。
不是真的..我只是想让文本从左向右滑动，如果有图像，我希望图像作为一个主体，我知道我会怎么做......你有什么想法我可以在不为每个字符生成顶点的情况下制作文本吗？更改 PhysicsJS 用于此类用途的画布元素是一种好习惯吗？

【解决方案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 上自动计算尺寸，等等来使其更具动态性......

【讨论】：