Node
new Konva.Node(config)
Node constructor. Nodes are entities that can be transformed, layered, and have bound events. The stage, layers, groups, and shapes all extend Node.
Parameters
| Name | Type | Description |
|---|---|---|
| config |
Object
|
|
| x (optional) |
Number
|
|
| y (optional) |
Number
|
|
| width (optional) |
Number
|
|
| height (optional) |
Number
|
|
| visible (optional) |
Boolean
|
|
| listening (optional) |
Boolean
|
whether or not the node is listening for events |
| id (optional) |
String
|
unique id |
| name (optional) |
String
|
non-unique name |
| opacity (optional) |
Number
|
determines node opacity. Can be any number between 0 and 1 |
| scale (optional) |
Object
|
set scale |
| scaleX (optional) |
Number
|
set scale x |
| scaleY (optional) |
Number
|
set scale y |
| rotation (optional) |
Number
|
rotation in degrees |
| offset (optional) |
Object
|
offset from center point and rotation point |
| offsetX (optional) |
Number
|
set offset x |
| offsetY (optional) |
Number
|
set offset y |
| draggable (optional) |
Boolean
|
makes the node draggable. When stages are draggable, you can drag and drop the entire stage by dragging any portion of the stage |
| dragDistance (optional) |
Number
|
|
| dragBoundFunc (optional) |
function
|
Own Methods
clearCache()
clear cached canvas
Returns:
Konva.Node
Example:
node.clearCache();
cache(config)
cache node to improve drawing performance, apply filters, or create more accurate hit regions. For all basic shapes size of cache canvas will be automatically detected. If you need to cache your custom
Konva.Shape
instance you have to pass shape's bounding box properties. Look at
https://konvajs.org/docs/performance/Shape_Caching.html
for more information.
Parameters:
config
(Object) (optional)
config.x
(Number) (optional)
config.y
(Number) (optional)
config.width
(Number) (optional)
config.height
(Number) (optional)
config.offset
(Number) (optional): increase canvas size by
offset
pixel in all directions.
config.drawBorder
(Boolean) (optional): when set to true, a red border will be drawn around the cached region for debugging purposes
config.pixelRatio
(Number) (optional): change quality (or pixel ratio) of cached image. pixelRatio = 2 will produce 2x sized cache.
config.imageSmoothingEnabled
(Boolean) (optional): control imageSmoothingEnabled property of created canvas for cache
config.hitCanvasPixelRatio
(Number) (optional): change quality (or pixel ratio) of cached hit canvas.
Returns:
Konva.Node
Example:
// cache a shape with the x,y position of the bounding box at the center and
// the width and height of the bounding box equal to the width and height of
// the shape obtained from shape.width() and shape.height()
image.cache();
// cache a node and define the bounding box position and size
node.cache({
x: -30,
y: -30,
width: 100,
height: 200
});
// cache a node and draw a red border around the bounding box
// for debugging purposes
node.cache({
x: -30,
y: -30,
width: 100,
height: 200,
offset : 10,
drawBorder: true
});
isCached()
determine if node is currently cached
Returns:
Boolean
getClientRect(config)
Return client rectangle {x, y, width, height} of node. This rectangle also include all styling (strokes, shadows, etc). The purpose of the method is similar to getBoundingClientRect API of the DOM.
Parameters:
config
(Object)
config.skipTransform
(Boolean) (optional): should we apply transform to node for calculating rect?
config.skipShadow
(Boolean) (optional): should we apply shadow to the node for calculating bound box?
config.skipStroke
(Boolean) (optional): should we apply stroke to the node for calculating bound box?
config.relativeTo
(Object) (optional): calculate client rect relative to one of the parents
Returns:
Object
rect with {x, y, width, height} properties
Example:
var rect =
new Konva.Rect({
width : 100,
height : 100,
x : 50,
y : 50,
strokeWidth : 4,
stroke : 'black',
offsetX : 50,
scaleY : 2
});
// get client rect without think off transformations (position, rotation, scale, offset, etc)
rect.getClientRect({ skipTransform: true});
// returns {
// x : -2, // two pixels for stroke / 2
// y : -2,
// width : 104, // increased by 4 for stroke
// height : 104
//}
// get client rect with transformation applied
rect.getClientRect();
// returns Object {x: -2, y: 46, width: 104, height: 208}
on(evtStr, handler)
bind events to the node. KonvaJS supports mouseover, mousemove, mouseout, mouseenter, mouseleave, mousedown, mouseup, wheel, contextmenu, click, dblclick, touchstart, touchmove, touchend, tap, dbltap, dragstart, dragmove, and dragend events. Pass in a string of events delimited by a space to bind multiple events at once such as 'mousedown mouseup mousemove'. Include a namespace to bind an event by name such as 'click.foobar'.
Parameters:
evtStr
(String): e.g. 'click', 'mousedown touchstart', 'mousedown.foo touchstart.foo'
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.
Returns:
Konva.Node
Example:
// add click listener
node.on('click', function() {
console.log('you clicked me!');
});
// get the target node
node.on('click', function(evt) {
console.log(evt.target);
});
// stop event propagation
node.on('click', function(evt) {
evt.cancelBubble = true;
});
// bind multiple listeners
node.on('click touchstart', function() {
console.log('you clicked/touched me!');
});
// namespace listener
node
.on('click.foo', function() {
console.log('you clicked/touched me!');
});
// get the event type
node.on('click tap', function(evt) {
var eventType = evt.type;
});
// get native event object
node.on('click tap', function(evt) {
var nativeEvent = evt.evt;
});
// for change events, get the old and new val
node.on('xChange', function(evt) {
var oldVal = evt.oldVal;
var newVal = evt.newVal;
});
// get event targets
// with event delegations
layer.on('click', 'Group', function(evt) {
var shape = evt.target;
var group = evt.currentTarget;
});
off(evtStr)
remove event bindings from the node. Pass in a string of event types delimmited by a space to remove multiple event bindings at once such as 'mousedown mouseup mousemove'. include a namespace to remove an event binding by name such as 'click.foobar'. If you only give a name like '.foobar', all events in that namespace will be removed.
Parameters:
evtStr
(String): e.g. 'click', 'mousedown touchstart', '.foobar'
Returns:
Konva.Node
Example:
// remove listener
node.off('click');
// remove multiple listeners
node.off('click touchstart');
// remove listener by name
node.off('click.foo');
remove()
remove a node from parent, but don't destroy. You can reuse the node later.
Returns:
Konva.Node
Example:
node.remove();
destroy()
remove and destroy a node. Kill it and delete forever! You should not reuse node after destroy(). If the node is a container (Group, Stage or Layer) it will destroy all children too.
Example:
node.destroy();
getAttr(attr)
get attr
Parameters:
attr
(String)
Returns:
Integer|String|Object|Array
Example:
var x = node.getAttr('x');
getAncestors()
get ancestors
Returns:
Array
Example:
shape.getAncestors().forEach(function(node) {
console.log(node.getId());
})
getAttrs()
get attrs object literal
Returns:
Object
setAttrs(config)
set multiple attrs at once using an object literal
Parameters:
config
(Object): object containing key value pairs
Returns:
Konva.Node
Example:
node.setAttrs({
x: 5,
fill: 'red'
});
isListening()
determine if node is listening for events by taking into account ancestors. Parent | Self | isListening listening | listening | ----------+-----------+------------ T | T | T T | F | F F | T | F F | F | F
Returns:
Boolean
isVisible()
determine if node is visible by taking into account ancestors. Parent | Self | isVisible visible | visible | ----------+-----------+------------ T | T | T T | F | F F | T | F F | F | F
Returns:
Boolean
show()
show node. set visible = true
Returns:
Konva.Node
hide()
hide node. Hidden nodes are no longer detectable
Returns:
Konva.Node
getAbsoluteZIndex()
get absolute z-index which takes into account sibling and ancestor indices
Returns:
Integer
getDepth()
get node depth in node tree. Returns an integer. e.g. Stage depth will always be 0. Layers will always be 1. Groups and Shapes will always be >= 2
Returns:
Integer
getRelativePointerPosition()
get position of first pointer (like mouse or first touch) relative to local coordinates of current node
Returns:
Konva.Node
Example:
// let's think we have a rectangle at position x = 10, y = 10
// now we clicked at x = 15, y = 15 of the stage
// if you want to know position of the click, related to the rectangle you can use
rect.getRelativePointerPosition();
getAbsolutePosition(Ancestor)
get absolute position of a node. That function can be used to calculate absolute position, but relative to any ancestor
Parameters:
Ancestor
(Object): optional ancestor node
Returns:
Konva.Node
Example:
// returns absolute position relative to top-left corner of canvas
node.getAbsolutePosition
();
// calculate absolute position of node, inside stage
// so stage transforms are ignored
node.getAbsolutePosition(stage)
move(change)
move node by an amount relative to its current position
Parameters:
change
(Object)
change.x
(Number)
change.y
(Number)
Returns:
Konva.Node
Example:
// move node in x direction by 1px and y direction by 2px
node.move({
x: 1,
y: 2
});
rotate(theta)
rotate node by an amount in degrees relative to its current rotation
Parameters:
theta
(Number)
Returns:
Konva.Node
moveToTop()
move node to the top of its siblings
Returns:
Boolean
moveUp()
move node up
Returns:
Boolean
flag is moved or not
moveDown()
move node down
Returns:
Boolean
moveToBottom()
move node to the bottom of its siblings
Returns:
Boolean
getAbsoluteOpacity()
get absolute opacity
Returns:
Number
moveTo(newContainer)
move node to another container
Parameters:
newContainer
(Container)
Returns:
Konva.Node
Example:
// move node from current layer into layer2
node.moveTo(layer2);
toObject()
convert Node into an object for serialization. Returns an object.
Returns:
Object
toJSON()
convert Node into a JSON string. Returns a JSON string.
Returns:
String
getParent()
get parent container
Returns:
Konva.Node
findAncestors(selector, includeSelf, stopNode)
get all ancestors (parent then parent of the parent, etc) of the node
Parameters:
selector
(String): selector for search
includeSelf
(Boolean) (optional): show we think that node is ancestro itself?
stopNode
(Konva.Node) (optional): optional node where we need to stop searching (one of ancestors)
Returns:
Array
[ancestors]
Example:
// get one of the parent group
var parentGroups = node.findAncestors('Group');
findAncestor(selector, includeSelf, stopNode)
get ancestor (parent or parent of the parent, etc) of the node that match passed selector
Parameters:
selector
(String): selector for search
includeSelf
(Boolean) (optional): show we think that node is ancestro itself?
stopNode
(Konva.Node) (optional): optional node where we need to stop searching (one of ancestors)
Returns:
Konva.Node
ancestor
Example:
// get one of the parent group
var group = node.findAncestors('.mygroup');
getLayer()
get layer ancestor
Returns:
Konva.Layer
getStage()
get stage ancestor
Returns:
Konva.Stage
fire(eventType, evt, bubble)
fire event
Parameters:
eventType
(String): event type. can be a regular event, like click, mouseover, or mouseout, or it can be a custom event, like myCustomEvent
evt
(Event) (optional): event object
bubble
(Boolean) (optional): setting the value to false, or leaving it undefined, will result in the event not bubbling. Setting the value to true will result in the event bubbling.
Returns:
Konva.Node
Example:
// manually fire click event
node.fire('click');
// fire custom event
node.fire('foo');
// fire custom event with custom event object
node.fire('foo', {
bar: 10
});
// fire click event that bubbles
node.fire('click', null, true);
getAbsoluteTransform()
get absolute transform of the node which takes into account its ancestor transforms
Returns:
Konva.Transform
getAbsoluteScale()
get absolute scale of the node which takes into account its ancestor scales
Returns:
Object
Example:
// get absolute scale x
var scaleX = node.getAbsoluteScale().x;
getAbsoluteRotation()
get absolute rotation of the node which takes into account its ancestor rotations
Returns:
Number
Example:
// get absolute rotation
var rotation = node.getAbsoluteRotation();
getTransform()
get transform of the node
Returns:
Konva.Transform
clone(obj)
clone node. Returns a new Node instance with identical attributes. You can also override the node properties with an object literal, enabling you to use an existing node as a template for another node
Parameters:
obj
(Object): override attrs
Returns:
Konva.Node
Example:
// simple clone
var clone = node.clone();
// clone a node and override the x position
var clone = rect.clone({
x: 5
});
toCanvas(config)
converts node into an canvas element.
Parameters:
config
(Object)
config.callback
(function): function executed when the composite has completed
config.x
(Number) (optional): x position of canvas section
config.y
(Number) (optional): y position of canvas section
config.width
(Number) (optional): width of canvas section
config.height
(Number) (optional): height of canvas section
config.pixelRatio
(Number) (optional): pixelRatio of output canvas. Default is 1. You can use that property to increase quality of the image, for example for super hight quality exports or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image. If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
config.imageSmoothingEnabled
(Boolean) (optional): set this to false if you want to disable imageSmoothing
Example:
var
canvas = node.toCanvas();
toDataURL(config)
Creates a composite data URL (base64 string). If MIME type is not specified, then "image/png" will result. For "image/jpeg", specify a quality level as quality (range 0.0 - 1.0)
Parameters:
config
(Object)
config.mimeType
(String) (optional): can be "image/png" or "image/jpeg". "image/png" is the default
config.x
(Number) (optional): x position of canvas section
config.y
(Number) (optional): y position of canvas section
config.width
(Number) (optional): width of canvas section
config.height
(Number) (optional): height of canvas section
config.quality
(Number) (optional): jpeg quality. If using an "image/jpeg" mimeType, you can specify the quality from 0 to 1, where 0 is very poor quality and 1 is very high quality
config.pixelRatio
(Number) (optional): pixelRatio of output image url. Default is 1. You can use that property to increase quality of the image, for example for super hight quality exports or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image. If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
config.imageSmoothingEnabled
(Boolean) (optional): set this to false if you want to disable imageSmoothing
Returns:
String
toImage(config)
converts node into an image. Since the toImage method is asynchronous, the resulting image can only be retrieved from the config callback or the returned Promise. toImage is most commonly used to cache complex drawings as an image so that they don't have to constantly be redrawn
Parameters:
config
(Object)
config.callback
(function) (optional): function executed when the composite has completed
config.mimeType
(String) (optional): can be "image/png" or "image/jpeg". "image/png" is the default
config.x
(Number) (optional): x position of canvas section
config.y
(Number) (optional): y position of canvas section
config.width
(Number) (optional): width of canvas section
config.height
(Number) (optional): height of canvas section
config.quality
(Number) (optional): jpeg quality. If using an "image/jpeg" mimeType, you can specify the quality from 0 to 1, where 0 is very poor quality and 1 is very high quality
config.pixelRatio
(Number) (optional): pixelRatio of output image. Default is 1. You can use that property to increase quality of the image, for example for super hight quality exports or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image. If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
config.imageSmoothingEnabled
(Boolean) (optional): set this to false if you want to disable imageSmoothing
Returns:
Promise<Image>
Example:
var image = node.toImage({
callback(img) {
// do stuff with img
}
});
toBlob(config)
Converts node into a blob. Since the toBlob method is asynchronous, the resulting blob can only be retrieved from the config callback or the returned Promise.
Parameters:
config
(Object)
config.callback
(function) (optional): function executed when the composite has completed
config.x
(Number) (optional): x position of canvas section
config.y
(Number) (optional): y position of canvas section
config.width
(Number) (optional): width of canvas section
config.height
(Number) (optional): height of canvas section
config.pixelRatio
(Number) (optional): pixelRatio of output canvas. Default is 1. You can use that property to increase quality of the image, for example for super hight quality exports or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image. If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
config.imageSmoothingEnabled
(Boolean) (optional): set this to false if you want to disable imageSmoothing
Returns:
Promise<Blob>
Example:
var blob = await node.toBlob({});
getClassName()
get class name, which may return Stage, Layer, Group, or shape class names like Rect, Circle, Text, etc.
Returns:
String
getType()
get the node type, which may return Stage, Layer, Group, or Shape
Returns:
String
addName(name)
add name to node
Parameters:
name
(String)
Returns:
Konva.Node
Example:
node.name('red');
node.addName('selected');
node.name(); // return 'red selected'
hasName(name)
check is node has name
Parameters:
name
(String)
Returns:
Boolean
Example:
node.name('red');
node.hasName('red'); // return true
node.hasName('selected'); // return false
node.hasName(''); // return false
removeName(name)
remove name from node
Parameters:
name
(String)
Returns:
Konva.Node
Example:
node.name('red selected');
node.removeName('selected');
node.hasName('selected'); // return false
node.name(); // return 'red'
setAttr(attr, val)
set attr
Parameters:
attr
(String)
val
(*)
Returns:
Konva.Node
Example:
node.setAttr('x', 5);
draw()
draw both scene and hit graphs. If the node being drawn is the stage, all of the layers will be cleared and redrawn
Returns:
Konva.Node
startDrag()
initiate drag and drop.
stopDrag()
stop drag and drop
isDragging()
determine if node is currently in drag and drop mode
isClientRectOnScreen(margin)
determine if node (at least partially) is currently in user-visible area
Parameters:
margin
(Number|Object): optional margin in pixels
margin.x
(Number)
margin.y
(Number)
Returns:
Boolean
Example:
// get index
// default calculations
var isOnScreen = node.isClientRectOnScreen()
// increase object size (or screen size) for cases when objects close to the screen still need to be marked as "visible"
var isOnScreen = node.isClientRectOnScreen({ x: stage.width(), y: stage.height() })
Node.create(json, container)
create node with JSON string or an Object. De-serializtion does not generate custom shape drawing functions, images, or event handlers (this would make the serialized object huge). If your app uses custom shapes, images, and event handlers (it probably does), then you need to select the appropriate shapes after loading the stage and set these properties via on(), setSceneFunc(), and setImage() methods
Parameters:
json
(String|Object): string or object
container
(Element) (optional): optional container dom element used only if you're creating a stage node
zIndex(index)
get/set zIndex relative to the node's siblings who share the same parent. Please remember that zIndex is not absolute (like in CSS). It is relative to parent element only.
Parameters:
index
(Number)
Returns:
Number
Example:
// get index
var index = node.zIndex();
// set index
node.zIndex(2);
absolutePosition(pos)
get/set node absolute position
Parameters:
pos
(Object)
pos.x
(Number)
pos.y
(Number)
Returns:
Object
Example:
// get position
var position = node.absolutePosition();
// set position
node.absolutePosition({
x: 5,
y: 10
});
position(pos)
get/set node position relative to parent
Parameters:
pos
(Object)
pos.x
(Number)
pos.y
(Number)
Returns:
Object
Example:
// get position
var position = node.position();
// set position
node.position({
x: 5,
y: 10
});
x(x)
get/set x position
Parameters:
x
(Number)
Returns:
Object
Example:
// get x
var x = node.x();
// set x
node.x(5);
y(y)
get/set y position
Parameters:
y
(Number)
Returns:
Integer
Example:
// get y
var y = node.y();
// set y
node.y(5);
globalCompositeOperation(type)
get/set globalCompositeOperation of a node. globalCompositeOperation DOESN'T affect hit graph of nodes. So they are still trigger to events as they have default "source-over" globalCompositeOperation.
Parameters:
type
(String)
Returns:
String
Example:
// get globalCompositeOperation
var globalCompositeOperation = shape.
globalCompositeOperation();
// set globalCompositeOperation
shape.globalCompositeOperation('source-in');
opacity(opacity)
get/set opacity. Opacity values range from 0 to 1. A node with an opacity of 0 is fully transparent, and a node with an opacity of 1 is fully opaque
Parameters:
opacity
(Object)
Returns:
Number
Example:
// get opacity
var opacity = node.opacity();
// set opacity
node.opacity(0.5);
name(name)
get/set name.
Parameters:
name
(String)
Returns:
String
Example:
// get name
var name = node.name();
// set name
node.name('foo');
// also node may have multiple names (as css classes)
node.name('foo bar');
id(id)
get/set id. Id is global for whole page.
Parameters:
id
(String)
Returns:
String
Example:
// get id
var name = node.id();
// set id
node.id('foo');
rotation(rotation)
get/set rotation in degrees
Parameters:
rotation
(Number)
Returns:
Number
Example:
// get rotation in degrees
var rotation = node.rotation();
// set rotation in degrees
node.rotation(45);
scale(scale)
get/set scale
Parameters:
scale
(Object)
scale.x
(Number)
scale.y
(Number)
Returns:
Object
Example:
// get scale
var scale = node.scale();
// set scale
shape
.scale({
x: 2,
y: 3
});
scaleX(x)
get/set scale x
Parameters:
x
(Number)
Returns:
Number
Example:
// get scale x
var scaleX = node.scaleX();
// set scale x
node.scaleX(2);
scaleY(y)
get/set scale y
Parameters:
y
(Number)
Returns:
Number
Example:
// get scale y
var scaleY = node.scaleY();
// set scale y
node.scaleY(2);
skew(skew)
get/set skew
Parameters:
skew
(Object)
skew.x
(Number)
skew.y
(Number)
Returns:
Object
Example:
// get skew
var skew = node.skew();
// set skew
node.skew({
x: 20,
y: 10
});
skewX(x)
get/set skew x
Parameters:
x
(Number)
Returns:
Number
Example:
// get skew x
var skewX = node.skewX();
// set skew x
node.skewX(3);
skewY(y)
get/set skew y
Parameters:
y
(Number)
Returns:
Number
Example:
// get skew y
var skewY = node.skewY();
// set skew y
node.
skewY(3);
offsetX(x)
get/set offset x
Parameters:
x
(Number)
Returns:
Number
Example:
// get offset x
var offsetX = node.offsetX();
// set offset x
node.offsetX(3);
offsetY(y)
get/set offset y
Parameters:
y
(Number)
Returns:
Number
Example:
// get offset y
var offsetY = node.offsetY();
// set offset y
node.offsetY(3);
dragDistance(distance)
get/set drag distance
Parameters:
distance
(Number)
Returns:
Number
Example:
// get drag distance
var dragDistance = node.dragDistance();
// set distance
// node starts dragging only if pointer moved more then 3 pixels
node.dragDistance(3);
// or set globally
Konva.dragDistance = 3;
width(width)
get/set width
Parameters:
width
(Number)
Returns:
Number
Example:
// get width
var width = node.width();
// set width
node.width(100);
height(height)
get/set height
Parameters:
height
(Number)
Returns:
Number
Example:
// get height
var height = node.height();
// set height
node.height(100);
listening(listening)
get/set listening attr. If you need to determine if a node is listening or not by taking into account its parents, use the isListening() method nodes with listening set to false will not be detected in hit graph so they will be ignored in container.getIntersection() method
Parameters:
listening
(Boolean): Can be true, or false. The default is true.
Returns:
Boolean
Example:
// get listening attr
var listening = node.listening();
// stop listening for events, remove node and all its children from hit graph
node.listening(false);
// listen to events according to the parent
node.listening(true);
preventDefault(preventDefault)
get/set preventDefault By default all shapes will prevent default behavior of a browser on a pointer move or tap. that will prevent native scrolling when you are trying to drag&drop a node but sometimes you may need to enable default actions in that case you can set the property to false
Parameters:
preventDefault
(Boolean)
Returns:
Boolean
Example:
// get preventDefault
var shouldPrevent = shape.preventDefault();
// set preventDefault
shape.preventDefault(false);
filters(filters)
get/set filters. Filters are applied to cached canvases
Parameters:
filters
(Array): array of filters
Returns:
Array
Example:
// get filters
var filters = node.filters();
// set a single filter
node.cache();
node.filters([Konva.Filters.Blur]);
// set multiple filters
node.cache();
node.filters([
Konva.Filters.Blur,
Konva.Filters.Sepia,
Konva.Filters.Invert
]);
visible(visible)
get/set visible attr. Can be true, or false. The default is true. If you need to determine if a node is visible or not by taking into account its parents, use the isVisible() method
Parameters:
visible
(Boolean)
Returns:
Boolean
Example:
// get visible attr
var visible = node.visible();
// make invisible
node.visible(false);
// make visible (according to the parent)
node.visible(true);
transformsEnabled(enabled)
get/set transforms that are enabled. Can be "all", "none", or "position". The default is "all"
Parameters:
enabled
(String)
Returns:
String
Example:
// enable position transform only to improve draw performance
node.transformsEnabled('position');
// enable all transforms
node.transformsEnabled('all');
size(size)
get/set node size
Parameters:
size
(Object)
size.width
(Number)
size.height
(Number)
Returns:
Object
Example:
// get node size
var size = node.size();
var width = size.width;
var height = size.height;
// set size
node.size({
width: 100,
height: 200
});
dragBoundFunc(dragBoundFunc)
get/set drag bound function. This is used to override the default drag and drop position.
Parameters:
dragBoundFunc
(function)
Returns:
function
Example:
// get drag bound function
var dragBoundFunc = node.dragBoundFunc();
// create vertical drag and drop
node.dragBoundFunc(function(pos){
// important pos - is absolute position of the node
// you should return absolute position too
return {
x: this.absolutePosition().x,
y: pos.y
};
});
draggable(draggable)
get/set draggable flag
Parameters:
draggable
(Boolean)
Returns:
Boolean
Example:
// get draggable flag
var draggable = node.draggable();
// enable drag and drop
node.draggable(true);
// disable drag and drop
node.draggable(false);
to(params)
Tween node properties. Shorter usage of Konva.Tween object.
Parameters:
params
(Object) (optional): tween params
Example:
circle.to({
x : 50,
duration : 0.5,
onUpdate: () => console.log('props updated'),
onFinish: () => console.log('finished'),
});
blurRadius(radius)
get/set blur radius. Use with Konva.Filters.Blur filter
Parameters:
radius
(Integer)
Returns:
Integer
brightness(brightness)
get/set filter brightness. The brightness is a number between -1 and 1. Positive values brighten the pixels and negative values darken them. Use with Konva.Filters.Brighten filter.
Parameters:
brightness
(Number): value between -1 and 1
Returns:
Number
contrast(contrast)
get/set filter contrast. The contrast is a number between -100 and 100. Use with Konva.Filters.Contrast filter.
Parameters:
contrast
(Number): value between -100 and 100
Returns:
Number
embossStrength(level)
get/set emboss strength. Use with Konva.Filters.Emboss filter.
Parameters:
level
(Number): between 0 and 1. Default is 0.5
Returns:
Number
embossWhiteLevel(embossWhiteLevel)
get/set emboss white level. Use with Konva.Filters.Emboss filter.
Parameters:
embossWhiteLevel
(Number): between 0 and 1. Default is 0.5
Returns:
Number
embossDirection(embossDirection)
get/set emboss direction. Use with Konva.Filters.Emboss filter.
Parameters:
embossDirection
(String): can be top-left, top, top-right, right, bottom-right, bottom, bottom-left or left The default is top-left
Returns:
String
embossBlend(embossBlend)
get/set emboss blend. Use with Konva.Filters.Emboss filter.
Parameters:
embossBlend
(Boolean)
Returns:
Boolean
enhance(amount)
get/set enhance. Use with Konva.Filters.Enhance filter. -1 to 1 values
Parameters:
amount
(Float)
Returns:
Float
hue(hue)
get/set hsv hue in degrees. Use with Konva.Filters.HSV or Konva.Filters.HSL filter.
Parameters:
hue
(Number): value between 0 and 359
Returns:
Number
saturation(saturation)
get/set hsv saturation. Use with Konva.Filters.HSV or Konva.Filters.HSL filter.
Parameters:
saturation
(Number): 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc..
Returns:
Number
luminance(value)
get/set hsl luminance. Use with Konva.Filters.HSL filter.
Parameters:
value
(Number): from -1 to 1
Returns:
Number
hue(hue)
get/set hsv hue in degrees. Use with Konva.Filters.HSV or Konva.Filters.HSL filter.
Parameters:
hue
(Number): value between 0 and 359
Returns:
Number
saturation(saturation)
get/set hsv saturation. Use with Konva.Filters.HSV or Konva.Filters.HSL filter.
Parameters:
saturation
(Number): 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc..
Returns:
Number
value(value)
get/set hsv value. Use with Konva.Filters.HSV filter.
Parameters:
value
(Number): 0 is no change, -1.0 halves the value, 1.0 doubles, etc..
Returns:
Number
kaleidoscopePower(power)
get/set kaleidoscope power. Use with Konva.Filters.Kaleidoscope filter.
Parameters:
power
(Integer): of kaleidoscope
Returns:
Integer
kaleidoscopeAngle(degrees)
get/set kaleidoscope angle. Use with Konva.Filters.Kaleidoscope filter.
Parameters:
degrees
(Integer)
Returns:
Integer
noise(noise)
get/set noise amount. Must be a value between 0 and 1. Use with Konva.Filters.Noise filter.
Parameters:
noise
(Number)
Returns:
Number
pixelSize(pixelSize)
get/set pixel size. Use with Konva.Filters.Pixelate filter.
Parameters:
pixelSize
(Integer)
Returns:
Integer
levels(level)
get/set levels. Must be a number between 0 and 1. Use with Konva.Filters.Posterize filter.
Parameters:
level
(Number): between 0 and 1
Returns:
Number
red(red)
get/set filter red value. Use with Konva.Filters.RGB filter.
Parameters:
red
(Integer): value between 0 and 255
Returns:
Integer
green(green)
get/set filter green value. Use with Konva.Filters.RGB filter.
Parameters:
green
(Integer): value between 0 and 255
Returns:
Integer
blue(blue)
get/set filter blue value. Use with Konva.Filters.RGB filter.
Parameters:
blue
(Integer): value between 0 and 255
Returns:
Integer
red(red)
get/set filter red value. Use with Konva.Filters.RGBA filter.
Parameters:
red
(Integer): value between 0 and 255
Returns:
Integer
green(green)
get/set filter green value. Use with Konva.Filters.RGBA filter.
Parameters:
green
(Integer): value between 0 and 255
Returns:
Integer
blue(blue)
get/set filter blue value. Use with Konva.Filters.RGBA filter.
Parameters:
blue
(Integer): value between 0 and 255
Returns:
Integer
alpha(alpha)
get/set filter alpha value. Use with Konva.Filters.RGBA filter.
Parameters:
alpha
(Float): value between 0 and 1
Returns:
Float
threshold(threshold)
get/set threshold. Must be a value between 0 and 1. Use with Konva.Filters.Threshold or Konva.Filters.Mask filter.
Parameters: