[編集モード] まゆげジェネレーター＋

まゆげパラメータを変更することで手軽にまゆげを生成できます。合成する機能が付きました

！インデント構文

説明文=『## ★★★ まゆげジェネレーター ★★★

あなたのために、**まゆげを描きます**

まゆげパラメータを変更することで手軽にまゆげを生成できます。  
完成した画像はご自由に。

』をマークダウンHTML変換してラベル作成
それの「文字サイズ」に「18px」をDOMスタイル設定

//------------汎用関数
//domの変更中には　イベント
●変更中(funcでdomの)
　funcでdomの「input」がDOMイベント発火時

//曲線描画2([100,50],[50,50],[80,30,80,40])
//曲線を2本引き塗りつぶし、眉毛だと言い張る
●曲線描画2(始点,終点,コントロールポイント)
　描画中コンテキストの「beginPath」を[]でJSメソッド実行
　描画中コンテキストの「moveTo」を始点でJSメソッド実行
　描画中コンテキストの「quadraticCurveTo」を[コントロールポイント[0],コントロールポイント[1],終点[0],終点[1]]でJSメソッド実行
　描画中コンテキストの「quadraticCurveTo」を[コントロールポイント[2],コントロールポイント[3],始点[0],始点[1]]でJSメソッド実行
　描画中コンテキストの「fill」を[]でJSメソッド実行
　描画中コンテキストの「stroke」を[]でJSメソッド実行

//------------
キャンバスサイズ=[300,300]

「キャンバスサイズ変更：」のラベル作成
キャンバスサイズUI=キャンバスサイズ[0]のエディタ作成
改行作成

眉毛キャンバス=キャンバスサイズのキャンバス作成　//まゆげのみ（非表示）
それ.非表示はオン

眉毛適用後キャンバス=キャンバスサイズのキャンバス作成　//背景＋まゆげ
それ.ボーダーは「1px solid」

改行作成

キャンバスサイズUIの変更した時には
　　w=対象からテキスト取得+0
　　キャンバスサイズ=[w,w]
　　眉毛キャンバス.幅=w
　　眉毛キャンバス.幅属性=w
　　眉毛キャンバス.高=w
　　眉毛キャンバス.高属性=w
　　眉毛適用後キャンバス.幅=w
　　眉毛適用後キャンバス.幅属性=w
　　眉毛適用後キャンバス.高=w
　　眉毛適用後キャンバス.高属性=w
　　
　　再描画

眉={
"線太"：1,
"線色"："#000000",
"塗色"："#000000",
"透過"：255, //アルファ値
"眉間":20, //中央からの距離
"眉幅":80, //長さ
"眉尻":0,　//終点Y　-:たれ　+:ツリ（Y座標）
"割合":30,　//山の位置（左右）
"眉高":10,　//山の高さ（上下）
"眉太":8,　//太さ　
"拡大":100,
"顔向":0,
"回転":0,
"始点":[0,0],
"終点":[0,0],
"CP":[0,0]
}

//色
線色UI=色選択ボックス作成
線色UIの変更中には
　眉.線色=対象のテキスト取得
　再描画
塗色UI=色選択ボックス作成
塗色UIの変更中には
　眉.塗色=対象のテキスト取得
　再描画
透過UI=[0,255,255]の値指定バー作成
透過UIの変更中には
　眉.透過=対象のテキスト取得
　再描画
「（線色・塗色・透過）」のラベル作成
改行作成

//位置　
眉間UI=[0,100,眉.眉間]の値指定バー作成
眉間UIの変更中には
　眉.眉間=対象のテキスト取得+0
　再描画

眉幅UI=[10,キャンバスサイズ[0],眉.眉幅]の値指定バー作成
眉幅UIの変更中には
　眉.眉幅=対象のテキスト取得+0
　再描画

眉尻UI=[-40,40,眉.眉尻]の値指定バー作成
眉尻UIの変更中には
　眉.眉尻=対象のテキスト取得+0
　再描画
「（眉間・眉幅・眉尻）」のラベル作成
改行作成

//山
眉割合UI=[0,100,眉.割合]の値指定バー作成
眉割合UIの変更中には
　眉.割合=対象のテキスト取得+0
　再描画

眉高UI=[-40,40,眉.眉高]の値指定バー作成
眉高UIの変更中には
　眉.眉高=対象のテキスト取得+0
　再描画

眉太UI=[-40,40,眉.眉太]の値指定バー作成
眉太UIの変更中には
　眉.眉太=対象のテキスト取得+0
　再描画
「（山位置・高さ・太さ）」のラベル作成
改行作成

//拡大・回転
眉拡大UI=[0,400,眉.拡大]の値指定バー作成
眉拡大UIの変更中には
　眉.拡大=対象のテキスト取得+0
　再描画

眉顔向UI=[-100,100,眉.顔向]の値指定バー作成
眉顔向UIの変更中には
　眉.顔向=対象のテキスト取得+0
　再描画

回転UI=[-360,360,0]の値指定バー作成
回転UIの変更中には
　眉.回転=対象のテキスト取得+0
　再描画
「（拡大・顔向・回転）」のラベル作成

改行作成
デバッグラベル=「」のラベル作成
改行作成

