Что мне нужно, чтобы нарисовать изображение?

Следующий код должен рисовать изображения при перемещении мыши в полотне после выбора его в панели инструментов:Что мне нужно, чтобы нарисовать изображение?

метод

import 'dart:html'; 


    class Test { 
     ImageElement toolbar_selected_element = new ImageElement(); 
     CanvasElement canvas; 
     var loaded_image_toolbar = false; 
     var mouseX = null, mouseY = null; 

     void main() { 
     canvas = query("#canvas"); 
     canvas.onMouseMove.listen(canvas_OnMouseMove); 
     query(".toolbuton").onDragStart.listen(toolbar_button_OnClick); 
     } 

     void toolbar_button_OnClick(MouseEvent event) { 
     toolbar_selected_element.onLoad.listen(tool_button_image_OnLoad); 
     toolbar_selected_element.src = event.target.src; 
     } 

     void tool_button_image_OnLoad(event) { 
     loaded_image_toolbar = true; 
     window.requestAnimationFrame(draw); 
     } 

     void canvas_OnMouseMove(MouseEvent event) { 
     mouseX = event.clientX; 
     mouseY = event.clientY; 
     window.requestAnimationFrame(draw); 
     } 

     void draw(num _) { 
     if(loaded_image_toolbar && mouseX != null && mouseY != null) { 
      CanvasRenderingContext2D context = canvas.context2d; 
      context.drawImage(toolbar_selected_element, mouseX, mouseY); 
     } 
     } 
    } 

    void main() { 
     new Test().main(); 
    }

Жеребьевка вызывается, но изображение не отображается на холсте, что не хватает?

источник

2013-04-19 João Pinto

Я предполагаю, что класс элемента на самом деле toolbutton, а не toolbuton.

Ваш код Dart работает (более или менее) для меня с HTML тела, как это:

<body> 
    <canvas id="canvas"></canvas> 
    <img class="toolbuton" src="./test.png" /> 
</body>

Конечно, так как вы хотите, чтобы выбрать между различными изображениями (я думаю ...), это больше нравится:

<body> 
    <canvas id="canvas"></canvas> 
    <img class="toolbutton" src="./test.png" /> 
    <img class="toolbutton" src="./test2.png" /> 
</body>

, а затем в Test.main(), добавить слушателя для каждого ToolButton, а не только первая:

for (var toolbutton in queryAll('.toolbutton')) { 
    toolbutton.onClick.listen(toolbar_button_OnClick); 
}

Затем я нажимаю на любое изображение и рисую его в позиции курсора на холсте, и я могу переключаться между ними, и я считаю, что вы делаете.

источник

2013-04-19 17:51:38

Что мне нужно, чтобы нарисовать изображение?

ответ

Смежные вопросы