new Transformer(config)
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(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);
-
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 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(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);
-
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);
-
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 nodesParameters:
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();