●再描画
　変数　m=眉
　
　//まゆげ（非表示）
　眉毛キャンバスへ描画開始
　全描画クリア
　キャンバス状態保存
　1回
　　　
　　　m.線色に線色設定
　　　m.塗色に塗色設定
　　　m.線太に線太さ設定
　　　もしm.透過<255ならば
　　　　　//#rrggbbaa
　　　　　alfa=HEX(m.透過)を2でゼロ埋め
　　　　　m.線色&alfaに線色設定
　　　　　m.塗色&alfaに塗色設定
　　　
　　　
　　　//[描画中キャンバス.幅/2,描画中キャンバス.高/2]へ描画起点設定
　　　描画起点=[キャンバスサイズ[0]/2,キャンバスサイズ[1]/2]
　　　描画起点へ描画起点設定
　　　m.回転へ描画回転
　　　
　　　//右
　　　m["始点",0]=m.眉間 //x
　　　m["始点",1]=0 //y
　　　m["終点",0]=m["始点",0]+m.眉幅 //x
　　　m["終点",1]=m.眉尻 //y
　　　m["CP",0]=m["始点",0]+(m["終点",0]-m["始点",0])*m.割合/100 //曲線1
　　　m["CP",1]=m["始点",1]-m.眉高
　　　m["CP",2]=m["始点",0]+(m["終点",0]-m["始点",0])*m.割合/100 //曲線2
　　　m["CP",3]=m["始点",1]-m.眉高-m.眉太 //
　　　キャンバス状態保存
　　　[m.拡大/100,0,0,m.拡大/100,0,0]だけ描画変換マトリクス追加
　　　もしm.顔向>0ならば
　　　　　[1-m.顔向/100,0,0,1-m.顔向/100/2,0,0]だけ描画変換マトリクス追加//伸縮x,傾斜y,傾斜x,伸縮y,起点x,起点y
　　　曲線描画2(m.始点,m.終点,m.CP)
　　　キャンバス状態復元
　　　
　　　//左
　　　キャンバス状態保存
　　　[m.拡大/100,0,0,m.拡大/100,0,0]だけ描画変換マトリクス追加
　　　もしm.顔向<0ならば
　　　　　[1+m.顔向/100,0,0,1+m.顔向/100/2,0,0]だけ描画変換マトリクス追加
　　　[-1,0,0,1,0,0]だけ描画変換マトリクス追加//伸縮xを反転
　　　曲線描画2(m.始点,m.終点,m.CP)
　　　キャンバス状態復元
　キャンバス状態復元
　
　//背景一部+まゆげ
　眉毛適用後キャンバスへ描画開始
　全描画クリア
　合成元取得
　眉毛キャンバスの[0,0]を[0,0]へ画像部分描画
　
　//背景全部+まゆげ
　眉毛合成
　
　mをJSONエンコードしてデバッグラベルにテキスト設定
　
　mを戻す

//------追加部分-----------
!「https://n3s.nadesi.com/plain/nadesiko3-FileReader.js」を取り込む。
//ファイル選択作成
//ファイル選択した時
//ファイルドロップした時
//画像ファイル開いた時

『***
### ★★★　まゆげ合成エリア　★★★
ここではお手持ちの絵にまゆげを合成することができます。
1. ファイル選択またはドロップで画像をロード
2. マウスクリックでまゆげの位置を指定
  
※ 画像がネットにアップロードされることはありません。ブラウザ内で処理されます。
』をマークダウンHTML変換してラベル作成

変数　合成元画像=空//img要素
変数　合成先座標=[150,100]

改行作成

合成元指定UI=ファイル選択作成
改行作成
合成元キャンバス=[300,300]のキャンバス作成
それ.ボーダーは「1px solid」
16に描画フォント設定
[10,50]に「ここに画像ファイルをドロップ」を文字描画

//合成元の座標指定
合成元キャンバスのマウス押した時には
　　もし押したボタンが「左」ならば
　　　　合成先座標[0]=マウスX
　　　　合成先座標[1]=マウスY
　　　　
　　　　再描画

//合成元キャンバス
眉毛適用後キャンバスのマウス押した時には
　　合成先座標[0]=合成先座標[0]-キャンバスサイズ[0]/2+マウスX
　　合成先座標[1]=合成先座標[1]-キャンバスサイズ[1]/2+マウスY
　　再描画

//ロード
合成元指定UIのファイル選択した時には
　　対象[0]を合成元ロード
合成元指定UIにファイルドロップ時には
　　対象[0]を合成元ロード

合成元キャンバスにファイルドロップした時には
　　合成元指定UIの「files」に対象をDOM属性設定
　　対象[0]を合成元ロード
　　
●合成元ロード(fileを)
　fileの画像ファイル開いた時には
　　　合成元画像 = 対象
　　　合成元キャンバス.幅は対象.幅属性
　　　合成元キャンバス.幅属性は対象.幅属性
　　　合成元キャンバス.高は対象.高属性
　　　合成元キャンバス.高属性は対象.高属性
　　　合成元キャンバス.ボーダーは空
　　　再描画

//合成
●眉毛合成
　もし合成元画像が空ならば、戻る
　
　合成元キャンバスへ描画開始
　全描画クリア
　合成元画像の[0,0]を[0,0]に画像部分描画
　眉毛キャンバスの[0,0]を[合成先座標[0]-キャンバスサイズ[0]/2,合成先座標[1]-キャンバスサイズ[1]/2]へ画像部分描画
　
//まゆげの背景
●合成元取得
　もし合成元画像が空ならば、戻る
　眉毛適用後キャンバスへ描画開始
　w=キャンバスサイズ[0]
　h=キャンバスサイズ[1]
　合成元画像の[合成先座標[0]-w/2,合成先座標[1]-w/2,w,h]を[0,0,w,h]に画像部分描画

//保存
改行作成
保存ボタン＝「保存」のボタン作成。
保存ボタンをクリックした時には
　　もし合成元画像が空ならば、戻る
　　合成元キャンバスへ描画開始
　　描画ダウンロード
再描画

デバッグ × キャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] まゆげジェネレーター＋

素材のアップロード