UI/手描きUI

Last-modified: 2017-11-09 (木) 09:35:33
Tag: UI 実装

UIをデコレーション。

UIに落書きスペースを。

右クリック→ファイル読み込み、またはクリップボードから貼り付け。
「描く」で編集可能に。
単一レイヤーキャンバス

描けるスペースを(狭くても)数多く。

自分で印を付けるため。
特にレイヤーなどのように、同型が多いオブジェクト(のUI)に。

スクロールバーにも落書きしたい

スクロールバーを使用する設定で、スクロールバーの背景に印を付けたい。
特にレイヤーリストなど、一列に並んでいる物のスクロールバーで。

拭き取る

消しゴムで消すと元に戻る。
UIの上にレイヤーが(1枚)重なっているようなもの。

UIの領域を越えて描けるようにするには?

  1. 落書きレイヤーを広げてから描く
  2. 1ストローク中はレイヤーが自動拡張される

キャンバスとUIの一体化。
キャンバス上にUIを描画。

鍵アイコン

MacOSのような。
デフォルトがロック状態。アンロックするとらくがき可能、ボタン無効。

文字の下層に描きたい

ボタンの文字は見えるように。

よく使うボタンに使用感を与えたり

キャンバスウィンドウの背景を書き換えたり

色を黒や灰色や白に。

キャンバス上にUIを作る

レイヤーを選択するための印をキャンバス上に描く。キャンバス上でタップや範囲選択をすると、その範囲に描画のあるレイヤーを選択する機能と合わせて、レイヤー選択のUIをキャンバス上に作れる。
同じキャンバスを複数のウィンドウで表示できれば、手描きのレイヤー選択用ウィンドウになる。

アイコンをキャンバスにドロップして書き換え

UI上にあるアイコンを専用ウィンドウにドロップ。それをタップしたり、シフト系キーを押しながらポインターで触れると機能実行。
アイコンを描きなおししたり、移動させたり、削除したり。アイコンを消すだけでは実体は無くならない。

押す操作くらいにしか対応できない。