CloverPaint雑記

CloverPaintの解説・開発状況・内部仕様・利用法などについてつらつらと

ナビゲーション・ビュー実装

Clover Paint v1.15をアップしました。

すでに公開されています。

ちなみに今回かなりバージョンが飛んでいますが、管理が面倒なためメモ版と合わせただけです。

 

今回のアップデートの目玉は、なんといってもキャンバス全体の縮小画像を表示し、大きな画像でもレイアウトやバランスを確認しながら描けるナビゲーション・ビューです。

普通に使うだけならば特に説明の必要もないくらい、使い方は簡単です。

[表示設定→+ナビ表示]を選択すると、画面の左上に青色のCloverが作成されます。それをタップするとナビ表示、もう一度押すと消えます。(ナビ表示のUIはダイアログ系を除くすべてのUIより優先して手前に表示されます。)

背景色がそのまま表示されている矩形部分が編集中のイメージ内で、現在端末に表示されている領域です。 灰色になっているのは画面外で、ここをドラッグするとナビ表示を移動できます。(後述のオプションによって動作は変わります)

 

ナビ表示は主に以下3つの使い方を想定していて、それらを実現できるよう設定画面には多数のオプションスイッチがあります。(ナビ表示Cloverは複数作成できますが、実際のナビ表示は同時にはできません。というか、無意味で操作が面倒、さらに重くなるだけだと感じたので

  1. 通常のナビ(表示領域をつまんでドラッグ移動or領域外ダブルタップでジャンプ移動)
  2. 端末画面全体に縮小画像を表示し全体を確認。縮小画像ダブルタップでジャンプ移動と同時にナビを閉じる。
  3. ナビをオーバーラップ表示し、タッチイベントを透過。スマホでの下描き等に。

 

 
クローバーアイコン移動の禁止 全Clover共通
クローバーアイコンの強制表示 全Clover共通
操作イベント透過 ナビ表示領域へのタッチを無視して下のキャンバスやUIを操作できるようにします。ナビの移動等は設定画面から行えます。
表示矩形ドラッグ ナビ表示内の端末に表示されている領域を表す矩形をドラッグすることで画面移動できるようにするかどうかを指定します。
ナビ表示ウインドウ移動の禁止 通常は編集イメージの表示矩形外をドラッグするとナビ表示が移動しますがそれを禁止します。
禁止状態ではダブルタップでの移動が有効になります。
また、幅と高さに端末の全画面を覆う数値を指定している場合、移動後に自動的にナビ表示をOffにします。
ストローク中消去 ストローク中にナビ表示を消します。メインオプションの「UI非表示」が有効な場合にのみ追従します。
背景色 編集中のイメージ領域の、ここでの(ナビ表示での)背景色を指定します。
背景色流用 「背景色」での指定を無視して、「イメージ→BG▽→色…」での背景色設定を利用するスイッチです。
フレーム色 ナビ表示のウインドウ枠の色として使われます。
表示エリア枠色 ナビ表示内の編集中のキャンバスイメージ全体のうち、端末に表示されている領域を示す枠線の色を指定します。
表示エリア外色 ナビ表示内の編集中のキャンバスイメージ全体のうち、端末に表示されている領域外を覆う色を指定します。
原点表示色 仮想イメージ座標の原点を示すラインの表示色を指定します。
表示枠マージン キャンバスイメージ全体の矩形と、ウインドウ枠の間に最低何ピクセルのマージンを取るか指定します。
ウインドウ幅 ウインドウの表示幅を指定します(ポートレート表示基準)
ウインドウ高さ ウインドウの表示高さを指定します
ウインドウ位置X ウインドウの左上座標のX軸値を指定します
ウインドウ位置Y ウインドウの左上座標のY軸値を指定します
イメージ不透明度 キャンバスイメージの表示不透明度を指定します。
不透明処理はGPUで行なっていますが、一部端末では表示されなかったりうまく半透明化されなかったりする可能性があります。
その場合[オプション→スプライトの合成タイプ]の設定を変えることで改善されるかもしれません。
選択時のCloverアイコン不透明度 ナビ表示中のCloverアイコン不透明度
非選択時のCloverアイコン不透明度 ナビ非表示中のCloverアイコン不透明度
高精度な縮小 ナビ表示に使われる縮小画像用にミップマップテクスチャを作成します。
美しい縮小画像がリアルタイム表示されますが、3割強ほどVRAM利用量が増え、ストローク中の処理が多少重くなります。
(この設定はClover毎ではなく、システム全体で共有されます)

 

1番めの 通常のナビは「ウインドウ幅」「ウインドウ高さ」で好みのサイズに変更し、表示位置も調整してから、「ナビ表示ウインドウ移動の禁止」で移動を禁止すると、ダブルタップでの移動が有効になります。ナビ表示移動の方が重要ならこのスイッチは無効のままで。

 

2番のナビ用の設定は通常設定のナビから、

  • 「表示矩形ドラッグ」をOff
  • 「フレーム色」を完全不透明な黒
  • 「表示エリア枠色」を不透明度0
  • 「表示エリア外色」を不透明度0
  • 「表示枠マージン」を0
  • 「ウインドウ幅」を最大
  • 「ウインドウ高さ」を最大

これらを設定することで得られます。

 

3番目の設定は、「操作イベント透過」を使いますが、他の設定はご自分で使いやすいよう工夫して下さい。

本来ならナビ表示の画像を別の単一色に変換する処理ができればよかったのですが、CPUでやると非常に遅くなり、かといってGPUでやろうにも機種毎に動作があまりにも違いすぎ、不透明度表現すら簡単に共通化できない現状では難しいと判断しました。

 

ナビ表示に関しては以上です。

今回は他にもいくつか便利な修正点・追加機能があります。

 

Undo/RedoショートカットのClover化

メインボタンの「元に戻す→+元に戻す/+やり直し」からUndo/Redoのショートカット機能を持ったCloverをキャンバス上に作成できます。後述のオプションと組み合わせ、通常Menuキーに割り当てられている表示モード切り替えで他のUIが消去されている状態でも、特定のCloverは好きな位置に表示したままにして利用できます。

 

 

全Clover共通オプションに「クローバーアイコンの強制表示」を追加

このスイッチがOnになっているデスクトップ上のCloverショートカットは、表示モード切り替えで全UIの表示Offの状態でも表示されたままになります。

 

オートセーブ機能

メモリ不足や電池切れ、またはアプリのバグ等でイメージ編集中に落ちる可能性への対策としてオートセーブ機能を追加しました。

[ギャラリー→オプション→自動セーブ(編集回数/無操作時間)」でオートセーブ開始トリガ条件を指定できます。両方の条件が満たされた時セーブします。

 

ホバー時カーソル表示

一部スタイラス対応の端末ではホバー中にカーソル位置が検出できますが、その表示は、これまでホバー時のショートカットにスポイトを設定するか、設定画面でのみ有効でした。

最新版ではカーソルの表示スイッチを独立させ、ショートカットに何も機能を割り当てていない場合でもホバーカーソルだけは表示できるようにしました。

 

更新内容は以上です。

今回はUIに関する改善が殆どなので、Paint/メモ版共通のアップデート内容となっています。

Clover周りもより便利になりました。工夫して、ぜひあなたの作業効率を上げて下さい。