DART在迭代模板中繪製畫布列表

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畫布是100％的代碼驅動。

你可以得到渲染上下文像這樣：

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

有許多樣品都在網上討論如何繪製到畫布上。 Dart和Javascript中的畫布API之間幾乎沒有什麼區別，所以你應該有好運氣找到你需要的信息。

更新。如果你想訪問一個特定的畫布，你可以添加一個類或ID給它。

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

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

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

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

Answer 2

您可以添加一個ID到你的canvas元素，那麼你可以很容易地找到它的參考。

嘗試類似：

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

然後你就可以找到該元素：

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