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
|
- 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(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.nodes([shape])
/ This method is deprecated and will be removed soon.- 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. 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']);
-
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 falseParameters:
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);
-
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)