2014-09-25 44 views
1

我想將字體或靜態圖像放置在畫布上,但不確定使用Matter.js的最佳方法。現在,對於圖像,我只是創建一個大小爲'0'的主體,並將圖像url放入render.sprite.texture屬性中。似乎做的伎倆,但有沒有不同的/更好的方式將靜態圖像放在畫布上?Matter.js:將文本或圖像放在畫布上

而且,我把文本到使用近我的腳本的頂部的「一個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); 
    }); 
); 

唯一的問題是文本不斷得到畫上頂部,所以我的可拖動對象繼續在文本後面。我只想讓文本留在背景中,就像靜態圖像一樣,但我認爲在畫布上繪製字體可能比讓用戶下載其他圖像更好。任何幫助?

回答

3

包含Matter.js渲染器真的只用於演示,因此,最好的辦法是讓這個例子Render.js的副本,然後實現您所有的渲染有(其中Render.world是呼籲各輸入法蜱)。

更改對象名稱到別的東西像CustomRenderer,然後通過在Engine.create選擇通過您呈現類:後期

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