Matter.js：将文本或图像放在画布上

Question

我想将字体或静态图像放置在画布上，但不确定使用Matter.js的最佳方法。现在，对于图像，我只是创建一个大小为'0'的主体，并将图像url放入render.sprite.texture属性中。似乎做的伎俩，但有没有不同的/更好的方式将静态图像放在画布上？

而且，我把文本到使用近我的脚本的顶部的“一个AfterRender”事件画布，别的创建/画前：

_sceneEvents.push(
    Events.on(_engine, 'afterRender', function(event) { 
     var context = _engine.render.context; 
     context.font = "45px 'Cabin Sketch'"; 
     context.fillText("THROW OBJECT HERE", 150, 80); 
    }); 
); 

唯一的问题是文本不断得到画上顶部，所以我的可拖动对象继续在文本后面。我只想让文本留在背景中，就像静态图像一样，但我认为在画布上绘制字体可能比让用户下载其他图像更好。任何帮助？

Answer 1

包含Matter.js渲染器真的只用于演示，因此，最好的办法是让这个例子Render.js的副本，然后实现您所有的渲染有（其中Render.world是呼吁各输入法蜱）。

更改对象名称到别的东西像CustomRenderer，然后通过在Engine.create选择通过您呈现类：后期

var engine = Engine.create({ 
    render: { 
     element: element, 
     controller: CustomRenderer 
    } 
}); 

Answer 2

有一点，但是这方面的文档显示你添加了正确的方法精灵渲染：

let head = Bodies.circle(450, 50, 17, { 
       render: { 
        sprite: { 
         texture: './img/head.png' 
        } 
       }} 
      ); 

https://github.com/liabru/matter-js/blob/master/examples/sprites.js

（无约的想法问题的正文部分，但）