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

（無約的想法問題的正文部分，但）