Class: ArtboardController

ArtboardController

new ArtboardController

DrawingLogicを使って描画を行うコントローラ

Members

artboardCommandLogic :ArtboardCommandLogic

描画におけるコマンドを管理するロジック

drawingLogic :DrawingLogic

図形の描画を行うロジック

imageSourceMap

画像IDと画像パスのマップ

ここに設定されたマップは、ArtboardController初期化時(__init時)にdrawingLogicのimageSouceMapにも適用されます。

この設定をdrawingLogicで有効にするには、ArtboardControllerの__initが呼ばれる前(親コントローラの__initなど)で設定してください。

See:

selectionLogic :SelectionLogic

図形の選択・非選択を管理するロジック

<static> MODE_CIRCLE

描画モード定数：円(塗りつぶしなし)描画モード

setModeで設定できるモードの一つです。

<static> MODE_DISABLE

描画モード定数：使用不可モード

setModeで設定できるモードの一つです。

<static> MODE_FILL_CIRCLE

描画モード定数：円(塗りつぶしあり)描画モード

setModeで設定できるモードの一つです。

<static> MODE_FILL_RECT

描画モード定数：矩形(塗りつぶしあり)描画モード

setModeで設定できるモードの一つです。

<static> MODE_LINE

描画モード定数：直線描画モード

setModeで設定できるモードの一つです。

<static> MODE_PEN

描画モード定数：ペン描画モード

setModeで設定できるモードの一つです。

<static> MODE_RECT

描画モード定数：矩形(塗りつぶしなし)描画モード

setModeで設定できるモードの一つです。

<static> MODE_SELECT

描画モード定数：図形選択モード

setModeで設定できるモードの一つです。

<static> MODE_TEXT

描画モード定数：テキスト描画モード

setModeで設定できるモードの一つです。

Methods

".selection-rectangle h5trackend"

選択された図形のトラック操作終了

Parameters:
Name Type Description
context Object イベントコンテキスト
$el jQuery イベントターゲット

".selection-rectangle h5trackmove"

選択された図形のトラック操作

Parameters:
Name Type Description
context Object イベントコンテキスト
$el jQuery イベントターゲット

".selection-rectangle h5trackstart"

選択された図形のトラック操作開始

Parameters:
Name Type Description
context Object イベントコンテキスト
$el jQuery イベントターゲット

"{rootElement} h5trackend"

選択モード時のトラック操作のハンドラ

Parameters:
Name Type Description
context Object イベントコンテキスト

"{rootElement} h5trackmove"

選択モード時のトラック操作のハンドラ

Parameters:
Name Type Description
context Object イベントコンテキスト

"{rootElement} h5trackstart"

選択モード(canvasが無い)時のトラック操作のハンドラ

Parameters:
Name Type Description
context Object イベントコンテキスト

"{this._canvas} h5trackend"

canvas要素のトラックイベント

Parameters:
Name Type Description
context Object イベントコンテキスト

"{this._canvas} h5trackmove"

canvas要素のトラックイベント

Parameters:
Name Type Description
context Object イベントコンテキスト

"{this._canvas} h5trackstart"

canvas要素のトラックイベント

canvasにイベントが来るのは描画モードの場合のみ

Parameters:
Name Type Description
context Object イベントコンテキスト

"{this._layers} mousemove"

選択モード時のmousemoveイベントハンドラ

Parameters:
Name Type Description
context Object イベントコンテキスト

append

図形の追加

Parameters:
Name Type Description
shape ArtShape

beginUpdate

アップデートセッションの開始

図形描画時には自動的にundoデータが作成されますが、このメソッドを呼ぶと、 次にendUpdateを呼ぶまで、undoデータは作られません。 図形に対する複数の操作を纏めてudno/redoの対象にしたい時にこのメソッドを使用してください。

clearBackgroundImage

背景画像をクリアします

clearCanvas

canvasをクリア

ArtShapeの生成された確定済みの図形はcanvas上には無いので削除されません。

drawEllipse

楕円を描画する

Parameters:
Name Type Description
cx Number 楕円の中心位置のx座標
cy Number 楕円の中心位置のy座標
rx Number 楕円の水平方向の半径
ry Number 楕円の垂直方向の半径
isFill Boolean 塗りつぶすかどうか
Returns:
Type
ArtEllipse

drawImage

画像の配置

クローンしてdivレイヤに配置します

Parameters:
Name Type Description
data Object 

{
	x: x座標,
	y: y座標,
	width: 幅,
	height: 高さ,
	id: 画像ID。idが指定された場合、imageSrcMapから描画する画像パスを探します
	// src: 画像パス。IDが指定されている場合はsrcの指定は無効です。
}
Returns:
Type
ArtImage

drawPath

パスを描画する

SVGのpath要素のd属性の記述方法でパスを指定します 


// 例：(100px,200px)の位置から(x,y)方向に(10px,20px)移動し、その後その場所から(-10px,-10px)移動するようなデータの場合
'M 100 200 l 10 20 -10 -10'

