はじめに
OutSystemsを利用した開発で、Web上で図形など簡単な描画をしたいというリクエストを見かけるようになりました。何等かの申請業務で地図の場所や写真の箇所などを手書きで記入する例が多いようです。そこで、これを実現するためのアプリ「DrawingCanvas」をOutSystemsのForgeにアップしたのでご紹介します。
「DrawingCanvas」の特徴は、HTML canvas上のデータをオブジェクトとして扱うので、画像データが軽量です。また、一般的なショートカットキー（コピー：Ctrl+c、移動：→←↑↓ など）や画像ファイルのドラッグ＆ドロップ、そしてモバイル端末での2点タッチによるピンチズームなどにも対応しており、様々な環境における利便性を追求しています。
今回は、Googleマップにマーキングをする例で使い方を整理します。
DrawingCanvas
Googleマップを切り取る
GoogleマップをJavaScriptでキャプチャするにはStaticマップでなければならなかったり、制限が多いものです。
Windowsのショートカットを使えば、これはすぐに解決します。[Windows]＋[Shift]＋[S]でGoogleマップの切り取りたい場所をキャプチャします。
DrawingCanvasの背景登録画面を開く
クリップボードのデータをキャンバスに貼り付け保存
DrawingCanvasは、[Ctrl]＋[V]で画像をそのまま貼り付けることができます。
また、すでに画像ファイルがある場合には、ファイルのドラッグ＆ドロップでも画像を貼り付けることができます。
保存時にはサムネイルも生成されるので、一覧表示時などの負荷を軽減しています。
ドラッグ＆ドロップの方法
URL経由で背景画像を設定
新規描画登録画面で、上記で登録した背景画像をURL経由で設定することができます。
背景画像として設定された画像はキャンバスに固定化されます。
なお背景画像を直接、キャンバスにBase64データ（バイナリをテキスト化したもの）として貼り付け固定化することはできますが、パフォーマンスの観点からは、背景画像など比較的大きなイメージは、この機能のように事前にデータベースへアップロード登録してそのURL（今回はREST API）を参照設定することをお勧めします。
また、このDrawingCanvasでは背景画像データをデータベースに保存していますが、格納するファイルの容量が大きくなる場合には、データベースよりコスト（性能、費用）を最適化できるファイルサーバーへの保存も検討のひとつになります。
描画キャンバスで背景画像設定ボタンをクリック
背景画像の選択
ここで選択した画像は、キャンバスデータ内に背景画像としてURLのリンクだけが埋め込まれるので、データも肥大化しません。
図形を描く
ツールバーのボタンをクッリクすることで図形を描くことができます。
パレットには透過色を登録することも可能です。
図形の円に吹き出しと矢印を描画してみました。円図形内は、透過色で塗つぶしています。
ちなみに、この描画に使用しているデータサイズは4KBです。座標やカラーの情報等だけをJsonテキストデータとして保持するので軽量です。
主な機能
ツールバー
| 機能 | 説明 |
|---|---|
| 元に戻す | ひとつ前の状態に戻す |
| やり直す | ひとつ後の状態に戻す |
| 範囲選択 | オブジェクトを範囲選択 |
| 手書き | フリーハンドで自由な線を描画 |
| 直線 | 2点間に直線を描画 |
| 矢印 | 2点間に矢印を描画 |
| 長方形 | 2点間に囲まれた矩形を描画 |
| 楕円 | 2点間に囲まれた楕円を描画 |
| 枠線幅 | 図形の枠線幅を指定 |
| 枠線の色 | 図形の枠線色を指定 |
| 塗つぶし色 | 図形内を塗つぶす色を指定 |
| テキスト | テキストを入力 |
| 文字のサイズ | 文字のサイズ |
| 文字の色 | 文字の色 |
| 画像アップロード | 画像をアップロードし貼り付け |
| 全アンロック | オブジェクトのロックを全解除 |
| 全て削除 | オブジェクトをすべて削除 |
| PNGに保存 | キャンバスをPNGで保存 |
コンテキストメニュー
オブジェクトを右クリックすることで、コンテキストメニューを表示します。
| 機能 | 説明 |
|---|---|
| コピー | 対象のオブジェクトをコピー |
| 貼り付け | 対象のオブジェクトを貼り付け |
| 最前面へ移動 | 対象のオブジェクトを最前面へ移動 |
| 最背面へ移動 | 対象のオブジェクトを最背面へ移動 |
| グループ化 | 対象のオブジェクトをグループ化（ネスト不可） |
| グループ化解除 | 対象のオブジェクトをグループ化解除 |
| オブジェクトロック | オブジェクトを選択できないようにロック |
| 背景画像に設定 | 背景画像として設定し画像をロック |
| キャプチャ | 対象のオブジェクトをPNGファイルに保存 |
| 削除 | 対象のオブジェクトを削除 |
※キャプチャ機能が何気に便利です。Qiitaの画像資料を作成する時などもスクリーンショットで切り取った画像をキャンバス上で加工し対象のオブジェクトだけを選択して右クリックすれば直ぐにPNG画像（デフォルトは透過画像）として保存できます。
Windowsの Snipping Tool でも似たようなことは出来ますが、テキスト文字のタイピングや矢印の描画などは出来ないので、私はこの部分を気にいっています。
ショートカットキー
| 機能 | 説明 |
|---|---|
| Ctrl＋C | 対象のオブジェクトをコピー ※クリップボード経由になるので、他のキャンバスにデータを貼り付けることが可能 |
| Ctrl＋V | 対象のオブジェクトを貼り付け |
| Ctrl＋Ａ | 対象のオブジェクトを全件選択 |
| Del | 対象のオブジェクトを削除 |
| ↑ ↓ → ← | 対象のオブジェクトを移動 |
| Tab | オブジェクト間を移動 |
| Shift＋Tab | オブジェクト間を逆移動 |
| Ctrl＋ホイール | キャンバスのズームイン/ズームアウト |
ズームアウト時
なめらかな曲線
DrawingCanvasでは、手書き曲線をサポートしています。
よくある手書きソフトは、ドットの連続値で表現するものが多くマウスの振動を拾ったりして線がカクカクしたものになりがちですが、本製品では、近似曲線のベジエ曲線を採用していますので、曲線が非常に滑らかです。
開発部品
DrawingCanvasの入力パラメータであるCanvasDataは、図形の形状や位置情報などを記述した独自のJsonフォーマットでやり取りされます。
{"version":"5.2.0","objects":[{"type":"ellipse","version":"5.2.0","originX":"left","originY":"top","left":316,"top":113,"width":156,"height":160,・・・・・}
テキストデータが長くなることも想定されるので、データ保存時にはテキストをバイナリ化してデータベースに登録します。
なお、このバイナリデータは、GetCanvasJsonクライアントアクションによりJson形式のバイナリ値としてキャンバスから取得できます。
■ DrawingCanvasブロック
キャンバス上に図形や画像データなどを加工するためのUI部品です。
| 入力パラメータ | 必須 | 初期値 | 説明 |
|---|---|---|---|
| CanvasData | No | なし | キャンバス（JSON形式）のバイナリデータ |
| CanvasId | No | c | ひとつの画面上に複数のCanvasが存在する場合のユニーク値 |
| Width | No | 800 | キャンバスの幅（px） |
| Height | No | 500 | キャンバスの高さ（px） |
| BackgroundColor | No | なし | キャンバスの背景色 |
| BackgroundImageUrl | No | なし | キャンバスの背景画像 画像のURLまたはデータURIスキームの指定（データ：image / png; base64など） |
| FitBackgroundImage | No | 0 | 背景画像をキャンバスサイズへ自動で拡大縮小 0 : なし 1 : 幅と高さを合わせる 2 :比率を維持しながら横幅を合わせる 3 : 比率を維持しながら高さを合わせる |
| MaxFileSize | No | 1000 | 画像をアップロードする時の画像の最大容量（KB） |
| MaxHistory | No | 10 | Undo/Redoの繰り替えし最大回数 |
| UserId | No | なし | 描画オブジェクトにユーザーIdを設定 誰がどのオブジェクトを作成したかを記録する時に利用 |
| IsView | No | False | 編集なしのビューモード（True） |
| License | No | なし | ライセンスキー |
■ ResizableCanvasブロック
任意のサイズにキャンバスデータを描画するためのUI部品です。
一覧表示などで、キャンバスを小さく表示したいときに利用します。大きさを変えるには、WidthやHeightはDrawingCanvasを保存したときの正規の値を設定し、ResizableCanvasブロックをコンテナーで囲み、そのコンテナーに幅などのサイズを指定します。
※一覧では、ひとつの画面に複数のUI部品が配置されることになるので、CanvasId入力パラメータはレコードIDなどを使いユニークな値にする必要があります。
| 入力パラメータ | 必須 | 初期値 | 説明 |
|---|---|---|---|
| CanvasData | No | なし | キャンバス（JSON形式）のバイナリデータ |
| CanvasId | No | c | ひとつの画面上に複数のCanvasが存在する場合のユニーク値 |
| Width | No | 800 | キャンバスの幅（px）※この値でサイズ変更はしません |
| Height | No | 500 | キャンバスの高さ（px）※この値でサイズ変更はしません |
| License | No | なし | ライセンスキー |
エンコード
Json形式のキャンバスデータは、データベース更新参照時にデフォルトではutf-8でエンコード/デコードされます。通常の日本語であればこれで問題ありませんが特殊な文字コードが含まれる場合には、エンコードをサイトプロパティーで変更できます。
まとめ
画像の処理は、けっこう面倒だったりしますが、ドラッグ＆ドロップや便利なショートカットをサポートしているので、ユーザーの作業効率アップに貢献することが可能です。
なおオブジェクトは、透過色が利用可能で、透過画像を簡単に作成することも出来ます。（経験的に透過画像ファイルを作るのは意外と面倒）
汎用的な機能であれば、新機能として追加する予定ですので、コメントいただけると助かります。