Dart - 図形の描画(CanvasElement class, Timer class, Duration classで簡単なAnimationをいくつか作成)

Dart: Up and Running
(O'Reilly Media)
Kathy Walrath Seth Ladd (著)
[Kindle版]
このブログでの感想

開発環境

• OS X Mavericks - Apple (OS)
• Dart Editor (開発環境)
• Dartium | Dart/ Structured web apps (ブラウザ, Dart VM 用 (Chromium with the Dart VM))
• Safari (ブラウザ, JavaScript 用)
• Dart (プログラミング言語)

Head First Java 第2版 ―頭とからだで覚えるJavaの基本(Kathy Sierra (著)、Bert Bates (著)、島田 秋雄 (監修)、神戸 博之 (監修)、高坂 一城 (監修)、夏目 大 (翻訳)、オライリージャパン)の12章(GUIの基礎)、自分で考えてみよう(p.385))をDartで考えてみる。

その他参考書籍

• What is Dart? [Kindle版] (O'Reilly Media) Kathy Walrath Seth Ladd (著) このブログでの感想

自分で考えてみよう(p.385)

コード

sample.dart

import 'dart:html';
import 'dart:math' as math;
import 'dart:async' as async;

void main() {
  div.style
      ..width = '650px'
      ..height = '650px'
      ..border = 'solid';
  canvas
      ..width = 650
      ..height = 650;
  div.append(canvas);
  buttons.style.width = '100px';
  animation_start1.onClick.listen((MouseEvent event) {
    clear(0, 0, 650, 650);
    x = 50;
    y = 50;
    draw(2, 2, (int x) => x < 600);
  });
  animation_start2.onClick.listen((MouseEvent event) {
    clear(0, 0, 650, 650);
    x = 50;
    y = 100;
    draw(2, 0, (int x) => x < 600);
  });
  animation_start3.onClick.listen((MouseEvent event) {
    clear(0, 0, 650, 650);
    x = 600;
    y = 100;
    draw(-2, 0, (int x) => x > 50);
  });
  animation_start4.onClick.listen((MouseEvent event) {
    clear(0, 0, 650, 650);
    x = 600;
    y = 50;
    draw(-2, 2, (int x) => x > 50);
  });
  animation_start5.onClick.listen((MouseEvent event) {
    clear(0, 0, 650, 650);
    x = 50;
    y = 600;
    draw(2, -2, (int x) => x < 600);
  });
  animation_start6.onClick.listen((MouseEvent event) {
    clear(0, 0, 650, 650);
    x = 600;
    y = 600;
    draw(-1, -1, (int x) => x > 50);
  });
}

DivElement div = querySelector('#d0');
ButtonElement animation_start1 = querySelector('#animation_start1');
ButtonElement animation_start2 = querySelector('#animation_start2');
ButtonElement animation_start3 = querySelector('#animation_start3');
ButtonElement animation_start4 = querySelector('#animation_start4');
ButtonElement animation_start5 = querySelector('#animation_start5');
ButtonElement animation_start6 = querySelector('#animation_start6');
ElementList buttons = querySelectorAll('.animation_start');
CanvasElement canvas = new CanvasElement();
CanvasRenderingContext2D ctx = canvas.context2D;
int x;
int y;
async.Timer t;
Duration duration = Duration.ZERO;

void clear(int a, int b, int c, int d) {
  if (t != null) {
    t.cancel();
  }
  ctx
      ..beginPath()
      ..fillStyle = 'white'
      ..strokeStyle = 'white'
      ..rect(a, b, c, d)
      ..fill();
}

void draw(int a, int b, bool compare(int x)) {
  if (compare(x)) {
    clear(x - 25 - a, y - 25 - b, 50, 50);
    ctx
        ..beginPath()
        ..arc(x, y, 25, 0, 2 * math.PI)
        ..fillStyle = 'red'
        ..strokeStyle = 'red'
        ..fill();
    div.innerHtml = '';
    div.append(canvas);
  } else {
    return;
  }
  x += a;
  y += b;
  t = new async.Timer.periodic(duration, (async.Timer t) => draw(a, b, compare)
      );
}