Control
Defined in: src/controls/Control.ts:31
Constructors
Section titled “Constructors”Constructor
Section titled “Constructor”new Control(
options?):Control
Defined in: src/controls/Control.ts:157
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:181
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:53
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:62
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:142
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:191
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:201
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:94
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:102
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:110
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:118
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:126
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:134
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”nulltransformAnchorPoint?
Section titled “transformAnchorPoint?”
optionaltransformAnchorPoint:object
Defined in: src/controls/Control.ts:152
x:
TOriginX
y:
TOriginY
visible
Section titled “visible”visible:
boolean=true
Defined in: src/controls/Control.ts:40
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:150
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:71
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:80
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:340
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
commonRenderProps()
Section titled “commonRenderProps()”commonRenderProps(
ctx,left,top,fabricObject,styleOverride):object
Defined in: src/controls/Control.ts:370
This is an helper method to prepare the canvas to render a control It detectes common control properties and sets the correct fill and stroke styles on the context. It does not execute translations or rotations since different controls need differnt combination of these.
Parameters
Section titled “Parameters”CanvasRenderingContext2D
number
number
fabricObject
Section titled “fabricObject”styleOverride
Section titled “styleOverride”ControlRenderingStyleOverride = {}
Returns
Section titled “Returns”object
opName
Section titled “opName”opName:
"fill"|"stroke"
stroke
Section titled “stroke”stroke:
boolean
transparentCorners
Section titled “transparentCorners”transparentCorners:
boolean
xSize:
number
ySize:
number
cursorStyleHandler()
Section titled “cursorStyleHandler()”cursorStyleHandler(
eventData,control,fabricObject,coord):string
Defined in: src/controls/Control.ts:272
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”TOCoord
Returns
Section titled “Returns”string
getActionHandler()
Section titled “getActionHandler()”getActionHandler(
eventData,fabricObject,control):undefined|TransformActionHandler
Defined in: src/controls/Control.ts:224
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:288
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:239
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:255
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
getTransformAnchorPoint()
Section titled “getTransformAnchorPoint()”getTransformAnchorPoint():
object
Defined in: src/controls/Control.ts:161
Returns
Section titled “Returns”object
x:
TOriginX
y:
TOriginY
getVisibility()
Section titled “getVisibility()”getVisibility(
fabricObject,controlKey):boolean
Defined in: src/controls/Control.ts:302
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:319
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:421
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:311
Sets controls visibility
Parameters
Section titled “Parameters”visibility
Section titled “visibility”boolean
for the object
string
fabricObject?
Section titled “fabricObject?”InteractiveFabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>
Returns
Section titled “Returns”void
shouldActivate()
Section titled “shouldActivate()”shouldActivate(
controlKey,fabricObject,pointer,__namedParameters):boolean
Defined in: src/controls/Control.ts:203
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