Parameters:
Name Type Description
pathData String
Returns:
Type
ArtPath

drawRect

矩形を描画する

Parameters:
Name Type Description
x Number 左上のx座標
y Number 左上のy座標
width Number 正方形の幅
height Number 正方形の高さ
isFill Boolean 塗りつぶすかどうか
Returns:
Type
ArtRect

drawText

テキストの配置

svgレイヤに配置します

Parameters:
Name Type Description
data Object 

{
 x: 左上のx座標,
 y: 左上のy座標
 text: 入力文字列,
 font: フォント,
 fontSize: フォントサイズ
}
Returns:
Type
ArtImage

endUpdate

アップデートセッションの終了

beginUpdateで開始したとアップデートセッションを終了します。

Parameters:
Name Type Description
noExecute boolean アップデートセッション中に生成されたコマンドのうち、未実行のものを実行しない場合はtrueを指定

getAllShapes

管理下にある図形を全て取得します

Parameters:
Name Type Description
exceptAlone Boolean trueの場合描画されている図形のみ
Returns:
Type
ArtShape[]

getImage

描画されている図形を画像データにして返します

このメソッドはプロミスを返し、非同期で画像のデータURLを返します。画像が使用されている場合は非同期になる場合があります。

Parameters:
Name Type Argument Default Description
returnType string <optional>
 "image/png" imgage/png, image/jpeg, image/svg+xml のいずれか
processParameter Object <optional>
 パラメータ詳細についてはDrawingLogic#getImageと同じです。
Returns:
doneハンドラに'data:'で始まる画像データURLを渡します
Type
Promise

getSelectedShapes

選択されている図形リストを取得

Returns:
Type
Shapes[]

getShapeID

渡された図形のIDを返します

Parameters:
Name Type Description
shape ArtShape
Returns:
Type
String

load

セーブデータををロードして描画します

Parameters:
Name Type Description
artboardSaveData DrawingSaveData

redo

操作のやり直し

remove

図形の削除

Parameters:
Name Type Description
shape ArtShape

save

描画されている図形からセーブデータを作成します

useSrcオプションがtrueの場合、背景画像について画像IDではなくパス(srcの値)で保存します。

画像IDで保存されたデータを復元する場合は、保存時と同一のimageSrcMapの登録が必要です。 別ページで保存データを利用する場合などで同一のimageSrcMapを使用しない場合は、useSrcにtrueを指定してパスで保存したデータを使用してください。

Parameters:
Name Type Description
true指定の場合useSrc Boolean 画像IDではなくパス(srcの値)で保存します
Returns:
Type
DrawingSaveData

select

図形の選択

Parameters:
Name Type Description
shapes Shape | Shape[]
isExclusive Boolean trueの場合は既に選択状態の図形について選択状態を解除する

selectAll

全ての描画されている図形を選択状態にする

setBackground

背景色と背景画像の設定

背景色と背景画像の設定を行います。

背景色と背景画像を同じアップデートセッションで設定します。個別に設定する場合はsetBackgroundColorとsetBackgroundImageを使用してください

Parameters:
Name Type Description
color String 背景色。指定無しの場合は背景色は変更しません
backgroundImageData Object 背景画像データ。指定無しの場合は背景画像は変更しません

背景画像データの記述方法はのパラメータを参照してください

setBackgroundColor

背景色の設定

Parameters:
Name Type Description
color String 色

setBackgroundImage

背景画像の設定

設定パラメータについてはDraiwingLogic#setBackgroundImageをご覧ください

Parameters:
Name Type Description
data Object

setFillColor

塗りつぶしの色の設定

Parameters:
Name Type Description
color String

setFillOpacity

塗りつぶしのopacity設定

Parameters:
Name Type Description
opacity Number | String 0～1の数値で指定

setMode

描画モードの設定

Parameters:
Name Type Description
mode

setPolygonLinejoin

多角形の継ぎ目に利用される形状

Parameters:
Name Type Description
polygonLinejoin String bevel, round, miterのいずれかを指定

setSize

描画領域のサイズを変更します

描画操作を行うcanvas要素及び、

Parameters:
Name Type Description
width number 変更後の幅(px)
height number 変更後の高さ(px)

setStrokeColor

線の色の設定

Parameters:
Name Type Description
color String

setStrokeLinecap

ストロークの両端に利用される形状

Parameters:
Name Type Description
strokeLinecap String butt, round, squareのいずれかを指定

setStrokeLinejoin

ストロークされる際の継ぎ目に利用される形状

Parameters:
Name Type Description
strokeLinejoin String bevel, round, miterのいずれかを指定

setStrokeOpacity

線のopacity設定

Parameters:
Name Type Description
opacity Number | String 0～1の数値で指定

setStrokeWidth

線の太さ設定

Parameters:
Name Type Description
lineWidth

undo

操作の取り消し

unselect

図形の選択状態を解除

Parameters:
Name Type Description
shapes Shape | Shape[]

unselectAll

全ての選択状態である図形について選択状態を解除