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 回答