/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=* ＃ 手書き風描画プラグイン　Rough.nako3　v 1.0.4 Rough.jsを使ってキャンバスに手書きっぽい描画をするプラグイン https://roughjs.com/ ※　取り込み文 ！『https://n3s.nadesi.com/plain/Rough.nako3』を取り込む。 　作者:雪乃☆雫　／　ライセンス:CC0　／　制作時のナデシコバージョン: 3.4.4 *=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*/ ＃変数 ラフキャンバスとは変数。 変数 ラフ描画オプション＝空辞書。 変数 ラフパス作成情報＝{"連続パス作成中フラグ":オフ} ＃Rough.jsの取り込み 「https://unpkg.com/roughjs@latest/bundled/rough.js」をCDN取り込み。 5回: もし、ラフキャンバス≠NULLならば、抜ける。 1秒待つ。 ●(URLの|URLを)CDN取り込み 変数 id＝URLを「/」で区切って、それ[(それの要素数)-1] id=idを「.」で区切って、それ[0]の「 」を空に置換。 もし、(idのDOM要素ID取得)＝NULLならば、 母艦＝DOM親要素。 「head」へDOM親要素設定。 スクリプト＝「script」のDOM部品作成。 スクリプトの「id」にidをDOM属性設定。 スクリプトの「src」にURLをDOM属性設定。 母艦へDOM親要素設定。 スクリプトの「load」がDOMイベント発火した時には: ラフ描画開始して戻る。 違えば、 ラフ描画開始して戻る。 ここまで。 ここまで。 ●ラフ描画開始 もし、描画中キャンバス≠NULLならば、 ラフキャンバス＝「rough.canvas」を[描画中キャンバス]でJS関数実行。 違えば、 「描画中キャンバスがありません」と言う。 ここまで。 ここまで。 ＃図形描画 ●(AからBまで|Bへ)ラフ線描画 変数 [x1,y1]=A。変数 [x2,y2]=B。 変数 opt＝描画オプション作成。 ラフキャンバスの「line」を[x1,y1,x2,y2,opt]でJSメソッド実行。 ここまで。 ●(xywhの|xywhへ|xywhに)ラフ四角描画 変数 [x,y,w,h]＝xywh。 変数 opt＝描画オプション作成。 ラフキャンバスの「rectangle」を[x,y,w,h,opt]でJSメソッド実行。 ここまで。 ●(Pで|Pの|Pを)ラフ折れ線描画 変数 opt＝描画オプション作成。 ラフキャンバスの「linearPath」を[P,opt]でJSメソッド実行。 ここまで。 ●(Pで|Pの|Pを)ラフ多角形描画 変数 opt＝描画オプション作成。 ラフキャンバスの「polygon」を[P,opt]でJSメソッド実行。 ここまで。 # 円や楕円、arcのサイズの引数がなんと「直径」。 # なでしこの描画命令やSVGは「半径」なので、コンランしないよう半径で指定するようにする。 ●(中点へ半径の|中点に)ラフ円描画 変数 [x,y]=中点。変数 直径＝半径*2。 変数 opt＝描画オプション作成。 ラフキャンバスの「circle」を[x,y,直径,opt]でJSメソッド実行。 ここまで。 ●(中点へ半径の|中点に)ラフ楕円描画 F=関数(N) それはN*2。ここまで。 変数 [x,y]=中点。変数 [w,h]=Fを半径へ配列関数適用。 変数 opt＝描画オプション作成。 ラフキャンバスの「ellipse」を[x,y,w,h,opt]でJSメソッド実行。 ここまで。 # 開始角、終了角はラジアン。右回り固定。 ●(中点に開始角から終了角まで半径の|中点へ半径で)ラフ扇描画 F=関数(N) それはN*2。ここまで。 変数 [x,y]=中点。変数 [w,h]=Fを半径へ配列関数適用。 変数 opt＝描画オプション作成。 ラフキャンバスの「arc」を[x,y,w,h,開始角,終了角,はい,opt]でJSメソッド実行。 ここまで。 ●(中点に開始角から終了角まで半径の|中点へ半径で)ラフ円弧描画 F=関数(N) それはN*2。ここまで。 変数 [x,y]=中点。変数 [w,h]=Fを半径へ配列関数適用。 変数 opt＝描画オプション作成。 ラフキャンバスの「arc」を[x,y,w,h,開始角,終了角,いいえ,opt]でJSメソッド実行。 ここまで。 ※ 多角形と違い閉じないが、折れ線と違い塗り色が付く。スプラインと違いポイントが頂点になる。 ●(Pで|Pの|Pを)ラフ曲線描画 変数 opt＝描画オプション作成。 ラフキャンバスの「curve」を[P,opt]でJSメソッド実行。 ここまで。 ＃パス ●(dの|dを|dで)ラフパス描画 変数 opt＝描画オプション作成。 ラフキャンバスの「path」を[d,opt]でJSメソッド実行。 ここまで。 ＃＃連続パス描画 //連続パス描画中は始点を省略してつないでいく。 ●(始点から|始点に|始点へ)ラフ連続パス描画開始 ラフパス作成情報["連続パス作成中フラグ"]＝オン。 ラフパス作成情報["d"]＝空。 もし、(始点＝空)または((始点の要素数)≠2)でなければ、ラフパス作成情報["d"]＝「M {始点[0]},{始点[1]} 」 ラフパス作成情報["d"]で戻る。 ここまで。 ●ラフ連続パス描画終了 ラフパス作成情報["連続パス作成中フラグ"]＝オフ。 ラフパス作成情報["d"]でラフパス描画。 ここまで。 ●(追加パスで)ラフ連続パス追加処理 ラフパス作成情報["d"]＝ラフパス作成情報["d"]&追加パス。 ラフパス作成情報["d"]で戻る。 ここまで。 //連続パス描画でだけ ●(xyへ|xyに|xyまで)ラフパス描画位置移動 もし、ラフパス作成情報["連続パス作成中フラグ"]＝オフならば、戻る。 追加パス＝「M {xy[0]},{xy[1]} 」 追加パスでラフ連続パス追加処理して、戻る。 ここまで。 ＃＃線 ●(xy1からxy2まで|xy2へ)ラフパス線描画 x1,y1＝xy1。x2,y2＝xy2。 始点＝「M {x1},{y1} 」。追加パス＝「L {x2},{y2} 」 もし、ラフパス作成情報["連続パス作成中フラグ"]＝オンならば、追加パスでラフ連続パス追加処理して、戻る。 d＝始点&追加パス。 dでラフパス描画。 ここまで。 ＃＃弧 //設定配列=[回転度,弧が180度より大きいか,時計回りか] ●(始点から終点まで設定配列で半径の)ラフパス弧形描画 始点＝「M {始点[0]},{始点[1]} 」。 もし、設定配列＝空ならば、設定配列＝[0,0,1]。 回転度,大弧,右回転＝設定配列。 半径x,半径y＝半径。もし、半径y＝未定義ならば、半径y＝半径x。 追加パス＝「A {半径x},{半径y} {回転度} {大弧} {右回転} {終点[0]} {終点[1]} 」 もし、ラフパス作成情報["連続パス作成中フラグ"]＝オンならば、追加パスでラフ連続パス追加処理して、戻る。 d＝始点&追加パス。 dでラフパス描画。 ここまで。 # 角度はラジアン。角度0は右端。 ●(中点に開始角から終了角まで半径の|中点へ半径で)ラフパス扇描画 中点x,中点y＝中点。 開始角＝開始角のラジアン角度修正。 終了角＝終了角のラジアン角度修正。 半径x,半径y＝半径。もし、半径y＝未定義ならば、半径y＝半径x。 x1＝半径x*COS(開始角)＋中点x。 y1＝半径y*SIN(開始角)＋中点y。 x2＝半径x*COS(終了角)＋中点x。 y2＝半径y*SIN(終了角)＋中点y。 回転度＝0。 # 回転度 大弧＝いいえ。 # 弧が180度より大きいか もし、終了角＜開始角ならば、終了角＝終了角+(360をラジアン変換) もし、終了角-開始角＞(180をラジアン変換)ならば、大弧＝はい。 右回転＝はい。 # 時計回りか d＝「M {中点x},{中点y} L {x1},{y1} A {半径x},{半径y} {回転度} {大弧} {右回転} {x2},{y2} z 」 もし、ラフパス作成情報["連続パス作成中フラグ"]＝オンならば、dでラフ連続パス追加処理して、戻る。 dでラフパス描画。 ここまで。 ●(中点に開始角から終了角まで半径の|中点へ半径で)ラフパス円弧描画 中点x,中点y＝中点。 開始角＝開始角のラジアン角度修正。 終了角＝終了角のラジアン角度修正。 半径x,半径y＝半径。もし、半径y＝未定義ならば、半径y＝半径x。 x1＝半径x*COS(開始角)＋中点x。 y1＝半径y*SIN(開始角)＋中点y。 x2＝半径x*COS(終了角)＋中点x。 y2＝半径y*SIN(終了角)＋中点y。 回転度＝0。 # 回転度 大弧＝いいえ。 # 弧が180度より大きいか もし、終了角＜開始角ならば、終了角＝終了角+(360をラジアン変換) もし、終了角-開始角＞(180をラジアン変換)ならば、大弧＝はい。 右回転＝はい。 # 時計回りか d＝「M {x1},{y1} A {半径x},{半径y} {回転度} {大弧} {右回転} {x2},{y2} 」 もし、ラフパス作成情報["連続パス作成中フラグ"]＝オンならば、dでラフ連続パス追加処理して、戻る。 dでラフパス描画。 ここまで。 ●(ラジアン度の)ラジアン角度修正　//0～360をラジアン変換の範囲に修正 修正ラジアン度＝ラジアン度%(360をラジアン変換) もし、修正ラジアン度＜０ならば、修正ラジアン度＝修正ラジアン度+(360をラジアン変換) 修正ラジアン度で戻る。 ここまで。 ＃＃スプライン ●(始点から中継点配列で)ラフスプライン描画 始点＝「M {始点[0]},{始点[1]} 」 追加パス＝空。 　　中継点配列を反復 　　　　点x,点y＝中継点配列[対象キー] 　　　　追加パス＝追加パス&「T {点x},{点y} 」 　　ここまで。 もし、ラフパス作成情報["連続パス作成中フラグ"]＝オンならば、追加パスでラフ連続パス追加処理して、戻る。 　　d＝始点&追加パス。 dでラフパス描画。 ここまで。 ＃＃ベジェ曲線 # 終点を配列にして複数指定すると、スプラインでつないでいく。 ●(始点から制御点で終点まで|始点と終点の)ラフ二次ベジェ曲線描画 始点＝「M {始点[0]},{始点[1]} 」 制御点＝「Q {制御点[0]},{制御点[1]} 」 追加パス＝制御点。 もし、(終点[0]の要素数)＝１ならば、 追加パス＝追加パス&「{終点[0]},{終点[1]} 」 違えば、 終点を反復 もし、対象キー≠0ならば、追加パス＝追加パス&「T 」。 追加パス＝追加パス&「{対象[0]},{対象[1]} 」。 ここまで。 ここまで。 もし、ラフパス作成情報["連続パス作成中フラグ"]＝オンならば、追加パスでラフ連続パス追加処理して、戻る。 　　d＝始点&追加パス。 dでラフパス描画。 ここまで。 ●(始点から制御点配列で終点まで|始点と終点の)ラフ三次ベジェ曲線描画 始点＝「M {始点[0]},{始点[1]} 」 制御点A,制御点B＝制御点配列。 追加パス＝「C {制御点A[0]},{制御点A[1]} {制御点B[0]},{制御点B[1]} {終点[0]},{終点[1]} 」 もし、ラフパス作成情報["連続パス作成中フラグ"]＝オンならば、追加パスでラフ連続パス追加処理して、戻る。 　　d＝始点&追加パス。 dでラフパス描画。 ここまで。 //連続パス描画でだけ ●(制御点で終点まで|終点と)ラフ三次ベジェ曲線続ける もし、ラフパス作成情報["連続パス作成中フラグ"]＝オフならば、戻る。 もし、(終点[0]の要素数)＝1ならば、 追加パス＝「S {制御点[0]},{制御点[1]} {終点[0]},{終点[1]} 」 追加パスでラフ連続パス追加処理して、戻る。 違えば、 (終点の要素数)回。 終点x,終点y＝終点[回数-1]。 制御点x,制御点y＝制御点[回数-1]。 追加パス＝「S {制御点x},{制御点y} {終点x},{終点y} 」 追加パスでラフ連続パス追加処理。 ここまで。 戻る。 ここまで。 ここまで。 ＃図形 ●(数で中点に半径の|中点へ)ラフ星描画 外径,内径＝半径。 もし、内径＝未定義ならば、内径は外径/2。 P＝空配列。 数*2回 角度＝(360/(数*2))*(回数-1)。 もし、回数%2＝１ならば、半径＝外径。 違えば、半径＝内径。 x＝半径*COS(((角度-90)をラジアン変換))＋中点[0]。 y＝半径*SIN(((角度-90)をラジアン変換))＋中点[1]。 Pへ[x,y]を配列追加。 ここまで。 Pでラフ多角形描画。 ここまで。 ●(xywhの|xywhへ|xywhに)ラフハート描画 変数 [x,y,w,h]＝xywh。 変数 r＝w/4。 [x,y+r]にラフ連続パス描画開始。 [x,y+r]から[x+r*2,y+r]までrのラフパス弧形描画。 [x+r*2,y+r]から[x+w,y+r]までrのラフパス弧形描画。 [x+r*2,y+h]まで[x+w,y+h/3*2]でラフ二次ベジェ曲線描画。 [x,y+r]まで[x,y+h/3*2]でラフ二次ベジェ曲線描画。 ラフ連続パス描画終了。 ここまで。 #------------------------------------------------------ ＃オプション # https://github.com/rough-stuff/rough/wiki#options ●描画オプション作成 塗り色＝「sys.__fillStyle」をJS実行。 線色＝「sys.__strokeStyle」をJS実行。 ラフ描画オプション["fill"]＝塗り色。 ラフ描画オプション["stroke"]＝線色。 ラフ描画オプション["strokeWidth"]＝描画中コンテキスト["lineWidth"]。 ラフ描画オプションを戻す。 ここまで。 ＃＃設定 ＃＃＃ラフ度合い ●(Aに|Aへ)ラフ描画粗さ設定 ラフ描画オプション["roughness"]＝A。 ここまで。 ●(Aに|Aへ)ラフ描画歪み設定 ラフ描画オプション["bowing"]＝A。 ここまで。 ＃＃＃塗り ●(Aに|Aへ)ラフ塗り方設定 和スタイル＝{ "斜線":"hachure","ハッチング":"hachure", "塗り潰し":"solid","塗潰し":"solid","単色":"solid", "ジグザグ":"zigzag","稲妻":"zigzag", "格子":"cross-hatch","チェック":"cross-hatch", "点々":"dots","水玉":"dots","ドット":"dots", "破線":"dashed","点線":"dashed","ダッシュ":"dashed", "ジグザグ線":"zigzag-line","ギザギザ":"zigzag-line", } もし、(和スタイルにAが辞書キー存在）ならば、A＝和スタイル[A]。 ラフ描画オプション["fillStyle"]＝A。 ここまで。 ●(Aに|Aへ)ラフ塗り線太さ設定 ラフ描画オプション["fillWeight"]＝A。 ここまで。 ●(Aに|Aへ)ラフ塗り線傾き設定 ラフ描画オプション["hachureAngle"]＝A。 ここまで。 ●(Aに|Aへ)ラフ塗り線間隔設定 ラフ描画オプション["hachureGap"]＝A。 ここまで。 ＃＃＃破線 ●(Aに|Aへ)ラフストローク破線パターン設定 線太さ＝描画中コンテキスト["lineWidth"]。 もし、(Aの変数型確認)＝「object」でなければ、A＝線太さでAの破線パターン取得。 ラフ描画オプション["strokeLineDash"]＝A。 ここまで。 ●(Aに|Aへ)ラフ塗り破線パターン設定 もし、ラフ描画オプションに「fillWeight」が辞書キー存在するならば、 線太さ＝ラフ描画オプション["fillWeight"]。 違えば、 線太さ＝描画中コンテキスト["lineWidth"]/4。 ここまで。 もし、(Aの変数型確認)＝「object」でなければ、A＝線太さでAの破線パターン取得。 ラフ描画オプション["fillLineDash"]＝A。 ここまで。 ●(線太さでAの)破線パターン取得 Aで条件分岐 「細点線」ならば、A＝[線太さ,線太さ]。。。 「点線」ならば、A＝[線太さ*2,線太さ*2]。。。 「破線」ならば、A＝[線太さ*4,線太さ*2]。。。 「一点鎖線」ならば、A＝[線太さ*6,線太さ*2,線太さ*2,線太さ*2]。。。 「中長破線」ならば、A＝[線太さ*6,線太さ*2]。。。 「長破線」ならば、A＝[線太さ*8,線太さ*2]。。。 「長鎖線」ならば、A＝[線太さ*8,線太さ*2,線太さ*2,線太さ*2]。。。 「二点鎖線」ならば、A＝[線太さ*8,線太さ*2,線太さ*2,線太さ*2,線太さ*2,線太さ*2]。。。 違えば、A＝[]。。。 ここまで。 Aを戻す。 ここまで。 ●(Aに|Aへ)ラフストローク破線開始位置設定 ラフ描画オプション["strokeLineDashOffset"]＝A。 ここまで。 ●(Aに|Aへ)ラフ塗り破線開始位置設定 ラフ描画オプション["fillLineDashOffset"]＝A。 ここまで。 ＃＃＃特定の塗り方専用 # 塗り方が破線の場合のみ ●(Aに|Aへ)ラフ破線スタイル間隔設定 ラフ描画オプション["dashGap"]＝A。 ここまで。 ●(Aに|Aへ)ラフ破線スタイル開始位置設定 ラフ描画オプション["dashOffset"]＝A。 ここまで。 # 塗り方がジグザグ線の場合のみ ●(Aに|Aへ)ラフジグザグ線スタイル振幅設定 ラフ描画オプション["zigzagOffset"]＝A。 ここまで。 ＃取得 ●塗り色取得 「sys.__fillStyle」をJS実行を戻す。 ここまで。 ●線色取得 「sys.__strokeStyle」をJS実行を戻す。 ここまで。 ●線太さ取得 描画中コンテキスト["lineWidth"]を戻す。 ここまで。 #------------------------------------------------------ ＃以下はテスト もし、プラグイン名＝「メイン」ならば、 # 円 3に線太さ設定。黒色に線色設定。赤色に塗り色設定。# 塗り色、線色、線太さは、通常の描画命令と共有。 「斜線」にラフ塗り方設定。1にラフ塗り線太さ設定。3にラフ塗り線間隔設定。 [50,50]へ40のラフ円描画。 # 楕円 青色に塗り色設定。「格子」にラフ塗り方設定。4にラフ塗り線間隔設定。 [150,50]へ[50,30]のラフ楕円描画。 # 扇 黄色に塗り色設定。「点々」にラフ塗り方設定。6にラフ塗り線間隔設定。 [250,50]へ(-135をラジアン変換)から(135をラジアン変換)まで[40,40]のラフ扇描画。 # 四角 緑色に塗り色設定。「ジグザグ線」にラフ塗り方設定。4にラフ塗り線間隔設定。 [10,110,80,80]のラフ四角描画。 # 星 黄金色に塗り色設定。「ジグザグ」にラフ塗り方設定。8にラフ塗り線間隔設定。 5で[150,150]へ[50,20]のラフお星さま描画。 # ハート 紫色に塗り色設定。「ジグザグ」にラフ塗り方設定。5にラフ塗り線太さ設定。12にラフ塗り線間隔設定。 [210,110,80,80]のラフハート描画。 # 多角形 「pink」に塗り色設定。90にラフ塗り線傾き設定。 [[50,210],[10,290],[90,290]]のラフ多角形描画。 # 傾いた楕円（パス） 茶色に塗り色設定。「破線」にラフ塗り方設定。-45にラフ塗り線傾き設定。 3にラフ塗り線太さ設定。6にラフ塗り線間隔設定。4にラフ破線スタイル間隔設定。 [110,250]からラフ連続パス描画開始。 [110,250]から[190,250]まで[30,0,1]で[40,20]のラフパス弧形描画。 [190,250]から[110,250]まで[30,0,1]で[40,20]のラフパス弧形描画。 ラフ連続パス描画終了 # 四角（ラフ度を上げる） 3にラフ描画粗さ設定。3にラフ描画歪み設定。 水色に塗り色設定。「塗り潰し」にラフ塗り方設定。 [210,210,80,80]のラフ四角描画。 ここまで。