Class: Transformer

Konva. Transformer

new 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
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
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
centeredScaling Boolean <optional>

Should we resize relative to node's center? Default is false
enabledAnchors Array <optional>

Array of names of enabled handles
boundBoxFunc function <optional>

Bounding box function
ignoreStroke function <optional>

Should we ignore stroke size? Default is false
Source:
konva.js
Example
var transformer = new Konva.Transformer({
  node: rectangle,
  rotateAnchorOffset: 60,
  enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right']
});
layer.add(transformer);

Methods

anchorCornerRadius(enabled)

get/set anchor corner radius

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

// set
transformer.anchorCornerRadius(3);

anchorFill(enabled)

get/set anchor fill color

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

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

anchorStroke(enabled)

get/set anchor stroke color

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

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

anchorStrokeWidth(enabled)

get/set anchor stroke width

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

// set
transformer.anchorStrokeWidth(3);

attachTo()

alias to tr.node(shape)

Source:
konva.js
Returns:
Type
Konva.Transformer
Example
transformer.attachTo(shape);

borderDash(enabled)

get/set border dash array

Parameters:
Name Type Description
enabled Boolean
Source:
konva.js
Returns:
Type
Boolean
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(enabled)

get/set border stroke width

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

// set
transformer.borderStrokeWidth(3);

boundBoxFunc(func)

get/set bounding box function

Parameters:
Name Type Description
func function
Source:
konva.js
Returns:
Type
function
Example
// get
var boundBoxFunc = transformer.boundBoxFunc();

// set
transformer.boundBoxFunc(function(oldBox, newBox) {
  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()

return the name of current active anchor

Source:
konva.js
Returns:
Type
String | Null
Example
transformer.detach();

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']);

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

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

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(array)

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

Parameters:
Name Type Description
array Array
Source:
konva.js
Returns:
Type
Array
Example
// get
var resizeEnabled = transformer.resizeEnabled();

// set
transformer.resizeEnabled(false);

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

stopTransform()

Stop active transform action

Source:
konva.js
Returns:
Type
Boolean

validateAnchors(10)

get/set anchor size. Default is 10

Parameters:
Name Type Description
10 Number
Source:
konva.js
Returns:
Type
Number
Example
// get
var anchorSize = transformer.anchorSize();

// set
transformer.anchorSize(20)