1.概要
手書きビューは、アプリユーザーがサインやイラストを手入力することができるコントロールです。以下では、「2.開発の手引き」にて、手書きビューでよく使う機能にかかわるサンプルプログラムがダウンロードできるほか、「3.パラメーター」では、手書きビューに設定するパラメーターのリファレンスを記載しています。
2.開発の手引き
この記事では、手書きビューを使いこなすうえでよく使うパラメーター設定をご紹介します。解説に使用しているサンプルプロジェクトは以下よりダウンロードできますので、ぜひご活用ください。
2-1.ラスター画像として手書きをする
電子署名など、出力結果をドットで保存する場合はラスター形式を使います。
2-1-1.ラスター用の設定をする
コントロールバーの「手書きビュー」を選択して画面上でドラッグして手書きビューを配置します。手書きビューを選択した状態で、プロパティーエリアの「データ」＞「内容」からラスターを選択します。
2-1-2.パレットの設定をする
手書きビューを選択した状態で、プロパティーエリアの「データ」＞「内容」から
「パレット」に、カンマで区切られた6桁の16進数がデフォルトで4つ定義されています。
線の太さも1,3,5とデフォルトで3つ定義されています。
①黒:000000 赤:FF0000 緑:00FF00 青:0000FF がそれぞれ該当します。
②太さについても、上から順に 1 3 5 となります。
画面では下図のように表示されます。
2-1-3.その他便利機能
ツール縮小ボタン、ツール非表示ボタン、削除ボタン の3つのON／OFFが設定できます。
ツール縮小ボタンは、カラーパレットと削除ボタンを表示したり非表示したりする機能です。
ツール非表示ボタンは、ツールバーそのものを非表示にする機能です。
削除ボタンは、手書き領域をまっさらな状態にする機能です
2-2.ベクター画像として手書きをする
イラストやマーカーピンなど、出力結果を線で保存する場合はベクター形式を使います。
ベクター画像の利点としては、拡大しても画質がギザギザにならず劣化しにくいことです。
2-2-1.ベクター用の設定をする
コントロールバーの「手書きビュー」を選択して画面上でドラッグして手書きビューを配置します。手書きビューを選択した状態で、プロパティーエリアの「データ」＞「内容」からベクターーを選択します
2-2-2.マーカー用の画像を設定する
手書きビューを選択した状態で、プロパティーエリアの「データ」＞「内容」から「マーカー画像選択」ボタンを押します。入力ダイアログが表示されるので、任意の画像を選択してください。
今回設定した「mappin_red.png」は以下となります。
2-2-3.その他便利機能
手書きビューを選択した状態で、プロパティーエリアの「データ」＞「内容」から
下図にあるオプションを設定できます。これはデフォルトの設定となります。
上図を左から説明します
ツール縮小ボタン：押すと、縮小ボタンから右の項目が隠れます。もう一度押すと表示されます。
ツール非表示ボタン：押すと、ツールバー全体が隠れます。手書きビューをクリックすると表示されます。
ペンボタン：線を書くボタンです。
マーカー：マーカー画像が選択されている場合のみ表示され、マーカーを入力できるようになります。
移動ボタン：背景画像が手書きビューより大きい場合、このボタンを押して背景画像を上下左右に移動できます。
拡大ボタン：押すと画像全体が拡大します。10％刻みとなります。
縮小ボタン：押すと画像全体が縮小します。10％刻みとなります。
ゴミ箱：押すと選択されたベクター画像部を削除することができます。
3.パラメーター
パラメーターを変更することで、簡単に手書きビューの位置や大きさ、背景やマーカーに表示する画像などを設定することができますので、それらを活用して、デザイン性に富んだ、わかりやすい画面を作成してみましょう。
オブジェクト
基本情報
| 名称 | コントロール名を入力します。 |
|---|---|
| サイズ | コントロールの幅と高さを指定します。 |
| 位置 | コントロールの位置を左と上から指定します。 |
| 余白 | コントロールの余白を左と右と上と下から指定します。 |
| 種類 | コントロールの種類を表示します。 |
| スタイル | 本コントロールではスタイルは選択することはできません。 |
可否
| 使用可 | コントロールを使用可能にする場合にチェックします。 |
|---|---|
| 表示 | コントロールを表示する場合にチェックします。 |
データ
内容
| ラスター | ラスター（点の集合）を表示する場合に選択します。 |
|---|---|
| ベクター | ベクター（図形の集合）を表示する場合に選択します。 |
内容（ラスター）
| 背景画像選択 | 背景画像にファイル名をパス付きで記述または、選択ボタンを押下で 画像ファイル選択ダイアロクを表示して設定します。 |
|---|---|
| パレット | 各パレットをカンマ区切りで色指定します。（RRGGBB 00〜FF） （例：000000,FF0000,00FF00,…） ツールバーにパレットボタンが表示されます。 |
| ペンサイズ | ペン太さをカンマ区切りでドットサイズ指定します。 （例：1,3,5,…） ツールバーにペンサイズボタンが表示されます。 |
| ツール縮小ボタン | 署名等で使用する場合、ツールバーエリアが邪魔な場合はこのボタン を押すとツール縮小ボタン以外は見えなくすることができます。 |
| ツール非表示ボタン | ツールバーを非表示にして、全体表示状態を確認します。 再度枠内をクリックするとツールバーが再表示されます。 |
| 削除ボタン | ペンでの描画を全削除します。 |
内容（ベクター）
| 背景画像選択 | 背景画像にファイル名をパス付きで記述または、選択ボタンを押下で 画像ファイル選択ダイアロクを表示して設定します。 |
|---|---|
| マーカー画像選択 | マーカー画像にファイル名をパス付きで記述または、選択ボタンを 押下で画像ファイル選択ダイアロクを表示して設定します。 |
| ツール縮小ボタン | 署名等で使用する場合、ツールバーエリアが邪魔な場合はこのボタン を押すとツール縮小ボタン以外は見えなくすることができます。 |
| ツール非表示ボタン | ツールバーを非表示にして、全体表示状態を確認します。 再度枠内をクリックするとツールバーが再表示されます。 |
| 削除ボタン | 選択中の手書き図形やマーカーを削除します。 |
| 選択ボタン | 手書き図形やマーカーを選択して編集を行います。 （移動、拡大縮小） |
| ペンボタン | 手書き図形ボタンを表示します。 |
| 移動ボタン | 背景をクリックしてドラックすることで移動できます。 |
| ズームボタン | ビューを拡大／縮小表示します。 拡大：1クリック＝1.1倍 縮小：1クリック＝0.9倍） |
※選択ボタンを押して背景画像をクリックして図形やマーカーを含めてドラッグすると複数のオブジェクトを選択して、移動、拡大縮小／削除が可能です。