Transformer

new Konva.Transformer(config)

Transformer constructor. Transformer is a special type of group that allow you transform Konva primitives and shapes. Transforming tool is not changing width and height properties of nodes when you resize them. Instead it changes scaleX and scaleY properties.

Parameters

Name	Type	Description
config	`Object`
resizeEnabled (optional)	`Boolean`	Default is true
rotateEnabled (optional)	`Boolean`	Default is true
rotateLineVisible (optional)	`Boolean`	Default is true
rotationSnaps (optional)	`Array`	Array of angles for rotation snaps. Default is []
rotationSnapTolerance (optional)	`Number`	Snapping tolerance. If closer than this it will snap. Default is 5
rotateAnchorOffset (optional)	`Number`	Default is 50
rotateAnchorCursor (optional)	`String`	Default is crosshair
padding (optional)	`Number`	Default is 0
borderEnabled (optional)	`Boolean`	Should we draw border? Default is true
borderStroke (optional)	`String`	Border stroke color
borderStrokeWidth (optional)	`Number`	Border stroke size
borderDash (optional)	`Array`	Array for border dash.
anchorFill (optional)	`String`	Anchor fill color
anchorStroke (optional)	`String`	Anchor stroke color
anchorCornerRadius (optional)	`String`	Anchor corner radius
anchorStrokeWidth (optional)	`Number`	Anchor stroke size
anchorSize (optional)	`Number`	Default is 10
keepRatio (optional)	`Boolean`	Should we keep ratio when we are moving edges? Default is true
shiftBehavior (optional)	`String`	How does transformer react on shift key press when we are moving edges? Default is 'default'
centeredScaling (optional)	`Boolean`	Should we resize relative to node's center? Default is false
enabledAnchors (optional)	`Array`	Array of names of enabled handles
flipEnabled (optional)	`Boolean`	Can we flip/mirror shape on transform?. True by default
boundBoxFunc (optional)	`function`	Bounding box function
ignoreStroke (optional)	`function`	Should we ignore stroke size? Default is false
useSingleNodeRotation (optional)	`Boolean`	When just one node attached, should we use its rotation for transformer?
shouldOverdrawWholeArea (optional)	`Boolean`	Should we fill whole transformer area with fake transparent shape to enable dragging from empty spaces?

Own Methods

attachTo()

alias to tr.nodes([shape])/ This method is deprecated and will be removed soon.

Returns: Konva.Transformer

Example:

transformer.attachTo(shape);

getActiveAnchor()

return the name of current active anchor

Returns: String|Null

Example:

transformer.getActiveAnchor();

detach()

detach transformer from an attached node

Returns: Konva.Transformer

Example:

transformer.detach();

on(evtStr, handler)

bind events to the Transformer. You can use events: transform, transformstart, transformend, dragstart, dragmove, dragend

Parameters:

evtStr (String): e.g. 'transform'
handler (function): The handler function. The first argument of that function is event object. Event object has target as main target of the event, currentTarget as current node listener and evt as native browser event.

Returns: Konva.Transformer

Example:

// add click listener
tr.on('transformstart', function() {
  console.log('transform started');
});

forceUpdate()

force update of Konva.Transformer. Use it when you updated attached Konva.Group and now you need to reset transformer size

isTransforming()

determine if transformer is in active transform

Returns: Boolean

stopTransform()

Stop active transform action

Returns: Boolean

enabledAnchors(array)

get/set enabled handlers

Parameters:

array (Array)

Returns: Array

Example:

// get list of handlers
var enabledAnchors = transformer.enabledAnchors();

// set handlers
transformer.enabledAnchors(['top-left', 'top-center', 'top-right', 'middle-right', 'middle-left', 'bottom-left', 'bottom-center', 'bottom-right']);

flipEnabled(flag)

get/set flip enabled

Parameters:

flag (Boolean)

Returns: Boolean

Example:

// get flip enabled property
var flipEnabled = transformer.flipEnabled();

// set flip enabled property
transformer.flipEnabled(false);

resizeEnabled(enabled)

get/set resize ability. If false it will automatically hide resizing handlers

Parameters:

enabled (Boolean)

Returns: Boolean

Example:

// get
var resizeEnabled = transformer.resizeEnabled();

// set
transformer.resizeEnabled(false);

anchorSize(size)

get/set anchor size. Default is 10

Parameters:

size (Number)

Returns: Number

Example:

// get
var anchorSize = transformer.anchorSize();

// set
transformer.anchorSize(20)

rotateEnabled(enabled)

get/set ability to rotate.

Parameters:

enabled (Boolean)

Returns: Boolean

Example:

// get
var rotateEnabled = transformer.rotateEnabled();

// set
transformer.rotateEnabled(false);

rotateLineVisible(enabled)

get/set visibility of a little line that connects transformer and rotate anchor.

Parameters:

enabled (Boolean)

