OutSystems Forge 日本語データベース [特選]

DrawingFabric

※このページで、ご紹介しているモジュールのダウンロードは、こちらまでお問合せください。
2019-01-14 3.0.0 Components, Widgets
手書き、直線、円形、四角形などの描画が可能なお絵描きプラグインです。オープンソースのfabric.jsをコアにペイントソフトに似たシンプルな機能が備わっているので、簡単な地図等をブラウザ上で書くことができます。

特徴

DrawingFabricの主な機能は、以下になります。

  • 手書き線（線色、線幅設定）
  • 直線（線色、線幅設定）
  • 四角形（線色、枠内色、線幅設定）
  • 円形（線色、枠内色、線幅設定）
  • テキスト（フォントサイズ、フォント色設定）
  • 画像貼り付け
  • オブジェクトロック/アンロック
  • カラーパレット
  • クリップボード経由コピー
  • PNGへ保存
  • 矢印キーによるオブジェクト移動
  • TABキーによるオブジェクト選択

利用方法

　入力パラメーター

  • DrawingDataId・・・描画データを格納するInputWidgetのId
  • CanvasId・・・要素idを変更する場合に利用（初期値："c"）
  • Width・・・キャンバスの幅(初期値：800)
  • Height・・・キャンバスの高さ（初期値：500）
  • Background・・・キャンバスの背景（初期値："ffffff"）
  • BackgroundUrl・・・キャンバスのデフォルト背景画像（Data URIスキーム→data:image/png;base64など、か画像URLを指定）
  • MaxFileSize・・・ファイル添付時の最大ファイルサイズ（初期値：1024バイト）
  • ColorPalette・・・カラーパレットの基本色

初期値：

"'#54C3F1','#6C9BD2','#796BAF','#BA79B1','#EE87B4','#EF858C','#EF845C','#F9C270','#FFF67F','#C1DB81','#69BD83',
'#61C1BE','#EFEFEF','#DCDDDD','#9FA0A0','#000000','#FFFFFF','rgba(0, 0, 0, 0)'"

　データ保存

  1. 描画データ保存用のローカル変数（Text）を画面に準備します。


  2. 描画データ保存用のローカル変数は、Inputと紐づけます。
    Input のNameは必ず記入してください。


  3. Preparationでデータベースのバイナリデータをテキストへ変換します。
  4. データ保存時には、テキストをバイナリに変換します。必要な場合、データサイズの上限をバリデーションチェックしてください。

　その他

CTLR＋C、CTLR＋Vを使用した場合、データはすべてクリップボードを経由します。
扱えるデータは、テキスト、画像、キャンバスオブジェクト（JSON）になります。
なお、キャンバス上の右クリックによるコンテキストメニューでのコピーは、JavaScriptのオブジェクトをコピーします。

戻る