我正在显示有关项目列表的信息,可以选择包含缩略图。如果没有缩略图,则显示一个链接以允许上传图像。
我的问题是:在 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">
<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>
最佳答案
HTML Canvas是100%代码驱动的。
您可以这样获得渲染上下文:
final CanvasElement canvas = query('canvas');
final CanvasRenderingContext2D cctx = canvas.context2d;
//
// drawing code here
//
网上有很多样本讨论如何在 Canvas 上绘画。 Dart中的canvas API与Javascript之间几乎没有什么区别,因此您应该有幸找到所需信息。
更新。如果要访问特定的 Canvas ,则可以向其添加类或ID。
<canvas id='gameCanvas'></canvas>
final CanvasElement canvas = query('#gameCanvas');
<canvas class='score_board'></canvas>
final CanvasElement canvas = query('.score_board');
关于dart - DART在迭代模板中的 Canvas 列表上绘图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14222459/