Class: Transformer

Konva. Transformer

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.


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

rotateLineVisible 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);

rotateLineVisible(enabled)

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

Parameters:
Name Type Description
enabled Boolean
Source:
konva.js
Returns:
Type
Boolean
Example
// get
var rotateLineVisible = transformer.rotateLineVisible();

// set
transformer.rotateLineVisible(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();