dart - DART在迭代模板中的 Canvas 列表上绘图

Question

我正在显示有关项目列表的信息，可以选择包含缩略图。如果没有缩略图，则显示一个链接以允许上传图像。

我的问题是:在 Canvas 上需要时进行绘画的最佳方法是什么？ (见下文)。我需要触发对代码的调用，然后还要标识每个 Canvas ，以便获取适当的图像。

我知道这一切都是通过在代码中创建元素来完成的，但是如果可能的话，我想使用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>  

Answer 1

HTML Canvas是100％代码驱动的。

您可以这样获得渲染上下文:

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

网上有很多样本讨论如何在 Canvas 上绘画。 Dart中的canvas API与Jav​​ascript之间几乎没有什么区别，因此您应该有幸找到所需信息。

更新。如果要访问特定的 Canvas ，则可以向其添加类或ID。

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

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

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

final CanvasElement canvas = query('.score_board');