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
//

网上有很多示例讨论如何绘制到画布上。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');
于 2013-01-08T21:05:55.030 回答
0

您可以为您的画布元素添加一个 ID，然后您可以轻松地获得对它的引用。

尝试类似：

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

然后你可以找到元素：

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