Returns: Boolean

Example:

// get
var rotateLineVisible = transformer.rotateLineVisible();

// set
transformer.rotateLineVisible(false);

rotationSnaps(array)

get/set rotation snaps angles.

Parameters:

array (Array)

Returns: Array

Example:

// get
var rotationSnaps = transformer.rotationSnaps();

// set
transformer.rotationSnaps([0, 90, 180, 270]);

rotateAnchorOffset(offset)

get/set distance for rotation handler

Parameters:

offset (Number)

Returns: Number

Example:

// get
var rotateAnchorOffset = transformer.rotateAnchorOffset();

// set
transformer.rotateAnchorOffset(100);

rotateAnchorCursor(cursorName)

get/set rotation anchor cursor

Parameters:

cursorName (String)

Returns: String

Example:

// get
var currentRotationAnchorCursor = transformer.rotateAnchorCursor();

// set
transformer.rotateAnchorCursor('grab');

rotationSnapTolerance(tolerance)

get/set distance for rotation tolerance

Parameters:

tolerance (Number)

Returns: Number

Example:

// get
var rotationSnapTolerance = transformer.rotationSnapTolerance();

// set
transformer.rotationSnapTolerance(100);

borderEnabled(enabled)

get/set visibility of border

Parameters:

enabled (Boolean)

Returns: Boolean

Example:

// get
var borderEnabled = transformer.borderEnabled();

// set
transformer.borderEnabled(false);

anchorStroke(strokeColor)

get/set anchor stroke color

Parameters:

strokeColor (String)

Returns: String

Example:

// get
var anchorStroke = transformer.anchorStroke();

// set
transformer.anchorStroke('red');

anchorStrokeWidth(anchorStrokeWidth)

get/set anchor stroke width

Parameters:

anchorStrokeWidth (Number)

Returns: Number

Example:

// get
var anchorStrokeWidth = transformer.anchorStrokeWidth();

// set
transformer.anchorStrokeWidth(3);

anchorFill(anchorFill)

get/set anchor fill color

Parameters:

anchorFill (String)

Returns: String

Example:

// get
var anchorFill = transformer.anchorFill();

// set
transformer.anchorFill('red');

anchorCornerRadius(radius)

get/set anchor corner radius

Parameters:

radius (Number)

Returns: Number

Example:

// get
var anchorCornerRadius = transformer.anchorCornerRadius();

// set
transformer.anchorCornerRadius(3);

borderStroke(enabled)

get/set border stroke color

Parameters:

enabled (Boolean)

Returns: Boolean

Example:

// get
var borderStroke = transformer.borderStroke();

// set
transformer.borderStroke('red');

borderStrokeWidth(strokeWidth)

get/set border stroke width

Parameters:

strokeWidth (Number)

Returns: Number

Example:

// get
var borderStrokeWidth = transformer.borderStrokeWidth();

// set
transformer.borderStrokeWidth(3);

borderDash(dash)

get/set border dash array

Parameters:

dash (Array): array

Returns: Array

Example:

// get
var borderDash = transformer.borderDash();

// set
transformer.borderDash([2, 2]);

keepRatio(keepRatio)

get/set should we keep ratio while resize anchors at corners

Parameters:

keepRatio (Boolean)

Returns: Boolean

Example:

// get
var keepRatio = transformer.keepRatio();

// set
transformer.keepRatio(false);

shiftBehavior(shiftBehavior)

get/set how to react on skift key while resizing anchors at corners

Parameters:

shiftBehavior (String)

Returns: String

Example:

// get
var shiftBehavior = transformer.shiftBehavior();

// set
transformer.shiftBehavior('none');

centeredScaling(centeredScaling)

get/set should we resize relative to node's center?

Parameters:

centeredScaling (Boolean)

Returns: Boolean

Example:

// get
var centeredScaling = transformer.centeredScaling();

// set
transformer.centeredScaling(true);

ignoreStroke(ignoreStroke)

get/set should we think about stroke while resize? Good to use when a shape has strokeScaleEnabled = false default is false

Parameters:

ignoreStroke (Boolean)

Returns: Boolean

Example:

// get
var ignoreStroke = transformer.ignoreStroke();

// set
transformer.ignoreStroke(true);

padding(padding)

get/set padding

Parameters:

padding (Number)

Returns: Number

Example:

// get
var padding = transformer.padding();

// set
transformer.padding(10);

nodes()

get/set attached nodes of the Transformer. Transformer will adapt to their size and listen to their events

Returns: Konva.Node

Example:

// get
const nodes = transformer.nodes();

// set
transformer.nodes([rect, circle]);

// push new item:
const oldNodes = transformer.nodes();
const newNodes = oldNodes.concat([newShape]);
// it is important to set new array instance (and concat method above will create it)
transformer.nodes(newNodes);

boundBoxFunc(func)

