html Matter.js：在画布上放置文本或图像

moiiocjp 于 2022-12-16 发布在其他

关注(0)|答案(4)|浏览(221)

我想把字体或静态图像放到画布上，但不确定使用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);
    });
);

唯一的问题是文本总是被画在上面，所以我的可拖动对象总是在文本后面。我只是想让文本留在背景中，像一个静态图像，但我认为把字体画在画布上可能比让用户下载另一个图像更好。有什么帮助吗？

Html

来源：https://stackoverflow.com/questions/26043360/matter-js-placing-text-or-images-on-the-canvas

4条答案

按热度按时间

ctehm74n1#

Matter.js中包含的渲染器实际上仅用于演示，因此最好的做法是复制示例Render.js，然后在其中实现所有渲染（其中Render.world是在每个tick上调用的入口方法）。
将对象名称更改为CustomRenderer之类的其他名称，然后在Engine.create选项中传递渲染类：

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

赞(0）回复(0）举报 2022-12-16

pobjuy322#

有点晚了，但是文档说明了将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
(No对问题的文本部分有什么想法，还没有）

赞(0）回复(0）举报 2022-12-16

isr3a4wc3#

这就是在函数中返回文本字符串作为基图像的方法

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
  }
}

赞(0）回复(0）举报 2022-12-16

epfja78i4#

Matter.js的默认渲染器并不是真的要这样使用，大多数情况下，您希望使用自定义渲染器（如liabu talked about）或将Matter连接到DOM元素（如this post cover）。

赞(0）回复(0）举报 2022-12-16