Рисование DART по списку холстов в повторяющемся шаблоне

Я показываю информацию о списке элементов, который может дополнительно включать миниатюру. Если эскиза нет, отображается ссылка для загрузки изображения.

Мой вопрос: как лучше всего рисовать, когда это необходимо на холстах? (Смотри ниже). Мне нужно инициировать вызов кода, а затем также идентифицировать каждый холст, чтобы он получил соответствующее изображение.

Я знаю, что все это делается путем создания элементов в коде, но я хотел бы использовать механизм шаблонов 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>

dart dart-webui
person Peter B    schedule 08.01.2013    source источник
comment
Этот код внутри пользовательского элемента?   -  person Seth Ladd    schedule 09.01.2013
comment
Удовлетворены ли вы ответом Сета ниже? Если да, то вы не против одобрить его?   -  person Shannon -jj Behrens    schedule 10.01.2013

Ответы (2)


arrow_upward
1
arrow_downward

HTML Canvas на 100% управляется кодом.

Вы можете получить контекст рендеринга следующим образом:

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

В Интернете много примеров, обсуждающих, как рисовать на холсте. Существует очень небольшая разница между API холста в Dart и Javascript, поэтому вам должно повезти найти информацию о том, что вам нужно.

Обновить. Если вы хотите получить доступ к определенному холсту, вы можете добавить к нему класс или идентификатор.

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

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

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

final CanvasElement canvas = query('.score_board');
person Kevin Moore    schedule 08.01.2013
comment
Спасибо за ответ, но видимо смысл моего вопроса вам не ясен (немного отредактирую). Я знаю, что мне нужно рисовать на холсте с помощью кода, суть в том, как найти все холсты и запустить код для их рисования. query('canvas') не будет работать - какой холст? И как будет вызываться ваш код? - person Peter B; 09.01.2013

arrow_upward
0
arrow_downward

Вы можете добавить идентификатор к элементу холста, после чего легко получите ссылку на него.

Попробуйте что-то вроде:

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

Затем вы можете найти элемент с помощью:

query('#the-id-of-the-element')
person Seth Ladd    schedule 09.01.2013
comment
Кажется, Дарт этого не позволяет. См. stackoverflow.com/questions/14038618/ . Решением этих аспектов является использование атрибутов data-*. Во-вторых, я не уверен, как будет вызываться код - кажется, что нужно псевдособытие, как в ‹template iterate=... on-rendercomplete=drawOnTheCanvasesNow()›? - person Peter B; 10.01.2013