get/set bounding box function. IMPORTANT! boundBondFunc operates in absolute coordinates.

Parameters:

func (function)

Returns: function

Example:

// get
var boundBoxFunc = transformer.boundBoxFunc();

// set
transformer.boundBoxFunc(function(oldBox, newBox) {
  // width and height of the boxes are corresponding to total absolute width and height of all nodes combined
  // so it includes scale of the node.
  if (newBox.width > 200) {
    return oldBox;
  }
  return newBox;
});

anchorDragBoundFunc(func)

get/set dragging func for transformer anchors

Parameters:

func (function)

Returns: function

Example:

// get
var anchorDragBoundFunc = transformer.anchorDragBoundFunc();

// set
transformer.anchorDragBoundFunc(function(oldAbsPos, newAbsPos, event) {
 return {
  x: 0,
  y: newAbsolutePosition.y
 }
});

anchorStyleFunc(func)

get/set styling function for transformer anchors to overwrite default styles

Parameters:

func (function)

Returns: function

Example:

// get
var anchorStyleFunc = transformer.anchorStyleFunc();

// set
transformer.anchorStyleFunc(function(anchor) {
 // anchor is a simple Konva.Rect instance
 // it will be executed AFTER all attributes are set, like 'anchorStrokeWidth' or 'anchorFill'
 if (anchor.hasName('.rotater')) {
   // make rotater anchor filled black and looks like a circle
   anchor.fill('black');
   anchor.cornerRadius(anchor.width() / 2);
 }
});

shouldOverdrawWholeArea(shouldOverdrawWholeArea)

using this setting you can drag transformer group by dragging empty space between attached nodes shouldOverdrawWholeArea = true may temporary disable all events on attached nodes

Parameters:

shouldOverdrawWholeArea (Boolean)

Returns: Boolean

Example:

// get
var shouldOverdrawWholeArea = transformer.shouldOverdrawWholeArea();

// set
transformer.shouldOverdrawWholeArea(true);

useSingleNodeRotation(useSingleNodeRotation)

If you have just one attached node to Transformer it will set its initial rotation to the rotation of that node. In some cases you may need to set a different rotation.

Parameters:

useSingleNodeRotation (Boolean)

Returns: Boolean

Example:

// set flag to false
transformer.useSingleNodeRotation(false);
// attach a shape
transformer.nodes([shape]);
transformer.rotation(45);
transformer.update();

Parameters​

Own Methods​

attachTo()​

getActiveAnchor()​

detach()​

on(evtStr, handler)​

forceUpdate()​

isTransforming()​

stopTransform()​

enabledAnchors(array)​

flipEnabled(flag)​

resizeEnabled(enabled)​

anchorSize(size)​

rotateEnabled(enabled)​

rotateLineVisible(enabled)​

rotationSnaps(array)​

rotateAnchorOffset(offset)​

rotateAnchorCursor(cursorName)​

rotationSnapTolerance(tolerance)​

borderEnabled(enabled)​

anchorStroke(strokeColor)​

anchorStrokeWidth(anchorStrokeWidth)​

anchorFill(anchorFill)​

anchorCornerRadius(radius)​

borderStroke(enabled)​

borderStrokeWidth(strokeWidth)​

borderDash(dash)​

keepRatio(keepRatio)​

shiftBehavior(shiftBehavior)​

centeredScaling(centeredScaling)​

ignoreStroke(ignoreStroke)​

padding(padding)​

nodes()​

boundBoxFunc(func)​

anchorDragBoundFunc(func)​

anchorStyleFunc(func)​

shouldOverdrawWholeArea(shouldOverdrawWholeArea)​

useSingleNodeRotation(useSingleNodeRotation)​

Parameters

Own Methods

attachTo()

getActiveAnchor()

detach()

on(evtStr, handler)

forceUpdate()

isTransforming()

stopTransform()

enabledAnchors(array)

flipEnabled(flag)

resizeEnabled(enabled)

anchorSize(size)

rotateEnabled(enabled)

rotateLineVisible(enabled)

rotationSnaps(array)

rotateAnchorOffset(offset)

rotateAnchorCursor(cursorName)

rotationSnapTolerance(tolerance)

borderEnabled(enabled)

anchorStroke(strokeColor)

anchorStrokeWidth(anchorStrokeWidth)

anchorFill(anchorFill)

anchorCornerRadius(radius)

borderStroke(enabled)

borderStrokeWidth(strokeWidth)

borderDash(dash)

keepRatio(keepRatio)

shiftBehavior(shiftBehavior)

centeredScaling(centeredScaling)

ignoreStroke(ignoreStroke)

padding(padding)

nodes()

boundBoxFunc(func)

anchorDragBoundFunc(func)

anchorStyleFunc(func)

shouldOverdrawWholeArea(shouldOverdrawWholeArea)

useSingleNodeRotation(useSingleNodeRotation)