🌸 「なでしこ」
>
🍯 「貯蔵庫」
画面構成を考える時使うやつ
🌟新規
📒一覧
🔌
🔍検索
🚪ログイン
画面構成を考える時使うやつ 📖
ゲームやツールの画面構成を考える時に便利です
プログラム:
(→大)
//変数 キャンバス幅=描画中キャンバスの「幅」をDOM属性取得 キャンバス高=描画中キャンバスの「高」をDOM属性取得 始点=[] 追加回数=1 //部品 追加ボタン=「 追加 」のボタン作成。改行作成 「つかいかた:キャンバスをドラッグで四角を描いて追加ボタンを押す」のラベル作成 改行作成 追加エリア=空のテキストエリア作成 追加エリアの「幅」に「300px」をDOMスタイル設定 追加エリアの「高」に「20px」をDOMスタイル設定 改行作成 「 ↓ 追加ボタンで座標を追加」のラベル作成。 改行作成 「[描画リスト] (範囲名・座標の手動編集可)」のラベル作成。 改行作成 描画リスト=「」のテキストエリア作成。 改行作成 描画リストの「幅」に「500px」をDOMスタイル設定 描画リストの「高」に「160px」をDOMスタイル設定 キャンバスサイズ変更ボタン=「キャンバスサイズ変更」のボタン作成 //部品ここまで 描画リスト描画 ●描画リスト描画 14に描画フォント設定 cw=描画中キャンバスの「幅」をDOM属性取得 ch=描画中キャンバスの「高」をDOM属性取得 描画クリア RGB(240,240,250)に塗色設定 [0,0,cw,ch]へ四角描画 赤色に塗色設定 [0+3,ch-3]へ「キャンバス {cw}x{ch}」を文字描画 json=描画リストJSON jsonをJSONデコードして反復 空に塗色設定 対象へ四角描画 赤色に塗色設定 x,y,w,h=対象 対象キーを[x+3,y+h-3]へ文字描画 ここまで ここまで //jsonを返す ●描画リストJSON list=描画リストのDOMテキスト取得してそれをトリム list=listの「]」を「],」に置換 list=『{@}』の『@』をlistに単置換 list=listの『],}』を『]}』に単置換 //最後 listを戻す ここまで //イベント 描画中キャンバスのマウス押した時には 描画リスト描画() 始点=[マウスX,マウスY] ここまで 描画中キャンバスのマウス離した時には xywh=[INT(始点[0]),INT(始点[1]),INT(マウスX-始点[0]),INT(マウスY-始点[1])] 黄色に塗色設定 xywhに四角描画 追加エリアに「"枠{追加回数}":[{xywh}]」をテキスト設定 ここまで 追加ボタンをクリック時には txt=空 txt=txtに(描画リストのテキスト取得)を一行追加 txt=txtに(追加エリアのテキスト取得)を一行追加 txt=txtをトリム 描画リストへtxtをテキスト設定 描画リスト描画() 追加回数=追加回数+1 追加エリアに空をテキスト設定 ここまで キャンバスサイズ変更ボタンをクリック時には キャンバスサイズ変更尋 ここまで ●キャンバスサイズ変更尋 cw=描画中キャンバスの「幅」をDOM属性取得 ch=描画中キャンバスの「高」をDOM属性取得 ans=「キャンバスの幅は?(現在:{cw})」と尋ねる もしansが空でなければcw=ans ans=「キャンバスの高さは?(現在:{ch})」と尋ねる もしansが空でなければch=ans [cw,ch]にキャンバスサイズ変更 ここまで ●(cwchに)キャンバスサイズ変更 cw,ch = cwch 描画中キャンバスの「幅」にcwをDOM属性設定 描画中キャンバスの「高」にchをDOM属性設定 描画リスト描画 ここまで
プログラムを実行
TKI 作
タイトル:
画面構成を考える時使うやつ
ライセンス:
CC0 (著作権破棄)
タイプ:
wnako
タグ:
-
利用バージョン:
3.2.27
作成日時:
2021/10/15 20:17 (編集: 2021/10/18 18:33)
公開の投稿
⭐
ログイン
して★を付けよう!
📝作品を編集
作品公開情報
📍この作品のURL:
📍アプリ(即時実行)のURL:
📍アプリ(実行ボタンあり)のURL:
📍ブログパーツ:
上記HTML↑をブログに貼り付けることでアプリを埋め込めます。
📍ライブラリ直リンク - 『!「***」を取込』で使うとき:
📍なでしこハブ (最新版の反映は1日後):
ソースの確認
編集履歴の確認
通報数:
0
通報って何?