Control
Defined in: src/controls/Control.ts:21
Constructors
Section titled “Constructors”Constructor
Section titled “Constructor”new Control(
options?):Control
Defined in: src/controls/Control.ts:142
Parameters
Section titled “Parameters”options?
Section titled “options?”Partial<Control>
Returns
Section titled “Returns”Control
Properties
Section titled “Properties”actionHandler
Section titled “actionHandler”actionHandler:
TransformActionHandler
Defined in: src/controls/Control.ts:154
The control actionHandler, provide one to handle action ( control being moved )
the native mouse event
properties of the current transform
x position of the cursor
y position of the cursor
Returns
Section titled “Returns”true if the action/event modified the object
actionName
Section titled “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
Section titled “Default”'scale'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
Section titled “Default”0cursorStyle
Section titled “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
Section titled “Default”'crosshair'mouseDownHandler?
Section titled “mouseDownHandler?”
optionalmouseDownHandler:ControlActionHandler
Defined in: src/controls/Control.ts:164
The control handler for mouse down, provide one to handle mouse down on control
the native mouse event
properties of the current transform
x position of the cursor
y position of the cursor
Returns
Section titled “Returns”true if the action/event modified the object
mouseUpHandler?
Section titled “mouseUpHandler?”
optionalmouseUpHandler:ControlActionHandler
Defined in: src/controls/Control.ts:174
The control mouseUpHandler, provide one to handle an effect on mouse up.
the native mouse event
properties of the current transform
x position of the cursor
y position of the cursor
Returns
Section titled “Returns”true if the action/event modified the object
offsetX
Section titled “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
Section titled “Default”0offsetY
Section titled “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
Section titled “Default”0sizeX:
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
Section titled “Default”nullsizeY:
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
Section titled “Default”nulltouchSizeX
Section titled “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
Section titled “Default”nulltouchSizeY
Section titled “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
Section titled “Default”nullvisible
Section titled “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
Section titled “Default”truewithConnection
Section titled “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
Section titled “Default”falsex:
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
Section titled “Default”0y:
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
Section titled “Default”0Methods
Section titled “Methods”calcCornerCoords()
Section titled “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
Section titled “Parameters”objectCornerSize
Section titled “objectCornerSize”number
cornerSize from the fabric object holding the control (or touchCornerSize if isTouch is true)
centerX
Section titled “centerX”number
x coordinate where the control center should be
centerY
Section titled “centerY”number
y coordinate where the control center should be
isTouch
Section titled “isTouch”boolean
true if touch corner, false if normal corner
fabricObject
Section titled “fabricObject”Returns
Section titled “Returns”object
bl:
Point
br:
Point
tl:
Point
tr:
Point
cursorStyleHandler()
Section titled “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
Section titled “Parameters”eventData
Section titled “eventData”the native mouse event
control
Section titled “control”Control
the current control ( likely this)
fabricObject
Section titled “fabricObject”Returns
Section titled “Returns”string
getActionHandler()
Section titled “getActionHandler()”getActionHandler(
eventData,fabricObject,control):undefined|TransformActionHandler
Defined in: src/controls/Control.ts:197
Returns control actionHandler
Parameters
Section titled “Parameters”eventData
Section titled “eventData”the native mouse event
fabricObject
Section titled “fabricObject”on which the control is displayed
control
Section titled “control”Control
control for which the action handler is being asked
Returns
Section titled “Returns”undefined | TransformActionHandler
the action handler
getActionName()
Section titled “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
Section titled “Parameters”eventData
Section titled “eventData”the native mouse event
control
Section titled “control”Control
the current control ( likely this)
fabricObject
Section titled “fabricObject”Returns
Section titled “Returns”string
getMouseDownHandler()
Section titled “getMouseDownHandler()”getMouseDownHandler(
eventData,fabricObject,control):undefined|ControlActionHandler
Defined in: src/controls/Control.ts:212
Returns control mouseDown handler
Parameters
Section titled “Parameters”eventData
Section titled “eventData”the native mouse event
fabricObject
Section titled “fabricObject”on which the control is displayed
control
Section titled “control”Control
control for which the action handler is being asked
Returns
Section titled “Returns”undefined | ControlActionHandler
the action handler
getMouseUpHandler()
Section titled “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
Section titled “Parameters”eventData
Section titled “eventData”the native mouse event
fabricObject
Section titled “fabricObject”on which the control is displayed
control
Section titled “control”Control
control for which the action handler is being asked
Returns
Section titled “Returns”undefined | ControlActionHandler
the action handler
getVisibility()
Section titled “getVisibility()”getVisibility(
fabricObject,controlKey):boolean
Defined in: src/controls/Control.ts:274
Returns controls visibility
Parameters
Section titled “Parameters”fabricObject
Section titled “fabricObject”controlKey
Section titled “controlKey”string
key where the control is memorized on the
Returns
Section titled “Returns”boolean
positionHandler()
Section titled “positionHandler()”positionHandler(
dim,finalMatrix,fabricObject,currentControl):Point
Defined in: src/controls/Control.ts:291
Parameters
Section titled “Parameters”finalMatrix
Section titled “finalMatrix”fabricObject
Section titled “fabricObject”currentControl
Section titled “currentControl”Control
Returns
Section titled “Returns”render()
Section titled “render()”render(
ctx,left,top,styleOverride,fabricObject):void
Defined in: src/controls/Control.ts:348
Render function for the control. When this function runs the context is unscaled. unrotate. Just retina scaled. all the functions will have to translate to the point left,top before starting Drawing if they want to draw a control where the position is detected. left and top are the result of the positionHandler function
Parameters
Section titled “Parameters”CanvasRenderingContext2D
the context where the control will be drawn
number
position of the canvas where we are about to render the control.
number
position of the canvas where we are about to render the control.
styleOverride
Section titled “styleOverride”undefined | Partial<Pick<InteractiveFabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>, "cornerStyle" | "cornerSize" | "cornerColor" | "cornerStrokeColor" | "cornerDashArray" | "transparentCorners">>
fabricObject
Section titled “fabricObject”the object where the control is about to be rendered
Returns
Section titled “Returns”void
setVisibility()
Section titled “setVisibility()”setVisibility(
visibility,name,fabricObject):void
Defined in: src/controls/Control.ts:283
Sets controls visibility
Parameters
Section titled “Parameters”visibility
Section titled “visibility”boolean
for the object
string
fabricObject
Section titled “fabricObject”Returns
Section titled “Returns”void
shouldActivate()
Section titled “shouldActivate()”shouldActivate(
controlKey,fabricObject,pointer,__namedParameters):boolean
Defined in: src/controls/Control.ts:176
Parameters
Section titled “Parameters”controlKey
Section titled “controlKey”string
fabricObject
Section titled “fabricObject”pointer
Section titled “pointer”__namedParameters
Section titled “__namedParameters”Returns
Section titled “Returns”boolean