memonoの手書きCanvas
memonoの手書きは、FAQにも書きましたが、HTML 5.0のCanvasで実装しています。
CanvasはFirefoxやOpera、SafariではほとんどのJavaScriptが使えるんですが、IEではサポートされていないのでexcanvas.jsを使っています。
詳しくはこちらなどもお暇なときに見てください。
主なつくりは
・サーバ側でキャッシュされたページのbodyタグ内にcanvasタグを埋め込んでいる。
→JavaScriptで
document.body.innerHTML=document.body.innerHTML+'<canvas id="mono_canvas"></canvas>';とした場合にIEではうまいことやってくれないためサーバサイドで埋め込んでいます。
・クライアント側で手書きされた内容を保存時に送信し、サーバ側でpng画像として保存している。
・表示時は保存されたpng画像をdrawImageメソッドを使ってcanvasに描画している。
使っているcanvasのメソッドですが、各ブラウザの対応状況は下記な感じです。
| IE(excanvas) | Firefox | Opera | Safari | 内容 | |
| toDataURL | × | ○ | ○ | × | クライアント側の描画内容をPNGとして取得する |
| drawImage | ○ | ○ | ○ | ○ | 画像を表示する |
| moveTo、lineTo | ○ | ○ | ○ | ○ | 線の描画 |
| rect | ○ | ○ | ○ | ○ | 矩形の描画 |
| arc | ○ | ○ | ○ | ○ | 円の描画 |
| clearRect | × | ○ | ○ | ○ | 範囲消去 |
問題なのはclearRectとtoDataURLになります。
clearRectは消しゴムの箇所で実装してますが、IEはサポートできずでした。
clearRect自体はrect範囲の消去なので、moveTo、lineToのように実装するには、こちらのように一次関数を使ってマウスが動いた範囲を消去するような実装になっています。
toDataURLは手書きの保存時に使っています。
表示部分はdrawImageを使えば同じ処理方法で可能なのですが、保存時は同じようにはなりません。
toDataURL自体はpngのbase64形式の情報を取得することができます。
サーバ側に送ってバイナリに変換し保存すればOKなのですが、問題はIEとSafariです。
IEとSafariでは線や矩形などの描画ポイント情報をサーバ側に送ってサーバサイドで保存しています。
といろいろ細かいところはがんばったりしています。
＃Flash使ったほうが楽かも、、、なのですが、なかなか楽しかったのでそれはそれでよしです。
ちなみに、機能的には
・範囲消去
・UNDO機能
・文字の挿入（付箋とのすみわけどうする？？）
などの追加ができればと考えています。
なお、処理自体はhttp://memono.jp/js/mono.jsで行っていますので、興味のある方は見てください。
Posted in memono.jp |