🌸 「なでしこ」
>
🍯 「貯蔵庫」
手書き風描画プラグイン
🌟新規
📒一覧
🔌
🔍検索
🚪ログイン
手書き風描画プラグイン 📖
Rough.jsを使って、なでしこ3でキャンバスに手書きっぽい描画をするNAKO3プラグイン。ちょっとかわいい❤ そんだけ!www
プログラム:
(→大)
/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=* # 手書き風描画プラグイン 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をラジアン変換) もし、修正ラジアン度<0ならば、修正ラジアン度=修正ラジアン度+(360をラジアン変換) 修正ラジアン度で戻る。 ここまで。 ##スプライン ●(始点から中継点配列で)ラフスプライン描画 始点=「M {始点[0]},{始点[1]} 」 追加パス=空。 中継点配列を反復 点x,点y=中継点配列[対象キー] 追加パス=追加パス&「T {点x},{点y} 」 ここまで。 もし、ラフパス作成情報["連続パス作成中フラグ"]=オンならば、追加パスでラフ連続パス追加処理して、戻る。 d=始点&追加パス。 dでラフパス描画。 ここまで。 ##ベジェ曲線 # 終点を配列にして複数指定すると、スプラインでつないでいく。 ●(始点から制御点で終点まで|始点と終点の)ラフ二次ベジェ曲線描画 始点=「M {始点[0]},{始点[1]} 」 制御点=「Q {制御点[0]},{制御点[1]} 」 追加パス=制御点。 もし、(終点[0]の要素数)=1ならば、 追加パス=追加パス&「{終点[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=1ならば、半径=外径。 違えば、半径=内径。 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]のラフ四角描画。 ここまで。
プログラムを実行
⭐ 雪乃☆雫 作
タイトル:
手書き風描画プラグイン
ライセンス:
CC0 (著作権破棄)
タイプ:
wnako
タグ:
プラグイン
利用バージョン:
3.4.5
作成日時:
2023/02/21 09:46 (編集: 2023/02/21 09:49)
公開の投稿
ログイン
して★を付けよう!
Twitterへ投稿
📝作品を編集
作品公開情報
📍この作品のURL:
📍アプリ(即時実行)のURL:
📍アプリ(実行ボタンあり)のURL:
📍ブログパーツ:
上記HTML↑をブログに貼り付けることでアプリを埋め込めます。
📍ライブラリ直リンク - 『!「***」を取込』で使うとき:
📍なでしこハブ (最新版の反映は1日後):
ソースの確認
編集履歴の確認
通報数:
0
通報って何?