2014年3月29日土曜日

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

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

その他参考書籍

コード

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)
);
}
```