다트 캔버스가 그림이 아닙니다.

Question

캔버스와 다트를 사용하여 이미지를 렌더링하려고 시도했지만 운이별로 없습니다.

아무도 올바른 방향으로 나를 가리킬 수 있습니까? 첨부 된 코드를 참조하십시오.

import 'dart:html'; 

class Board{ 

    CanvasElement canvas; 
    CanvasRenderingContext2D context; 

    Board(){ 
    canvas = new CanvasElement(width: 600, height: 600); 
    context = canvas.context2D; 
    } 

    getCanvas(){ 
    return canvas; 
    } 

    getContext(){ 
    return context; 
    } 

} 

class Player{ 

    ImageElement player; 
    CanvasRenderingContext2D context; 
    CanvasElement canvas; 

    Player(theCanvas, theContext){ 
    canvas = theCanvas; 
    context = theContext; 
    } 

    drawPlayer(){ 
    player = new Element.tag("img"); 
    player.id = "#thePlayer"; 
    player.src = "img/player.png"; 
    context.drawImage(player, 100, 100); 
    } 

    getPlayer(){ 
    return player; 
    } 

} 

void main() { 
    Board b = new Board(); 
    Player p = new Player(b.getCanvas(), b.getContext()); 
    p.drawPlayer(); 

} 

Answer 1

이것은 Dart VM이 실행될 때까지 이미지가 서버에서로드되지 않았기 때문입니다.

이것을 바로 잡기 위해 플레이어를 보여주기 전에 이미지가로드되었는지 확인했습니다.

player.onLoad.listen((value) => context.drawImage(player, 0, 0));