Javascript Matter.js:在画布上放置文本或图像
我想在画布上放置字体或静态图像,但不确定使用Matter.js的最佳方法是什么。现在,对于图像,我只是创建一个大小为“0”的主体,并将图像url放在render.sprite.texture属性中。似乎可以做到这一点,但是否有其他/更好的方式将静态图像放置在画布上 此外,在创建/绘制任何其他内容之前,我正在使用脚本顶部附近的“afterRender”事件将文本放到画布上:Javascript Matter.js:在画布上放置文本或图像,javascript,html,canvas,physics-engine,Javascript,Html,Canvas,Physics Engine,我想在画布上放置字体或静态图像,但不确定使用Matter.js的最佳方法是什么。现在,对于图像,我只是创建一个大小为“0”的主体,并将图像url放在render.sprite.texture属性中。似乎可以做到这一点,但是否有其他/更好的方式将静态图像放置在画布上 此外,在创建/绘制任何其他内容之前,我正在使用脚本顶部附近的“afterRender”事件将文本放到画布上: _sceneEvents.push( Events.on(_engine, 'afterRender', funct
_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);
});
);
唯一的问题是文本一直在顶部绘制,所以我的可拖动对象一直在文本后面。我只是希望文本像静态图像一样留在背景中,但我认为在画布上绘制字体可能比让用户下载另一幅图像要好。有什么帮助吗?Matter.js中包含的渲染器实际上只用于演示,因此最好的做法是复制示例,然后在那里实现所有渲染(其中
Render.world
是在每个勾号上调用的输入方法)
将对象名称更改为其他名称,如自定义渲染器
,然后在引擎中传递渲染类。创建
选项:
var engine = Engine.create({
render: {
element: element,
controller: CustomRenderer
}
});
有点晚了,但相关文档显示您在将精灵添加到渲染器中时使用了正确的方法:
let head = Bodies.circle(450, 50, 17, {
render: {
sprite: {
texture: './img/head.png'
}
}}
);
(还不知道问题的文本部分)这是如何在函数中返回文本字符串作为基本图像的方法
createImage($string) {
let drawing = document.createElement("canvas");
drawing.width = '150'
drawing.height = '150'
let ctx = drawing.getContext("2d");
ctx.fillStyle = "blue";
//ctx.fillRect(0, 0, 150, 150);
ctx.beginPath();
ctx.arc(75, 75, 20, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
ctx.fillStyle = "#fff";
ctx.font = "20pt sans-serif";
ctx.textAlign = "center";
ctx.fillText($string, 75, 85);
// ctx.strokeText("Canvas Rocks!", 5, 130);
return drawing.toDataURL("image/png");
},
// and then e.g. in your sprites
// ...
render: {
sprite: {
texture: createImage("Your Text String")
xScale: 1,
yScale: 1
}
}