Matter.js：在画布上放置文本或图像 [英] Matter.js: placing text or images on the canvas

问题描述

我想在画布上放置字体或静态图像，但不确定使用Matter.js的最佳方法。现在，对于图像，我只是创建一个大小为 0的主体，并将图像网址放入render.sprite.texture属性中。似乎可以解决问题，但是在画布上放置静态图像有其他/更好的方法吗？

I'm wanting to place font or static images onto the canvas but not sure what the best approach is using Matter.js. Right now, for images, i'm just creating a body with a size of '0' and putting the image url in the render.sprite.texture property. Seems to do the trick but is there a different/better way of putting static images on the canvas?

此外，我正在使用 afterRender将文本放置在画布上在创建或绘制其他任何内容之前，在脚本顶部附近发生以下事件：

Also, I am putting text onto the canvas using the 'afterRender' event near the top of my scripts, before anything else is created/drawn:

_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);
    });
);

唯一的问题是文本始终在顶部绘制，因此我的可拖动对象始终在文本后面。我只希望文本像静态图像一样保留在背景中，但是我认为将字体绘制到画布上可能比必须让用户下载另一幅图像更好。有帮助吗？

Only problem is the text keeps getting drawn on top so my draggable objects keep going behind the text. I just want the text to stay in the background, like a static image, but I figured drawing the font onto the canvas might be better than having to make the user download another image. Any help?

推荐答案

Matter.js附带的渲染器实际上仅用于演示，因此最好的方法是使示例 Render.js 的副本，以及然后在那里实现所有渲染（其中 Render.world 是在每个刻度上调用的输入方法）。

The renderer included with Matter.js is really only intended for demonstration, so the best thing to do is make a copy of the example Render.js and then implement all of your rendering there (where Render.world is the entry method called on each tick).

将对象名称更改为 CustomRenderer 之类的其他名称，然后在 Engine.create 选项中传递渲染类： / p>

Change the object name to something else like CustomRenderer, then pass your render class through in the Engine.create options:

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

这篇关于Matter.js：在画布上放置文本或图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！