Skip to content

Commit 1840195

Browse files
ics-ikedaics-ikeda
committed
ペイントの解説を追加
1 parent 1414352 commit 1840195

8 files changed

Lines changed: 442 additions & 0 deletions

File tree

‎docs/paint.md‎

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
# CreateJS でお絵描きアプリを作ろう
2+
3+
4+
HTML5の`canvas`タグを使ってお絵描きアプリケーションを作ってみましょう。今回のサンプルは3段階で解説します。簡単な線を描くサンプル、お絵かきのための基本機能を説明したサンプル、そして本格的なお絵かき機能のサンプルです。
5+
6+
## ステップ1：JavaScriptで直線を描画する
7+
8+
まずは今までのCreateJS入門サイトの復習もかねて、頂点をつなぎあわせてラインを描くコードを作ってみましょう。
9+
10+
背景には方眼紙の背景画像を配置しています。方眼紙を敷いておけば座標がわかりやすくなるため、どの位置に線を描いているのか確認に役立ちます。なお、CreateJSでは画面の左上が`(0, 0)`座標で右方向にX座標が大きくなり、下方向にY座標が大きくなります。
11+
12+
![](../imgs/paint_step1.png)
13+
14+
- [サンプルを再生する](https://ics-creative.github.io/tutorial-createjs/samples/paint_step1.html)
15+
- [サンプルのソースコードを確認する](../samples/paint_step1.html)
16+
17+
### 線の描画手順
18+
19+
線や図形を描くには、表示オブジェクトとなる`createjs.Shape`クラスを利用します。`createjs.Shape`クラスのインスタンスを作成し、画面上に`addChild()`メソッドを使って配置します。
20+
21+
```js
22+
// Stageオブジェクトを作成。表示リストのルートになります。
23+
var stage = new createjs.Stage("myCanvas");
24+
25+
// 描画をするためのシェイプを作成
26+
var shape = new createjs.Shape();
27+
28+
// シェイプをステージに配置
29+
stage.addChild(shape);
30+
```
31+
32+
### 線のスタイルを設定
33+
34+
線を描画する手順としては、線のスタイルを設定し、開始点と終点の指定という2段階の手続きをとります。`createjs.Shape`インスタンスに存在する`graphics`プロパティ(`createjs.Graphics`クラス)を使って描画関数を呼びだします。
35+
`beginStroke()`メソッドで塗りの色を指定します。
36+
37+
```js
38+
// 線のスタイルを設定
39+
shape.graphics
40+
.beginStroke("DarkRed"); // 赤色で線の描画を開始
41+
```
42+
43+
44+
### 線を描画する
45+
46+
線を描画するのは`moveTo()`メソッドと`lineTo()`メソッドです。`moveTo()`メソッドで開始点を指定し、`lineTo()`メソッドで指定位置まで線を描画します。`lineTo()`メソッドを連続して呼び出すと、前回の線の描画の終了位置から線を再描画するので、折れ線が描画されます。
47+
48+
```js
49+
// 線の曲線を指定
50+
shape.graphics
51+
.moveTo(100, 100) // 描画開始位置を指定
52+
.lineTo(300, 400) // 線の終了位置を指定
53+
.lineTo(700, 200);
54+
```
55+
56+
## ステップ2：マウスドラッグによる線の描画
57+
58+
マウスのドラッグ＆ドロップを制御してお絵かきの基本機能を作っていきましょう。
59+
60+
![](../imgs/paint_step2.png)
61+
62+
- [サンプルを再生する](https://ics-creative.github.io/tutorial-createjs/samples/paint_step2.html)
63+
- [サンプルのソースコードを確認する](../samples/paint_step2.html)
64+
65+
66+
### マウスのドラッグで線を描画する手順
67+
68+
マウスのドラッグで線を描画するためには、マウスをダウンしている時のみ描画処理を行い、ドラッグした位置に線を描画するという処理手順となります。
69+
70+
マウスの左ボタンを押した時の反応は、`stage`インスタンスに対して`stagemousedown`イベントを監視することでチェックできます。`stagemousedown`イベントが発生したら`handleDown()`関数が呼び出されるように指定します。
71+
72+
73+
```js
74+
// ステージ上でマウスボタンを押した時のイベント設定
75+
stage.addEventListener("stagemousedown", handleDown);
76+
77+
// マウスを押した時に実行される
78+
function handleDown(event) {
79+
// ・・・
80+
}
81+
```
82+
83+
### マウスのドラッグ開始時の処理
84+
85+
`handleDown()`関数では描画を始める準備をします。線の開始点はマウス座標を指定するのですが、`event`引数の`stageX`と`stageY`プロパティーを使います。また、この関数では同時にマウスの移動とマウスボタンの離したタイミングを監視するために、`stagemousemove`イベントと`stagemouseup`イベントを`addEventListener()`メソッドで登録しています。
86+
87+
```js
88+
// マウスを押した時に実行される
89+
function handleDown(event) {
90+
// 線の描画を開始
91+
shape.graphics
92+
.beginStroke("DarkRed") // 青色で、描画を開始
93+
94+
shape.graphics.moveTo(event.stageX, event.stageY) // 描画開始位置を指定
95+
96+
// ステージ上でマウスを動かした時と離した時のイベント設定
97+
stage.addEventListener("stagemousemove", handleMove);
98+
stage.addEventListener("stagemouseup", handleUp);
99+
}
100+
101+
// マウスが動いた時に実行する
102+
function handleMove(event) {
103+
// ・・・
104+
}
105+
106+
// マウスボタンが離された時に実行される
107+
function handleUp(event) {
108+
// ・・・
109+
}
110+
```
111+
112+
113+
### マウスのドラッグ中の処理
114+
115+
マウスを押した状態でマウスを動かした時のみ、`handleMove(event)`関数が呼び出されます。この時、「過去の位置からマウスをドラッグした位置まで線を描画する」という処理を`lineTo()`メソッドで実現します。マウスを移動する度に`handleMouseMove()`メソッドが繰り返し呼び出されるために、連続して線が描かれます。
116+
117+
```js
118+
// マウスが動いた時に実行する
119+
function handleMove(event) {
120+
// マウス座標への線を引く
121+
shape.graphics
122+
.lineTo(event.stageX, event.stageY);
123+
}
124+
```
125+
126+
### マウスのドロップ時の処理
127+
128+
マウスボタンを離したときには`handleUp(event)`関数が呼び出されます。この関数では線の描画を終了させるため、`endStroke()`メソッドを使います。また、マウスボタンを離したタイミングで、イベントの監視は不要になるため、`removeEventListener()`メソッドでイベントを解除します。
129+
130+
```js
131+
// マウスボタンが離された時に実行される
132+
function handleUp(event) {
133+
// マウス座標への線を引く
134+
shape.graphics
135+
.lineTo(event.stageX, event.stageY);
136+
137+
// 線の描画を終了する
138+
shape.graphics.endStroke();
139+
140+
// イベント解除
141+
stage.removeEventListener("stagemousemove", handleMove);
142+
stage.removeEventListener("stagemouseup", handleUp);
143+
}
144+
```
145+
146+
147+
## ステップ3：お絵かきコンテンツの作成
148+
149+
色や太さの変更ができるようにお絵かきコンテンツの機能を充実させてみよう。HTML側に配置したパーツとの連携します。
150+
151+
![](../imgs/paint_step3_custom.png)
152+
153+
- [サンプルを再生する](https://ics-creative.github.io/tutorial-createjs/samples/paint_step3.html)
154+
- [サンプルのソースコードを確認する](../samples/paint_step3.html)
155+
156+
157+
### 画面パーツの設計
158+
159+
お絵かきコンテンツにはカラーパレットなどのUI（ユーザーインターフェース）の機能が必要です。これらの画面パーツは、HTMLを使って作成するのが簡単です。HTMLには`input`タグで基本的なユーザーインターフェースを作成できます。HTMLを使って色やサイズを設定する画面パーツを作ってHTML5 Canvas機能と連携させましょう。
160+
161+
```html
162+
<div>
163+
<input id="inputColor" type="color" value="#ff0000">
164+
<button id="buttonSave">保存</button>
165+
<button id="buttonReset">リセット</button>
166+
</div>
167+
```
168+
169+
`input`タグで`type="color"`の種類を指定すると、カラーパレットを使えます。
170+
171+
### 色の値の取得
172+
173+
お絵描きの線の色は`input`タグの`value`値を使います。`document.querySelector()`メソッドは、HTML要素を参照するメソッドですが、これを使って`input`タグの値を参照します。
174+
175+
```js
176+
// マウスを押した時に実行される
177+
function handleDown(event) {
178+
179+
var paintColor = document.querySelector("#inputColor").value;
180+
181+
// 線の描画を開始
182+
shape.graphics
183+
.beginStroke(paintColor) // 任意のカラーで描画
184+
.moveTo(event.stageX, event.stageY); // 描画開始位置を指定
185+
186+
// ・・・
187+
}
188+
```
189+
190+
### リセットボタンの制御
191+
192+
リセットボタンでは、JavaScriptの`confirm()`メソッドを呼び出し、グラフィックのリセットの前に確認のダイアログを表示するようにします。グラフィックのリセットは、`shape.graphics.clear()`メソッドで行います。
193+
194+
```js
195+
// リセットボタンの処理
196+
document.querySelector("#buttonReset").addEventListener("click", function(){
197+
var result = confirm("リセットしてもよろしいですか？");
198+
if(result == true){
199+
// シェイプのグラフィックスを消去
200+
shape.graphics.clear();
201+
}
202+
});
203+
```
204+
205+
### 保存ボタンの制御
206+
207+
保存機能については、`canvas`タグの`toDataURL()`メソッドを使うことで画像をBase64文字列で取得することができます。Base64文字列を新しいウインドウで開くことで画像として表示することができるので、これを保存機能としましょう。
208+
209+
```js
210+
// 保存ボタンの処理
211+
document.querySelector("#buttonSave").addEventListener("click", function(){
212+
// Canvasタグから画像に変換
213+
var png = stage.canvas.toDataURL();
214+
// 新規ウインドウで画像を表示
215+
window.open(png);
216+
});
217+
```
218+
219+
以上でシンプルなお絵描きアプリが完成しました。本格的なお絵描きツールにするために、さらに作り込んでください。
220+
221+
222+
<article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
223+
<article-date-published>2016-10-18</article-date-published>
224+
<article-date-modified>2016-10-18</article-date-modified>

‎imgs/paint_step1.png‎

35.4 KB
Loading

‎imgs/paint_step2.png‎

35.4 KB
Loading

‎imgs/paint_step3_custom.png‎

448 KB
Loading

‎samples/imgs/bg_ruler.png‎

25.6 KB
Loading

‎samples/paint_step1.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<link rel="stylesheet" href="css/base.css">
6+
<style>
7+
/* canvas タグの背景にルーラーを指定 */
8+
#myCanvas {
9+
background: url(imgs/bg_ruler.png) no-repeat;
10+
}
11+
</style>
12+
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
13+
<script>
14+
window.addEventListener("load", init);
15+
function init() {
16+
// Stageオブジェクトを作成。表示リストのルートになります。
17+
var stage = new createjs.Stage("myCanvas");
18+
19+
// 描画をするためのシェイプを作成
20+
var shape = new createjs.Shape();
21+
22+
// シェイプをステージに配置
23+
stage.addChild(shape);
24+
25+
// 線のスタイルを設定
26+
shape.graphics
27+
.beginStroke("DarkRed"); // 赤色で線の描画を開始
28+
29+
// 線の曲線を指定
30+
shape.graphics
31+
.moveTo(100, 100) // 描画開始位置を指定
32+
.lineTo(300, 400) // 線の終了位置を指定
33+
.lineTo(700, 200);
34+
35+
stage.update(); // Stageの描画を更新
36+
}
37+
</script>
38+
</head>
39+
<body>
40+
<canvas id="myCanvas" width="960" height="540"></canvas>
41+
</body>
42+
</html>

‎samples/paint_step2.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<link rel="stylesheet" href="css/base.css">
6+
<style>
7+
/* canvas タグの背景にルーラーを指定 */
8+
#myCanvas {
9+
background: url(imgs/bg_ruler.png) no-repeat;
10+
}
11+
</style>
12+
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
13+
<script>
14+
window.addEventListener("load", init);
15+
function init() {
16+
// Stageオブジェクトを作成。表示リストのルートになります。
17+
var stage = new createjs.Stage("myCanvas");
18+
19+
// タッチイベントが有効なブラウザの場合、
20+
// CreateJSでタッチイベントを扱えるようにする
21+
if (createjs.Touch.isSupported()) {
22+
createjs.Touch.enable(stage);
23+
}
24+
25+
var shape = new createjs.Shape(); // シェイプを作成
26+
stage.addChild(shape); // ステージに配置
27+
28+
// ステージ上でマウスボタンを押した時のイベント設定
29+
stage.addEventListener("stagemousedown", handleDown);
30+
31+
// マウスを押した時に実行される
32+
function handleDown(event) {
33+
// 線の描画を開始
34+
shape.graphics
35+
.beginStroke("DarkRed") // 青色で、描画を開始
36+
37+
shape.graphics.moveTo(event.stageX, event.stageY) // 描画開始位置を指定
38+
39+
// ステージ上でマウスを動かした時と離した時のイベント設定
40+
stage.addEventListener("stagemousemove", handleMove);
41+
stage.addEventListener("stagemouseup", handleUp);
42+
}
43+
44+
// マウスが動いた時に実行する
45+
function handleMove(event) {
46+
// マウス座標への線を引く
47+
shape.graphics
48+
.lineTo(event.stageX, event.stageY);
49+
}
50+
51+
// マウスボタンが離された時に実行される
52+
function handleUp(event) {
53+
// マウス座標への線を引く
54+
shape.graphics
55+
.lineTo(event.stageX, event.stageY);
56+
57+
// 線の描画を終了する
58+
shape.graphics.endStroke();
59+
60+
// イベント解除
61+
stage.removeEventListener("stagemousemove", handleMove);
62+
stage.removeEventListener("stagemouseup", handleUp);
63+
}
64+
65+
createjs.Ticker.timingMode = createjs.Ticker.RAF;
66+
createjs.Ticker.addEventListener("tick", onTick);
67+
function onTick() {
68+
stage.update(); // Stageの描画を更新
69+
}
70+
}
71+
</script>
72+
</head>
73+
<body>
74+
<canvas id="myCanvas" width="960" height="540"></canvas>
75+
</body>
76+
</html>

0 commit comments

Comments
 (0)