Matter.js:在画布上放置文本或图像
Matter.js:在画布上放置文本或图像
提问于 2014-09-25 08:16:06
我希望将字体或静态图像放到画布上，但不确定使用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);
});
);唯一的问题是文本总是被画在顶部，所以我的拖放对象一直在文本后面。我只想让文本保持在背景中，就像静态图像一样，但我认为将字体绘制到画布上可能比让用户下载另一张图像更好。有什么帮助吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-10-12 12:13:22
Matter.js中包含的呈现器实际上只是为了演示，所以最好的方法是复制一个示例Render.js，然后在那里实现所有的呈现(其中Render.world是每个滴答上调用的条目方法)。
将对象名称更改为类似于CustomRenderer的其他内容，然后在Engine.create选项中传递您的呈现类：
var engine = Engine.create({
render: {
element: element,
controller: CustomRenderer
}
});Stack Overflow用户
发布于 2016-02-10 22:24:33
有点晚了，但是这方面的文档显示，在将sprite添加到呈现器中时，使用了正确的方法：
let head = Bodies.circle(450, 50, 17, {
render: {
sprite: {
texture: './img/head.png'
}
}}
);https://github.com/liabru/matter-js/blob/master/examples/sprites.js
(目前还不知道问题的正文部分)
Stack Overflow用户
发布于 2018-11-01 12:38:37
这是如何将函数中的文本字符串作为基本图像返回的方法。
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
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26043360
复制相关文章
点击加载更多
相似问题
烧瓶--如何撤销令牌/注销
Spring security。如何注销用户(撤销oauth2令牌)
Laravel护照单元注销/撤销令牌测试
如何FOSOAuthServerBundle“注销”或更好地撤销令牌
如何注销(即撤销、删除或使令牌失效)？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
