1

次のコードは、ツールバーでキャンバスを選択した後、マウスがキャンバス内を移動している間に画像を描画する必要があります。

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

draw メソッドが呼び出されましたが、画像がキャンバスに表示されません。何が欠けていますか?

4

1 に答える 1

3

要素クラスは実際に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()、最初のツールボタンだけでなく、ツールボタンごとにリスナーを追加します。

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

次に、いずれかの画像をクリックして、キャンバスのカーソル位置に描画します。それらを切り替えることができます。これは、あなたが意図していたことだと思います。

于 2013-04-19T17:51:38.900 に答える