Question

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

我的问题是：画布上需要的最佳绘画方式是什么？（见下文）。我需要触发对代码的调用，然后识别每个画布以便它获得适当的图像。

我知道通过在代码中创建元素来完成所有操作，但我想尽可能使用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
//

网上有很多样本讨论如何绘制到画布。 Dart和Javascript中的canvas API之间差别很小，所以你应该很幸运找到你需要的信息。

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

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

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

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

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

Answer 2

您可以向canvas元素添加ID，然后您可以轻松获得对它的引用。

尝试类似：

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

然后你可以找到元素：

query('#the-id-of-the-element')

在迭代模板中的画布列表上绘制DART

2 个答案: