＃手書き風お絵かきアプリ ！『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関数実行。# 解放して終了。 ここまで。