Control

Properties

actionHandler

actionHandler: TransformActionHandler

Defined in: src/controls/Control.ts:154

The control actionHandler, provide one to handle action ( control being moved )

Param

the native mouse event

Param

properties of the current transform

Param

x position of the cursor

Param

y position of the cursor

Returns

true if the action/event modified the object

actionName

actionName: string = SCALE

Defined in: src/controls/Control.ts:43

Name of the action that the control will likely execute. This is optional. FabricJS uses to identify what the user is doing for some extra optimizations. If you are writing a custom control and you want to know somewhere else in the code what is going on, you can use this string here. you can also provide a custom getActionName if your control run multiple actions depending on some external state. default to scale since is the most common, used on 4 corners by default

Default

'scale'

angle

angle: number = 0

Defined in: src/controls/Control.ts:52

Drawing angle of the control. NOT used for now, but name marked as needed for internal logic example: to reuse the same drawing function for different rotated controls

Default

cursorStyle

cursorStyle: string = 'crosshair'

Defined in: src/controls/Control.ts:132

Css cursor style to display when the control is hovered. if the method cursorStyleHandler is provided, this property is ignored.

Default

'crosshair'

mouseDownHandler?

optional mouseDownHandler: ControlActionHandler

Defined in: src/controls/Control.ts:164

The control handler for mouse down, provide one to handle mouse down on control

Param

the native mouse event

Param

properties of the current transform

Param

x position of the cursor

Param

y position of the cursor

Returns

true if the action/event modified the object

mouseUpHandler?

optional mouseUpHandler: ControlActionHandler

Defined in: src/controls/Control.ts:174

The control mouseUpHandler, provide one to handle an effect on mouse up.

Param

the native mouse event

Param

properties of the current transform

Param

x position of the cursor

Param

y position of the cursor

Returns

true if the action/event modified the object

offsetX

offsetX: number = 0

Defined in: src/controls/Control.ts:84

Horizontal offset of the control from the defined position. In pixels Positive offset moves the control to the right, negative to the left. It used when you want to have position of control that does not scale with the bounding box. Example: rotation control is placed at x:0, y: 0.5 on the boundind box, with an offset of 30 pixels vertically. Those 30 pixels will stay 30 pixels no matter how the object is big. Another example is having 2 controls in the corner, that stay in the same position when the object scale. of the bounding box.

Default

offsetY

offsetY: number = 0

Defined in: src/controls/Control.ts:92

Vertical offset of the control from the defined position. In pixels Positive offset moves the control to the bottom, negative to the top.

Default

sizeX

sizeX: number = 0

Defined in: src/controls/Control.ts:100

Sets the length of the control. If null, defaults to object’s cornerSize. Expects both sizeX and sizeY to be set when set.

Default

null

sizeY

sizeY: number = 0

Defined in: src/controls/Control.ts:108

Sets the height of the control. If null, defaults to object’s cornerSize. Expects both sizeX and sizeY to be set when set.

Default

null

touchSizeX

touchSizeX: number = 0

Defined in: src/controls/Control.ts:116

Sets the length of the touch area of the control. If null, defaults to object’s touchCornerSize. Expects both touchSizeX and touchSizeY to be set when set.

Default

null

touchSizeY

touchSizeY: number = 0

Defined in: src/controls/Control.ts:124

Sets the height of the touch area of the control. If null, defaults to object’s touchCornerSize. Expects both touchSizeX and touchSizeY to be set when set.

Default

null

visible

visible: boolean = true

Defined in: src/controls/Control.ts:30

keep track of control visibility. mainly for backward compatibility. if you do not want to see a control, you can remove it from the control set.

Default

true

withConnection

withConnection: boolean = false

Defined in: src/controls/Control.ts:140

If controls has an offsetY or offsetX, draw a line that connects the control to the bounding box

Default

false

x

x: number = 0

Defined in: src/controls/Control.ts:61

Relative position of the control. X 0,0 is the center of the Object, while -0.5 (left) or 0.5 (right) are the extremities of the bounding box.

Default

y

y: number = 0

Defined in: src/controls/Control.ts:70

Relative position of the control. Y 0,0 is the center of the Object, while -0.5 (top) or 0.5 (bottom) are the extremities of the bounding box.

Default

Methods

calcCornerCoords()

calcCornerCoords(angle, objectCornerSize, centerX, centerY, isTouch, fabricObject): object

Defined in: src/controls/Control.ts:312

Returns the coords for this control based on object values.

Parameters

angle

TDegree

objectCornerSize

number

cornerSize from the fabric object holding the control (or touchCornerSize if isTouch is true)

centerX

number

x coordinate where the control center should be

centerY

number

y coordinate where the control center should be

isTouch

boolean

true if touch corner, false if normal corner

fabricObject

Returns

object

bl

bl: Point

br

br: Point

tl

tl: Point

tr

tr: Point

cursorStyleHandler()

cursorStyleHandler(eventData, control, fabricObject): string

Defined in: src/controls/Control.ts:245

Returns control cursorStyle for css using cursorStyle. If you need a more elaborate function you can pass one in the constructor the cursorStyle property

Parameters

eventData

the native mouse event

control

the current control ( likely this)

fabricObject

Returns

string

getActionHandler()

getActionHandler(eventData, fabricObject, control): undefined | TransformActionHandler

Defined in: src/controls/Control.ts:197

Returns control actionHandler

Parameters

eventData

the native mouse event

fabricObject

on which the control is displayed

control

control for which the action handler is being asked

Returns

undefined | TransformActionHandler

the action handler

getActionName()

getActionName(eventData, control, fabricObject): string

Defined in: src/controls/Control.ts:260

Returns the action name. The basic implementation just return the actionName property.

Parameters

eventData

the native mouse event

control

the current control ( likely this)

fabricObject

Returns

string

getMouseDownHandler()

getMouseDownHandler(eventData, fabricObject, control): undefined | ControlActionHandler

Defined in: src/controls/Control.ts:212

Returns control mouseDown handler

Parameters

eventData

the native mouse event

fabricObject

on which the control is displayed

control

control for which the action handler is being asked

Returns

undefined | ControlActionHandler

the action handler

getMouseUpHandler()

getMouseUpHandler(eventData, fabricObject, control): undefined | ControlActionHandler

Defined in: src/controls/Control.ts:228

Returns control mouseUp handler. During actions the fabricObject or the control can be of different obj

Parameters

eventData

the native mouse event

fabricObject

on which the control is displayed

control

control for which the action handler is being asked

Returns

undefined | ControlActionHandler

the action handler

getVisibility()

getVisibility(fabricObject, controlKey): boolean

Defined in: src/controls/Control.ts:274

Returns controls visibility

Parameters

fabricObject