月別: 2013年4月

Painting

3DS向けのはてなハイク投稿用ペイントツール・Paintingが出来たでヽ( ・∀・)ノ
(URLはFoto-Haikingと一緒)

※認証方式変更後、修正してないので公開停止中

ついでにFoto-Haikingとjjkを統合して余計なオプションをなくしたヽ( ・∀・)ノ


2秒間画面をタッチしてないと描画モード(ドラッキングモード)にならないので
使い勝手はどうかなと思うけれども、ボチボチ満足(・∀・)

アンドゥ(リドゥ)は当初20回くらい出来るようにしていたが、実際の送信時のbmp変換で
グレーフリーズ(メモリ容量不足で画面が灰色になり更新以外の操作が不能な状態)に
なってしまうので、5回に減らした。もしかしたらもう数回も大丈夫かもしれないが
3DSブラウザのメモリがどうなってるかわからないので無理はしないことにしたw

今のアンドゥ機能は複数枚のキャンバスを使いまわすという方法なので、
変化の有った場所のみを記録するようにすれば、もっとメモリを節約が出来るとは
思うけれども、そこまで頑張る気力も脳みそもない(ノ∀`)

コードの最適化とか短縮化は途中までやったけど最後まではやってない(ノ∀`)


全てのページが直接関係しているわけではありませんが、以下は参考にしたページ、エントリです。まだ他にもあったような気がするけれども思い出せない…(“・ω・゙)

描画
3DSPAINT

色一覧
CSS3 color

キャンバス
HTML5.JP
canvas要素の基本的な使い方まとめ
[html5] canvasに描いた絵(画像)をサーバに保存
Canvasによる画像ファイル(img要素)の読み書き
[html5] canvasで簡単なお絵かきをしてみたメモ
CANVASで作った画像をバイナリ変換し、ファイルアップロード形式でPOST送信する
canvas描画した画像の保存方法
HTML5でお絵かきツールを作ってみた

塗り潰し
(1)シード・フィル アルゴリズム
(2)アルゴリズムの高速化
JavaScript, Canvas スキャンライン・シードフィル アルゴリズムによる塗り潰し
JavaScriptでバケツ塗りつぶし

アンドゥ(リドゥ)
Undo and Redo with HTML5 Canvas

bmp変換
canvas2image.js

その他
動的に JavaScriptを読み込む
eventオブジェクトから取得できる座標プロパティ
マウス座標のこととブックマークレットのことと
みみちゃんblog – プログラムの園

Canvasをいじるチュートリアル
HTML5のCanvasで作る、Flash不要のお絵かきツール
HTML5とjQueryでブラウザーがペイントツールに!


ごっぐるの日本語入力CGIの力を借りていることや、ドラッキングモードでの
描画の使いにくさ等々の不満というか残念さは残るものの、一番最初に作ろうって
思い描いた感じになったからこれでいいかなぁ(・∀・)

やはり3DS上の操作だけで完結するWebサービス(ツール)というのに無理があったな…
もう少し頑張ればもっと機能の追加も出来るだろうけれどもやめておこう(ヽ’ω`)

次はandroidやjava libraryの作り方を勉強するかな(ヽ’ω`)
とか言いつつもう遊んでられないんだけども。