手書き風お絵かきアプリ 📖

手書き風描画プラグインのテスト。あるいはこれまたクジラ飛行机氏のPython+JSON本を参考になぜかなでしこで遊んでみたやつ。実用性皆無な再生機能があります。保存はJSONファイルです。画像を保存したい場合はキャンバスで名前を付けて画像を保存しましょうｗ

プログラム: (→大)
＃手書き風お絵かきアプリ ！『https://n3s.nadesi.com/plain/Rough.nako3』を取り込む。 ！『https://n3s.nadesi.com/plain/nadesiko3-FileReader.js』を取り込む。 描画中キャンバスの「高さ」に「300」をDOM属性設定。 ＃ 初期値 3にラフ描画粗さ設定。 2にラフ描画歪み設定。 3に線太設定。 「#000000」に線色設定。 「#FF0000」に塗り色設定。 「斜線」にラフ塗り方設定。 9にラフ塗り線間隔設定。 1にラフ塗り線太さ設定。 -41にラフ塗り線傾き設定。 ＃変数 フリー間引きカウンタ＝０。 描画中フラグ＝オフ。 マウス初期位置＝空配列。 描画データ＝空配列。 描画中データ＝空配列。 保留中データ＝空配列。 描画種別＝「フリー」 描画粗さ＝ラフ描画オプション["roughness"]。 描画歪み＝ラフ描画オプション["bowing"]。 線色＝線色取得。 線太さ＝線太さ取得。 塗り色＝塗り色取得。 塗り線太さ＝ラフ描画オプション["fillWeight"]。 塗り線間隔＝ラフ描画オプション["hachureGap"]。 塗り線傾き＝ラフ描画オプション["hachureAngle"]。 塗り方＝ラフ描画オプション["fillStyle"]。 ＃UI作成 「描画種別:」のラベル作成。 ["フリー","四角","円","星","ハート"]のセレクトボックス作成して、描画種別セレクトに代入。 「　塗り方:」のラベル作成。 ["斜線(hachure)","ジグザグ(zigzag)","格子(cross-hatch)","塗り潰し(solid)","点々(dots)","破線(dashed)","ギザギザ(zigzag-line)"]のセレクトボックス作成して、塗り方セレクトに代入。 改行作成。改行作成。 「線色:」のラベル作成。 色選択ボックス作成して、線色選択に代入。 「　線太さ:」のラベル作成。 ["極細","細","中","太","極太"]のセレクトボックス作成して、線太セレクトに代入。 線太セレクトの「value」に「中」をDOM属性設定。 「　ラフ度:」のラベル作成。 ["無し","低","中","高"]のセレクトボックス作成して、ラフ度セレクトに代入。 ラフ度セレクトの「value」に「中」をDOM属性設定。 改行作成。 「塗色:」のラベル作成。 色選択ボックス作成して、塗り色選択に代入。 塗り色選択の「value」に塗り色をDOM属性設定。 「　線太さ:」のラベル作成。 ["極細","細","中","太","極太"]のセレクトボックス作成して、塗線太セレクトに代入。 塗線太セレクトの「value」に「細」をDOM属性設定。 「　間隔:」のラベル作成。 ["狭い","中","広い"]のセレクトボックス作成して、塗線間隔セレクトに代入。 塗線間隔セレクトの「value」に「中」をDOM属性設定。 「　傾き:」のラベル作成。 「-41」のエディタ作成して、塗線傾きエディタに代入。 塗線傾きエディタの「幅」に「40px」をDOMスタイル設定。 改行作成。改行作成。 「取り消し」のボタン作成して、戻るボタンに代入。 「やり直し」のボタン作成して、進むボタンに代入。 「｜」のラベル作成。 「全消去」のボタン作成して、全消去ボタンに代入。 「｜」のラベル作成。 「再生」のボタン作成して、再生ボタンに代入。 改行作成。 「描画データを保存」のボタン作成して、データＤＬボタンに代入。 改行作成。改行作成。 「ファイルを開く：」のラベル作成。 ファイル選択作成して、ファイル選択に代入。 ファイル選択の「accept」に「.txt,.json」をDOM属性設定。 ファイル選択の「change」に、「描画ファイル取得」をDOMイベント追加。 ●描画ファイル取得 　選択ファイルリスト＝ファイル選択["files"] 　ファイル＝選択ファイルリスト[0] 　空でファイルのテキストファイル開いた時には、 　 描画データ＝対象をJSONデコード。 描画中データ＝空配列。 保留中データ＝空配列。 データ描画処理。 　ここまで。 ここまで。 ＃関数 ●データ描画処理 全描画クリア。 描画データを反復 対象の描画設定反映。 対象["種別"]で条件分岐 「フリー」ならば、対象["P"]をラフ曲線描画。。。 「四角」ならば、対象["P"]のラフ四角描画。。。 「円」ならば、対象["P"][0]に対象["P"][1]のラフ円描画。。。 「星」ならば、５で対象["P"][0]に対象["P"][1]のラフ星描画。。。 「ハート」ならば、対象["P"]のラフハート描画。。。 ここまで。 ここまで。 線色に線色設定。 線太さに線太さ設定。 塗り色に塗り色設定。 塗り方にラフ塗り方設定。 ここまで ●(dの)描画設定反映 d["描画粗さ"]にラフ描画粗さ設定。 d["描画歪み"]にラフ描画歪み設定。 d["線色"]に線色設定。 d["線太さ"]に線太さ設定。 d["塗り色"]に塗り色設定。 d["塗り線太さ"]にラフ塗り線太さ設定。 d["塗り線間隔"]にラフ塗り線間隔設定。 d["塗り線傾き"]にラフ塗り線傾き設定。 d["塗り方"]にラフ塗り方設定。 ここまで。 ●ガイド線設定 　もし、(描画データの配列要素数)＞０ならば、データ描画処理。 　違えば、全描画クリア。 　銀色に線色設定。空に塗り色設定。1に線太さ設定。 ここまで。 ●(abとcdの|abからcdまでの)距離計算 a=ab[0]。b=ab[1]。c=cd[0]。d=cd[1]。 (((c-a)^2)＋((d-b)^2))の平方根で戻る。 ここまで。 ＃UIイベント 描画種別セレクトの「change」がDOMイベント発火した時には、 描画種別＝描画種別セレクトの「value」をDOM属性取得。 ここまで。 塗り方セレクトの「change」がDOMイベント発火した時には、 塗り方＝塗り方セレクトの「value」をDOM属性取得して、それを「/(?<=\().*?(?=\))/」で正規表現マッチ。 塗り方にラフ塗り方設定。 ここまで。 線色選択の「change」がDOMイベント発火した時には、 線色＝線色選択の「value」をDOM属性取得。 線色に線色設定。 ここまで。 線太セレクトの「change」がDOMイベント発火した時には、 線太辞書＝{"極細":1,"細":2,"中":3,"太":5,"極太":8} 線太さ＝線太辞書[線太セレクトの「value」をDOM属性取得] 線太さに線太設定。 ここまで。 ラフ度セレクトの「change」がDOMイベント発火した時には、 ラフ度辞書＝{"無し":[0,0],"低":[1,1],"中":[3,1],"高":[5,2]} ラフ度＝ラフ度辞書[ラフ度セレクトの「value」をDOM属性取得] 描画粗さ＝ラフ度[0]。描画歪み＝ラフ度[1]。 描画粗さにラフ描画粗さ設定。 描画歪みにラフ描画歪み設定。 ここまで。 塗り色選択の「change」がDOMイベント発火した時には、 塗り色＝塗り色選択の「value」をDOM属性取得。 塗り色に塗り色設定。 ここまで。 塗線太セレクトの「change」がDOMイベント発火した時には、 塗線太辞書＝{"極細":0.5,"細":1,"中":3,"太":5,"極太":8} 塗線太さ＝塗線太辞書[塗線太セレクトの「value」をDOM属性取得] 塗線太さにラフ塗り線太設定。 ここまで。 塗線間隔セレクトの「change」がDOMイベント発火した時には、 塗線間隔辞書＝{"狭い":3,"中":9,"広い":15} 塗線間隔＝塗線間隔辞書[塗線間隔セレクトの「value」をDOM属性取得] 塗線間隔にラフ塗り線間隔設定。 ここまで。 塗線傾きエディタの「change」がDOMイベント発火した時には、 塗り線傾き＝塗線傾きエディタのテキスト取得して、それを半角変換。 塗り線傾きを整数変換にラフ塗り線傾き設定。 ここまで。 戻るボタンをクリックした時には、 描画データの配列ポップ。 それを保留中データに配列追加。 データ描画処理。 ここまで。 進むボタンをクリックした時には、 保留中データの配列ポップ。 それを描画データへ配列追加。 データ描画処理。 ここまで。 全消去ボタンをクリックした時には、 全描画クリア。 描画データ＝空配列。 保留中データ＝空配列。 ここまで。 再生ボタンをクリックした時には、 全描画クリア。１秒待つ。 再生データ＝描画データを配列複製。 描画データ＝空配列。 再生データを反復 d=対象。 dの描画設定反映。 d["種別"]で条件分岐 「フリー」ならば、 P=空配列。 d["P"]を反復。 Pに対象を配列追加。 全描画クリア。 データ描画処理。 dの描画設定反映。 空に塗り色設定。 Pをラフ曲線描画。 0.1秒待つ。 ここまで。 全描画クリア。 データ描画処理。 dの描画設定反映。 Pをラフ曲線描画。 ここまで。 「四角」ならば、d["P"]のラフ四角描画。。。 「円」ならば、d["P"][0]にd["P"][1]のラフ円描画。。。 「星」ならば、５でd["P"][0]にd["P"][1]のラフ星描画。。。 「ハート」ならば、d["P"]のラフハート描画。。。 ここまで。 dを描画データに配列追加。 1秒待つ。 ここまで。 線色に線色設定。 線太さに線太さ設定。 塗り色に塗り色設定。 塗り方にラフ塗り方設定。 ここまで。 データＤＬボタンをクリックした時には、 描画データをJSONエンコード整形して、それを「application/json」で「Rough_nako3.json」へダウンロード。 ここまで。 ＃マウスイベント 描画中キャンバスをマウス押した時には、 描画中フラグ＝オン。 線色＝線色取得。塗り色＝塗り色取得。 線太さ＝線太さ取得。塗り方＝ラフ描画オプション["fillStyle"]。 マウス初期位置＝[マウスX,マウスY] 描画種別で条件分岐 「フリー」ならば、描画中データへ[マウスX,マウスY]を配列追加。。。 「円」ならば、描画中データへ[マウスX,マウスY]を配列追加。。。 「星」ならば、描画中データへ[マウスX,マウスY]を配列追加。。。 ここまで。 ここまで。 描画中キャンバスをマウス離した時には、 もし、描画中フラグ＝オフならば、戻る。 保留中データ＝空配列。 描画種別で条件分岐 「フリー」ならば、描画中データへ[マウスX,マウスY]を配列追加。。。 「四角」ならば、描画中データ＝[マウス初期位置[0],マウス初期位置[1],マウスX-マウス初期位置[0],マウスY-マウス初期位置[1]]。。。 「円」ならば、描画中データへ([マウスX,マウスY]からマウス初期位置までの距離計算)を配列追加。。。 「星」ならば、描画中データへ([マウスX,マウスY]からマウス初期位置までの距離計算)を配列追加。。。 「ハート」ならば、 x,y＝マウス初期位置。x2＝マウスX。y2＝マウスY。 w＝x2-x。h＝y2-y。 もし、(x>x2)かつ(y<y2)ならば、: x2＝x。x=マウスX。w＝x2-x。 もし、(y>y2)かつ(x<x2)ならば、: x2＝x。x=マウスX。y2＝y。y=マウスY。h＝-1*(y2-y)。w=w*-1。y=y-h 描画中データ＝[x,y,w,h]。 ここまで。 ここまで。 //描画中データをJSONエンコード整形して表示。 描画データに{"種別": 描画種別, "描画粗さ":,描画粗さ "描画歪み":描画歪み, "線色": 線色, "線太さ": 線太さ, "塗り色": 塗り色, "塗り線太さ": 塗り線太さ, "塗り線間隔": 塗り線間隔, "塗り線傾き":塗り線傾き, "塗り方": 塗り方, "P":描画中データ}を配列追加。 //描画データをJSONエンコード整形して表示 描画中フラグ＝オフ。 描画中データ＝空配列。 塗り色に塗り色設定。 もし、(描画データの配列要素数)＞０ならば、データ描画処理。 ここまで。 描画中キャンバスをマウス移動した時には、 もし、描画中フラグ＝オフならば、戻る。 描画種別で条件分岐 「フリー」ならば、 もし、フリー間引きカウンタ＞5ならば、 フリー間引きカウンタ＝０。 描画中データへ[マウスX,マウスY]を配列追加。 ガイド線設定。線太さに線太設定。線色に線色設定。描画粗さにラフ描画粗さ設定。描画歪みにラフ描画歪み設定。 描画中データをラフ曲線描画。 違えば、 フリー間引きカウンタを１増やす。 ここまで。 ここまで。 「四角」ならば、 ガイド線設定。 [マウス初期位置[0],マウス初期位置[1],マウスX-マウス初期位置[0],マウスY-マウス初期位置[1]]へ四角描画。 ここまで。 「円」ならば、 ガイド線設定。 [マウス初期位置[0],マウス初期位置[1]]に([マウスX,マウスY]からマウス初期位置までの距離計算)の円描画。 ここまで。 「星」ならば、 ガイド線設定。 [マウス初期位置[0],マウス初期位置[1]]に([マウスX,マウスY]からマウス初期位置までの距離計算)の円描画。 ここまで。 「ハート」ならば、 ガイド線設定。 [マウス初期位置[0],マウス初期位置[1],マウスX-マウス初期位置[0],マウスY-マウス初期位置[1]]へ四角描画。 ここまで。 ここまで。 ここまで。 ●(DATAをオプションでファイル名へ|ファイル名に)ダウンロード BLOB＝DATAを{type: オプション}でBLOB作成。 URL＝「URL.createObjectURL」を[BLOB]でJS関数実行。 A＝「a」のDOM部品作成。# 仮のaタグ。 Aの「download」にファイル名をDOM属性設定。 Aの「href」にURLをDOM属性設定。 Aの「click」を空でJSメソッド実行。 DOM親要素からAをDOM子要素削除。# 消して終了。 「window.URL.revokeObjectURL」を[URL]でJS関数実行。# 解放して終了。 ここまで。