Konva Class: Transformer

new Transformer(config)

Parameters:

Name Type Description

config

Object

Properties

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

Source:: konva.js

Example

var transformer = new Konva.Transformer({
  nodes: [rectangle],
  rotateAnchorOffset: 60,
  enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right']
});
layer.add(transformer);

Methods

anchorCornerRadius(radius)

get/set anchor corner radius

Parameters:

Name	Type	Description
`radius`	Number

Source:: konva.js

Returns:

Type: Number

Example

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

// set
transformer.anchorCornerRadius(3);

anchorDragBoundFunc(func)

get/set dragging func for transformer anchors

Parameters:

Name	Type	Description
`func`	function

Source:: konva.js

Returns:

Type: function

Example

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

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

anchorFill(anchorFill)

get/set anchor fill color

Parameters:

Name	Type	Description
`anchorFill`	String

Source:: konva.js

Returns:

Type: String

Example

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

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

anchorSize(size)

get/set anchor size. Default is 10

Parameters:

Name	Type	Description
`size`	Number

Source:: konva.js

Returns:

Type: Number

Example

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

// set
transformer.anchorSize(20)

anchorStroke(strokeColor)

get/set anchor stroke color

Parameters:

Name	Type	Description
`strokeColor`	String

Source:: konva.js

Returns:

Type: String

Example

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

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

anchorStrokeWidth(anchorStrokeWidth)

get/set anchor stroke width

Parameters:

Name	Type	Description
`anchorStrokeWidth`	Number

Source:: konva.js

Returns:

Type: Number

Example

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

// set
transformer.anchorStrokeWidth(3);

anchorStyleFunc(func)

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

Parameters:

Name	Type	Description
`func`	function

Source:: konva.js

Returns:

Type: 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);
 }
});

attachTo()

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

Source:: konva.js

Returns:

Type: Konva.Transformer

Example

transformer.attachTo(shape);

borderDash(dash)

get/set border dash array

Parameters:

Name	Type	Description
`dash`	Array	array

Source:: konva.js

Returns:

Type: Array

Example

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

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

borderEnabled(enabled)

get/set visibility of border

Parameters:

Name	Type	Description
`enabled`	Boolean

Source:: konva.js

Returns:

Type: Boolean

Example

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

// set
transformer.borderEnabled(false);

borderStroke(enabled)

get/set border stroke color

Parameters:

Name	Type	Description
`enabled`	Boolean

Source:: konva.js

Returns:

Type: Boolean

Example

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

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

borderStrokeWidth(strokeWidth)

get/set border stroke width

Parameters:

Name	Type	Description
`strokeWidth`	Number

Source:: konva.js

Returns:

Type: Number

Example

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

// set
transformer.borderStrokeWidth(3);

boundBoxFunc(func)

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

Parameters:

Name	Type	Description
`func`	function

Source:: konva.js

Returns:

Type: 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;
});

centeredScaling(centeredScaling)

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

Parameters:

Name	Type	Description
`centeredScaling`	Boolean

Source:: konva.js

Returns:

Type: Boolean

Example

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

// set
transformer.centeredScaling(true);

detach()

detach transformer from an attached node

Source:: konva.js

Returns:

Type: Konva.Transformer

Example

transformer.detach();

enabledAnchors(array)

get/set enabled handlers

Parameters:

Name	Type	Description
`array`	Array

Source:: konva.js

Returns:

Type: 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:

Name	Type	Description
`flag`	Boolean

Source:: konva.js

Returns:

Type: Boolean

Example

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

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

forceUpdate()

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

Source:: konva.js

getActiveAnchor()

return the name of current active anchor

Source:: konva.js

Returns:

Type: String | Null

Example

transformer.getActiveAnchor();

ignoreStroke(ignoreStroke)

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

Parameters:

Name	Type	Description
`ignoreStroke`	Boolean

Source:: konva.js

Returns:

Type: Boolean

Example

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

// set
transformer.ignoreStroke(true);

isTransforming()

determine if transformer is in active transform

Source:: konva.js

Returns:

Type: Boolean

keepRatio(keepRatio)

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

Parameters:

Name	Type	Description
`keepRatio`	Boolean

Source:: konva.js

Returns:

Type: Boolean

Example

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

// set
transformer.keepRatio(false);

nodes()

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

Source:: konva.js

Returns:

Type: 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);

on(evtStr, handler)

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

Parameters:

Name	Type	Description
`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.

Source:: konva.js

Returns:

Type: Konva.Transformer

Example

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

padding(padding)

get/set padding

Parameters:

Name	Type	Description
`padding`	Number

Source:: konva.js

Returns:

Type: Number

Example

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

// set
transformer.padding(10);

resizeEnabled(enabled)

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

Parameters:

Name	Type	Description
`enabled`	Boolean

Source:: konva.js

Returns:

Type: Boolean

Example

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

// set
transformer.resizeEnabled(false);

rotateAnchorCursor(cursorName)

get/set rotation anchor cursor

Parameters:

Name	Type	Description
`cursorName`	String

Source:: konva.js

Returns:

Type: String

Example

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

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

rotateAnchorOffset(offset)

get/set distance for rotation handler

Parameters:

Name	Type	Description
`offset`	Number

Source:: konva.js

Returns:

Type: Number

Example

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

// set
transformer.rotateAnchorOffset(100);

rotateEnabled(enabled)

get/set ability to rotate.

Parameters:

Name	Type	Description
`enabled`	Boolean

Source:: konva.js

Returns:

Type: Boolean

Example

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

// set
transformer.rotateEnabled(false);

rotationSnaps(array)

get/set rotation snaps angles.

Parameters:

Name	Type	Description
`array`	Array

Source:: konva.js

Returns:

Type: Array

Example

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

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

rotationSnapTolerance(tolerance)

get/set distance for rotation tolerance

Parameters:

Name	Type	Description
`tolerance`	Number

Source:: konva.js

Returns:

Type: Number

Example

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

// set
transformer.rotationSnapTolerance(100);

shiftBehavior(shiftBehavior)

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

Parameters:

Name	Type	Description
`shiftBehavior`	String

Source:: konva.js

Returns:

Type: String

Example

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

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

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:

Name	Type	Description
`shouldOverdrawWholeArea`	Boolean

Source:: konva.js

Returns:

Type: Boolean

Example

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

// set
transformer.shouldOverdrawWholeArea(true);

stopTransform()

Stop active transform action

Source:: konva.js

Returns:

Type: Boolean

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:

Name	Type	Description
`useSingleNodeRotation`	Boolean

Source:: konva.js

Returns:

Type: Boolean

Example

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