Matter.js : 캔버스에 텍스트 또는 이미지 배치

Question

캔버스에 글꼴이나 정적 이미지를 배치하고 싶지만 Matter.js를 사용하는 것이 가장 좋은 방법인지 모르겠습니다. 지금은 이미지의 경우 크기가 '0'인 본문을 만들고 render.sprite.texture 속성에 이미지 URL을 넣었습니다. 트릭을 수행하는 것처럼 보이지만 정적 이미지를 캔버스에 배치하는 다른/더 좋은 방법이 있습니까? 텍스트가 그려지고 계속

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

만 문제가 : 아무것도 그려/생성되기 전에 또한

, 나는 나의 스크립트의 상단에있는 'afterRender'이벤트를 사용하여 캔버스에 텍스트를 걸었습니다 내 draggable 개체 그래서 텍스트 뒤에 계속 가기. 정적 인 이미지처럼 텍스트가 배경에 머물고 싶지만 캔버스에 글꼴을 그리는 것이 사용자가 다른 이미지를 다운로드하도록하는 것보다 낫다는 것을 알았습니다. 어떤 도움이 필요합니까?

Answer 1

Matter.js에 포함 된 렌더러는 실제로 데모 용으로 만 사용되므로 가장 좋은 방법은 예제 Render.js을 복사 한 다음 모든 렌더링을 구현하는 것입니다 (여기서 Render.world은 각각에 호출 된 입력 방법입니다). 진드기).

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

Answer 2

조금 늦게하지만,이 설명서는 당신이를 추가하는 올바른 방법을했다 보여줍니다

변경 다른 CustomRenderer 같은 개체 이름 다음 Engine.create 옵션에서 통해 렌더링 클래스를 통과 렌더러에 스프라이트 없습니다 : 약

let head = Bodies.circle(450, 50, 17, { 
       render: { 
        sprite: { 
         texture: './img/head.png' 
        } 
       }} 
      ); 

https://github.com/liabru/matter-js/blob/master/examples/sprites.js

(어떤 생각을 질문의 텍스트 부분, 아직)