1

オプションでサムネイルを含めることができるアイテムのリストに関する情報を表示しています。サムネイルがない場合は、画像をアップロードできるリンクが表示されます。

私の質問は、必要なときにキャンバスに描画する最良の方法は何ですか? （下記参照）。コードの呼び出しをトリガーし、各キャンバスを識別して適切な画像を取得する必要があります。

コードで要素を作成することですべてが完了することはわかっていますが、可能であれば webui テンプレート メカニズムを使用したいと考えています。

      <template iterate="i in gItems.order">
        <template if="preItemDisplay(i) == true">
          <template if="gItemShowThumb == true">             
            <div template if="gItems.map[i].thumb == null">
              &nbsp;
              <span class="clickable" on-click="uploadItemImageClick(i)">
                Add image...
                </span>
              </div>  

            <canvas template if="gItems.map[i].thumb != null" width="80px" height="60px">
              </canvas>    <!-- ? How to draw on this canvas? -->

            </template>  
          </template>  
        </template>
4

2 に答える 2

1

HTML Canvasは100％コード駆動型です。

次のようなレンダリングコンテキストを取得できます。

final CanvasElement canvas = query('canvas');
final CanvasRenderingContext2D cctx = canvas.context2d;
//
// drawing code here
//

キャンバスに描画する方法を議論する多くのサンプルがWeb全体にあります。DartとJavascriptのcanvasAPIにはほとんど違いがないため、必要な情報を見つけることができれば幸いです。

更新します。特定のキャンバスにアクセスする場合は、クラスまたはIDを追加できます。

<canvas id='gameCanvas'></canvas>

final CanvasElement canvas = query('#gameCanvas');

<canvas class='score_board'></canvas>

final CanvasElement canvas = query('.score_board');
于 2013-01-08T21:05:55.030 に答える
0

canvas 要素に ID を追加すると、その参照を簡単に取得できます。

次のようなものを試してください：

<canvas id="{{i.someIdentifierOnOrder}}" template ...

次に、次の要素を見つけることができます。

query('#the-id-of-the-element')
于 2013-01-09T13:35:17.980 に答える