Windows 8ストアアプリでペイントツールを作ってみた[JS]
タッチして指で書けるペイントツールを作ってみようと思いました。
ただ、C#だと色々と面倒くさそうな予感がしたのでtmlib.jsあたりを使ってサクッと出来るかなーと思ったらなんか色々とエラーが出たので断念。※エラーの詳細を見るほどのモチベーションは無かった
そこでふと思ったのが世の中にはHTML5というものがあってHTML5にはcanvasがあるじゃないかと気付き、方向転換。
結果的に割と簡単にできたのでここで紹介します。
必要なファイルはたったの３ファイルです。
まず最初に土台となるHTMLをご説明します。
[default.html]
<!DOCTYPE html>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<metacharset="utf-8"/>
<title>WhiteBoard</title>
<!-- WinJS 参照 -->
<linkhref="//Microsoft.WinJS.1.0/css/ui-dark.css"rel="stylesheet"/>
<scriptsrc="//Microsoft.WinJS.1.0/js/base.js"></script>
<scriptsrc="//Microsoft.WinJS.1.0/js/ui.js"></script>
<canvasid="mycanvas"width="1400"height="800"></canvas>
<!-- simplepaint 参照 -->
<linkhref="/css/default.css"rel="stylesheet"/>
<scriptsrc="/js/default.js"></script>
</head>
<body>
</body>
</html>
ご覧の通り、自分の書いた部分はcanvasの定義しただけです。
次に飾りつけのCSS
[default.css]
body {background-color:#fff
}
@media screen and(-ms-view-state: fullscreen-landscape){
}
@media screen and(-ms-view-state: filled){
}
@media screen and(-ms-view-state: snapped){
}
@media screen and(-ms-view-state: fullscreen-portrait){
ホワイトボードっぽくしたかっただけなのでbackgroundを白くしただけです。
見た目の部分はこれだけで完了。
いざ、実行。
こんな感じで愚直に真っ白なキャンバスが画面いっぱいに表示されます。
さー、ここに実際にタッチで描画する処理をJSで書いてあげましょう。
[default.js]※app.start();のあと
var drawFlag =false;
var oldX =0;
var oldY =0;
window.addEventListener("load",function(){
can = document.getElementById("mycanvas");
can.addEventListener("mousemove", draw,true);
can.addEventListener("mousedown",function(e){
drawFlag =true;
oldX = e.clientX;
oldY = e.clientY;
},false);
can.addEventListener("mouseup",function(){
drawFlag =false;
},false);
context = can.getContext("2d");
context.strokeStyle ="rgba(0,0,0,1)";
context.lineWidth =5;
},true);
//描画するところ
function draw(e){
if(!drawFlag)return;
var x = e.clientX;
var y = e.clientY;
// var can = document.getElementById("mycanvas");
//context.beginPath();
context.moveTo(oldX, oldY);
context.lineTo(x, y);
context.stroke();
//context.closePath();
oldX = x;
oldY = y;
}
})();
この辺はHTML5 のサンプルから土台を持ってきたのですが、
そのサンプルがstaticの使い方がおかしかったりしてレンダリングが飛んだりしたのでその辺はちょっとカスタマイズしました。
ここで気付いたのがイベント処理自体はWeb同様にmousemoveとか書いて大丈夫だってところです。
まあ、タッチパネル搭載してないWin8もゴロゴロいるので当たり前といえば当たり前なのですが。
で、実行してみました。
書けた。
この手書き感溢れるクオリティがたまらないですね。
AndroidとかiPadで手書きアプリって本当に使ってる人いるのだろうか。
ちょっとレンダリングの都合上、カスれてるところもあるのですが、そこはチューニング次第で何とでもなるかと思います。
（個人的には書く事が目的だったのでやりません）
ちなみに書いたものは消せないし、色も太さも変えられないので、このままツールにするには厳しいかもしれませんが、
タブレットとかでは需要のある機能かもしれないので自由にカスタマイズの参考としてください。
明日はC#でマニアックにAcynkTask的なものをご紹介します。
（いったい何人が得するのか分かりませんが）
では。
