Class: DrawingLogic

DrawingLogic

new DrawingLogic

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

Members

imageSourceMap :Object

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

画像の描画時(drawImageやsetBackgroundImage)に画像パスの代わりに画像IDを渡すと、このマップに登録された画像パスを使用します。 画像IDを使って画像を指定する場合はこのオブジェクトに直接登録してください。

Methods

append

図形を追加

Parameters:
Name Type Description
layer {DOM|jQuery} 追加先レイヤ

clearBackgroundImage

背景画像のクリア

背景画像を削除します

drawCircle

真円描画

ArtEllipseで新円を作成して描画します。

Parameters:
Name Type Description
cx Integer 円の中心位置のx座標
cy Integer 円の中心位置のy座標
r Integer 円の半径
style Object スタイル指定オブジェクト
Returns:
Type
ArtEllipse

drawEllipse

楕円描画

ArtEllipseで楕円を作成して描画します。

Parameters:
Name Type Description
cx Integer 楕円の中心位置のx座標
cy Integer 楕円の中心位置のy座標
rx Integer 楕円の水平方向の半径
ry Integer 楕円の垂直方向の半径
style Object スタイル指定オブジェクト
Returns:
Type
ArtEllipse

drawImage

画像の配置

ArtImageで画像図形を作成して描画します。

Parameters:
Name Type Description
data Object 

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

参照：imageSourceMap

Returns:
Type
ArtImage

drawPath

パス(フリーハンド、直線、多角形)描画

ArtPathでパスを作成して描画します。

Parameters:
Name Type Description
data Object 
{
	// SVGのpath要素のd属性に基づきます
	d: 'M (x座標開始位置) (y座標開始位置) l[ (x座標軌跡) (y座標軌跡)]...'
	sty:e style指定オブジェクト
}
// 例：(100px,200px)の位置から(x,y)方向に(10px,20px)移動し、その後その場所から(-10px,-10px)移動するようなデータの場合
{
	d: 'M 100 200 l 10 20 -10 -10'
	sty:e {stroke:'rgb(255,0,0)', strokeWidth:'5px'}
}
Returns:
Type
ArtPath

drawRect

長方形描画

ArtRectで長方形図形を作成して描画します。

Parameters:
Name Type Description
x Integer 左上のx座標
y Integer 左上のy座標
width Integer 正方形の幅
height Integer 正方形の高さ
style Object スタイル指定オブジェクト
Returns:
Type
ArtRect

drawSquare

正方形描画

ArtRectで正方形図形を作成して描画します。

Parameters:
Name Type Description
x Integer 左上のx座標
y Integer 左上のy座標
width Integer 正方形の幅(=正方形の高さ)
style Object スタイル指定オブジェクト
Returns:
Type
ArtRect

drawText

テキストの配置

ArtTextで文字列図形を作成して描画します。

Parameters:
Name Type Description
data Object 

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

getAllShapes

ロジック管理下にある図形(Shape)を全て取得します

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>
 画像出力時設定オブジェクト
Properties
Name Type Argument Default Description
simulateItalic boolean <optional>
 false italicの指定されたArtTextオブジェクトの画像化の際に、指定されているフォントがitalic体を持たない場合に、変形して出力を行うかどうか

Firefox以外のブラウザでは、italic体を持たないフォントについてもブラウザが自動で変形を行うので、このフラグを指定しても結果は変わりません。

Firefoxの場合は、フォントファイルにitalick体が含まれていない場合、italicを指定してもブラウザによる自動変形は行われず、canvasに斜体を描画しません。

このフラグをtrueにすることで、italic体を持たないフォントについて、斜体をシミュレートするように変形を行います。

size Object <optional>
 サイズオブジェクト。指定しない場合は範囲指定に合わせたサイズまたは描画領域のサイズで保存されます。
Properties
Name Type Description
width number 出力する画像の幅(px)
height number 出力する画像の高さ(px)
Returns:
doneハンドラに'data:'で始まる画像データURLを渡します
Type
Promise

getShapeID

図形のIDを返します。(ロジック管理下にある図形のみ)

Parameters:
Name Type Description
shape ArtShape
Returns:
Type
String

init

初期化処理

Parameters:
Name Type Description
drawingElement DOM 図形描画領域レイヤ要素
backgroundElement DOM 背景領域レイヤ要素
artboardCommandManager h5.ui.components.artboard.logic.ArtboardCommandLogic アートボードコマンドマネージャ

load

セーブデータををロード

saveで生成したセーブデータをロードして描画します

Parameters:
Name Type Description
drawingSaveData DrawingSaveData

redo

直前に取り消した操作を再実行します

Returns:
アートボードコマンドマネージャのredo結果
Type
Any

save

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

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

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

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

setBackgroundColor

背景色の設定

背景色の設定をします。引数にはCSSカラー形式の文字列を指定してください。

Parameters:
Name Type Description
color String 色

setBackgroundImage

背景画像の設定

画像ID(imageSourceMapに登録された画像のID) またはファイルパスと、画像の配置モードを指定したオブジェクトを渡してください

画像の配置モード(fillMode)は以下のいずれかを文字列で指定します

  • none : 画像のサイズを変更せずに左上を原点として描画
  • contain : アスペクト比を保持して、全体が見えるように描画（描画領域と画像のアスペクト比が異なる場合は隙間ができます）
  • containCenter : サイズをcontainで計算して、位置を中央配置にして描画
  • cover : アスペクト比を保持して、隙間が出ないように描画（描画領域と画像のアスペクト比が異なる場合は画像が描画領域をはみ出します）
  • stretch : アスペクト比を無視して、描画領域を埋めるように描画

offsetX, offsetYは、fillMode指定によって決定した位置を基準として、そこからの座標位置を指定します。

Parameters:
Name Type Description
data Object 

{
	id: 画像ID。idが指定された場合、imageSourceMapから描画する画像パスを探します
	// src: 画像パス。IDが指定されている場合はsrcの指定は無効です。
	fillMode: 画像の配置モード('none'|'contain'|'containCenter'|'cover'|'stretch') 指定のない場合は'none'で描画します,
	offsetX: 背景画像位置のx座標のオフセット(デフォルト:0),
	offsetY: 背景画像位置のy座標のオフセット(デフォルト:0)
}

setSize

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

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

undo

直前の操作を取り消します

Returns:
アートボードコマンドマネージャのundo結果
Type
Any