new Shape(config)
Shape constructor. Shapes are primitive objects such as rectangles,
circles, text, lines, etc.
Parameters:
Name | Type | Description |
---|---|---|
config |
Object |
Example
var customShape = new Konva.Shape({
x: 5,
y: 10,
fill: 'red',
// a Konva.Canvas renderer is passed into the drawFunc function
drawFunc: function(context) {
context.beginPath();
context.moveTo(200, 50);
context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170);
context.closePath();
context.fillStrokeShape(this);
}
});
Extends
Methods
-
addName(name) → {Konva.Node}
-
add name to node
Parameters:
Name Type Description name
String - Inherited From:
- Source:
Returns:
- Type
- Konva.Node
Example
node.name('red'); node.addName('selected'); node.name(); // return 'red selected'
-
alpha(alpha) → {Float}
-
get/set filter alpha value. Use with Konva.Filters.RGBA filter.
Parameters:
Name Type Description alpha
Float value between 0 and 1 - Inherited From:
- Source:
Returns:
- Type
- Float
-
blue(blue) → {Integer}
-
get/set filter blue value. Use with Konva.Filters.RGBA filter.
Parameters:
Name Type Description blue
Integer value between 0 and 255 - Inherited From:
- Source:
Returns:
- Type
- Integer
-
blue(blue) → {Integer}
-
get/set filter blue value. Use with Konva.Filters.RGB filter.
Parameters:
Name Type Description blue
Integer value between 0 and 255 - Inherited From:
- Source:
Returns:
- Type
- Integer
-
blurRadius(radius) → {Integer}
-
get/set blur radius. Use with Konva.Filters.Blur filter
Parameters:
Name Type Description radius
Integer - Inherited From:
- Source:
Returns:
- Type
- Integer
-
brightness(brightness) → {Number}
-
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:
Name Type Description brightness
Number value between -1 and 1 - Inherited From:
- Source:
Returns:
- Type
- Number
-
cache(config) → {Konva.Node}
-
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 [link to demo page](link to demo page) for more information.
Parameters:
Name Type Argument Description config
Object <optional>
Properties
Name Type Argument Description x
Number <optional>
y
Number <optional>
width
Number <optional>
height
Number <optional>
offset
Number <optional>
increase canvas size by `offset` pixel in all directions. drawBorder
Boolean <optional>
when set to true, a red border will be drawn around the cached region for debugging purposes - Inherited From:
- Source:
Returns:
- Type
- 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 });
-
clearCache() → {Konva.Node}
-
clear cached canvas
- Inherited From:
- Source:
Returns:
- Type
- Konva.Node
Example
node.clearCache();
-
clone(obj) → {Konva.Node}
-
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:
Name Type Description obj
Object override attrs - Inherited From:
- Source:
Returns:
- Type
- Konva.Node
Example
// simple clone var clone = node.clone(); // clone a node and override the x position var clone = rect.clone({ x: 5 });
-
dash(dash) → {Array}
-
get/set dash array for stroke.
Parameters:
Name Type Description dash
Array Returns:
- Type
- Array
Example
// apply dashed stroke that is 10px long and 5 pixels apart line.dash([10, 5]); // apply dashed stroke that is made up of alternating dashed // lines that are 10px long and 20px apart, and dots that have // a radius of 5px and are 20px apart line.dash([10, 20, 0.001, 20]);
-
dashEnabled(enabled) → {Boolean}
-
get/set dash enabled flag
Parameters:
Name Type Description enabled
Boolean Returns:
- Type
- Boolean
Example
// get dash enabled flag var dashEnabled = shape.dashEnabled(); // disable dash shape.dashEnabled(false); // enable dash shape.dashEnabled(true);
-
destroy()
-
remove and destroy self
- Inherited From:
- Source:
Example
node.destroy();
-
dragBoundFunc(dragBoundFunc) → {function}
-
get/set drag bound function. This is used to override the default drag and drop position
Parameters:
Name Type Description dragBoundFunc
function - Inherited From:
- Source:
Returns:
- Type
- function
Example
// get drag bound function var dragBoundFunc = node.dragBoundFunc(); // create vertical drag and drop node.dragBoundFunc(function(pos){ return { x: this.getAbsolutePosition().x, y: pos.y }; });
-
dragDistance(distance) → {Number}
-
get/set drag distance
Parameters:
Name Type Description distance
Number - Inherited From:
- Source:
Returns:
- Type
- 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;
-
draggable(draggable) → {Boolean}
-
get/set draggable flag
Parameters:
Name Type Description draggable
Boolean - Inherited From:
- Source:
Returns:
- Type
- Boolean
Example
// get draggable flag var draggable = node.draggable(); // enable drag and drop node.draggable(true); // disable drag and drop node.draggable(false);
-
draw() → {Konva.Node}
-
draw both scene and hit graphs. If the node being drawn is the stage, all of the layers will be cleared and redrawn
- Inherited From:
- Source:
Returns:
- Type
- Konva.Node
-
drawHitFromCache(alphaThreshold) → {Konva.Shape}
-
draw hit graph using the cached scene canvas
Parameters:
Name Type Description alphaThreshold
Integer alpha channel threshold that determines whether or not a pixel should be drawn onto the hit graph. Must be a value between 0 and 255. The default is 0 Returns:
- Type
- Konva.Shape
Example
shape.cache(); shape.drawHitFromCache();
-
embossBlend(embossBlend) → {Boolean}
-
get/set emboss blend. Use with Konva.Filters.Emboss filter.
Parameters:
Name Type Description embossBlend
Boolean - Inherited From:
- Source:
Returns:
- Type
- Boolean
-
embossDirection(embossDirection) → {String}
-
get/set emboss direction. Use with Konva.Filters.Emboss filter.
Parameters:
Name Type Description embossDirection
String can be top-left, top, top-right, right, bottom-right, bottom, bottom-left or left The default is top-left - Inherited From:
- Source:
Returns:
- Type
- String
-
embossStrength(level) → {Number}
-
get/set emboss strength. Use with Konva.Filters.Emboss filter.
Parameters:
Name Type Description level
Number between 0 and 1. Default is 0.5 - Inherited From:
- Source:
Returns:
- Type
- Number
-
embossWhiteLevel(embossWhiteLevel) → {Number}
-
get/set emboss white level. Use with Konva.Filters.Emboss filter.
Parameters:
Name Type Description embossWhiteLevel
Number between 0 and 1. Default is 0.5 - Inherited From:
- Source:
Returns:
- Type
- Number
-
enhance(amount) → {Float}
-
get/set enhance. Use with Konva.Filters.Enhance filter.
Parameters:
Name Type Description amount
Float - Inherited From:
- Source:
Returns:
- Type
- Float
-
fill(color) → {String}
-
get/set fill color
Parameters:
Name Type Description color
String Returns:
- Type
- String
Example
// get fill color var fill = shape.fill(); // set fill color with color string shape.fill('green'); // set fill color with hex shape.fill('#00ff00'); // set fill color with rgb shape.fill('rgb(0,255,0)'); // set fill color with rgba and make it 50% opaque shape.fill('rgba(0,255,0,0.5'); // shape without fill shape.fill(null);
-
fillEnabled(enabled) → {Boolean}
-
get/set fill enabled flag
Parameters:
Name Type Description enabled
Boolean Returns:
- Type
- Boolean
Example
// get fill enabled flag var fillEnabled = shape.fillEnabled(); // disable fill shape.fillEnabled(false); // enable fill shape.fillEnabled(true);
-
fillLinearGradientColorStops(colorStops) → {Array}
-
get/set fill linear gradient color stops
Parameters:
Name Type Description colorStops
Array Returns:
colorStops- Type
- Array
Example
// get fill linear gradient color stops var colorStops = shape.fillLinearGradientColorStops(); // create a linear gradient that starts with red, changes to blue // halfway through, and then changes to green shape.fillLinearGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');
-
fillLinearGradientEndPoint(endPoint) → {Object}
-
get/set fill linear gradient end point
Parameters:
Name Type Description endPoint
Object Properties
Name Type Description x
Number y
Number Returns:
- Type
- Object
Example
// get fill linear gradient end point var endPoint = shape.fillLinearGradientEndPoint(); // set fill linear gradient end point shape.fillLinearGradientEndPoint({ x: 20 y: 10 });
-
fillLinearGradientEndPointX(x) → {Number}
-
get/set fill linear gradient end point x
Parameters:
Name Type Description x
Number Returns:
- Type
- Number
Example
// get fill linear gradient end point x var endPointX = shape.fillLinearGradientEndPointX(); // set fill linear gradient end point x shape.fillLinearGradientEndPointX(20);
-
fillLinearGradientEndPointY(y) → {Number}
-
get/set fill linear gradient end point y
Parameters:
Name Type Description y
Number Returns:
- Type
- Number
Example
// get fill linear gradient end point y var endPointY = shape.fillLinearGradientEndPointY(); // set fill linear gradient end point y shape.fillLinearGradientEndPointY(20);
-
fillLinearGradientStartPoint(startPoint) → {Object}
-
get/set fill linear gradient start point
Parameters:
Name Type Description startPoint
Object Properties
Name Type Description x
Number y
Number Returns:
- Type
- Object
Example
// get fill linear gradient start point var startPoint = shape.fillLinearGradientStartPoint(); // set fill linear gradient start point shape.fillLinearGradientStartPoint({ x: 20 y: 10 });
-
fillLinearGradientStartPointX(x) → {Number}
-
get/set fill linear gradient start point x
Parameters:
Name Type Description x
Number Returns:
- Type
- Number
Example
// get fill linear gradient start point x var startPointX = shape.fillLinearGradientStartPointX(); // set fill linear gradient start point x shape.fillLinearGradientStartPointX(20);
-
fillLinearGradientStartPointY(y) → {Number}
-
get/set fill linear gradient start point y
Parameters:
Name Type Description y
Number Returns:
- Type
- Number
Example
// get fill linear gradient start point y var startPointY = shape.fillLinearGradientStartPointY(); // set fill linear gradient start point y shape.fillLinearGradientStartPointY(20);
-
fillPatternImage(image) → {Image}
-
get/set fill pattern image
Parameters:
Name Type Description image
Image object Returns:
- Type
- Image
Example
// get fill pattern image var fillPatternImage = shape.fillPatternImage(); // set fill pattern image var imageObj = new Image(); imageObj.onload = function() { shape.fillPatternImage(imageObj); }; imageObj.src = 'path/to/image/jpg';
-
fillPatternOffset(offset) → {Object}
-
get/set fill pattern offset
Parameters:
Name Type Description offset
Object Properties
Name Type Description x
Number y
Number Returns:
- Type
- Object
Example
// get fill pattern offset var patternOffset = shape.fillPatternOffset(); // set fill pattern offset shape.fillPatternOffset({ x: 20 y: 10 });
-
fillPatternOffsetX(x) → {Number}
-
get/set fill pattern offset x
Parameters:
Name Type Description x
Number Returns:
- Type
- Number
Example
// get fill pattern offset x var patternOffsetX = shape.fillPatternOffsetX(); // set fill pattern offset x shape.fillPatternOffsetX(20);
-
fillPatternOffsetY(y) → {Number}
-
get/set fill pattern offset y
Parameters:
Name Type Description y
Number Returns:
- Type
- Number
Example
// get fill pattern offset y var patternOffsetY = shape.fillPatternOffsetY(); // set fill pattern offset y shape.fillPatternOffsetY(10);
-
fillPatternRepeat(repeat) → {String}
-
get/set fill pattern repeat. Can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'repeat'
Parameters:
Name Type Description repeat
String Returns:
- Type
- String
Example
// get fill pattern repeat var repeat = shape.fillPatternRepeat(); // repeat pattern in x direction only shape.fillPatternRepeat('repeat-x'); // do not repeat the pattern shape.fillPatternRepeat('no repeat');
-
fillPatternRotation(rotation) → {Konva.Shape}
-
get/set fill pattern rotation in degrees
Parameters:
Name Type Description rotation
Number Returns:
- Type
- Konva.Shape
Example
// get fill pattern rotation var patternRotation = shape.fillPatternRotation(); // set fill pattern rotation shape.fillPatternRotation(20);
-
fillPatternScale(scale) → {Object}
-
get/set fill pattern scale
Parameters:
Name Type Description scale
Object Properties
Name Type Description x
Number y
Number Returns:
- Type
- Object
Example
// get fill pattern scale var patternScale = shape.fillPatternScale(); // set fill pattern scale shape.fillPatternScale({ x: 2 y: 2 });
-
fillPatternScaleX(x) → {Number}
-
get/set fill pattern scale x
Parameters:
Name Type Description x
Number Returns:
- Type
- Number
Example
// get fill pattern scale x var patternScaleX = shape.fillPatternScaleX(); // set fill pattern scale x shape.fillPatternScaleX(2);
-
fillPatternScaleY(y) → {Number}
-
get/set fill pattern scale y
Parameters:
Name Type Description y
Number Returns:
- Type
- Number
Example
// get fill pattern scale y var patternScaleY = shape.fillPatternScaleY(); // set fill pattern scale y shape.fillPatternScaleY(2);
-
fillPatternX(x) → {Number}
-
get/set fill pattern x
Parameters:
Name Type Description x
Number Returns:
- Type
- Number
Example
// get fill pattern x var fillPatternX = shape.fillPatternX(); // set fill pattern x shape.fillPatternX(20);
-
fillPatternY(y) → {Number}
-
get/set fill pattern y
Parameters:
Name Type Description y
Number Returns:
- Type
- Number
Example
// get fill pattern y var fillPatternY = shape.fillPatternY(); // set fill pattern y shape.fillPatternY(20);
-
fillPriority(priority) → {String}
-
get/set fill priority. can be color, pattern, linear-gradient, or radial-gradient. The default is color. This is handy if you want to toggle between different fill types.
Parameters:
Name Type Description priority
String Returns:
- Type
- String
Example
// get fill priority var fillPriority = shape.fillPriority(); // set fill priority shape.fillPriority('linear-gradient');
-
fillRadialGradientColorStops(colorStops) → {Array}
-
get/set fill radial gradient color stops
Parameters:
Name Type Description colorStops
Number Returns:
- Type
- Array
Example
// get fill radial gradient color stops var colorStops = shape.fillRadialGradientColorStops(); // create a radial gradient that starts with red, changes to blue // halfway through, and then changes to green shape.fillRadialGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');
-
fillRadialGradientEndPoint(endPoint) → {Object}
-
get/set fill radial gradient end point
Parameters:
Name Type Description endPoint
Object Properties
Name Type Description x
Number y
Number Returns:
- Type
- Object
Example
// get fill radial gradient end point var endPoint = shape.fillRadialGradientEndPoint(); // set fill radial gradient end point shape.fillRadialGradientEndPoint({ x: 20 y: 10 });
-
fillRadialGradientEndPointX(x) → {Number}
-
get/set fill radial gradient end point x
Parameters:
Name Type Description x
Number Returns:
- Type
- Number
Example
// get fill radial gradient end point x var endPointX = shape.fillRadialGradientEndPointX(); // set fill radial gradient end point x shape.fillRadialGradientEndPointX(20);
-
fillRadialGradientEndPointY(y) → {Number}
-
get/set fill radial gradient end point y
Parameters:
Name Type Description y
Number Returns:
- Type
- Number
Example
// get fill radial gradient end point y var endPointY = shape.fillRadialGradientEndPointY(); // set fill radial gradient end point y shape.fillRadialGradientEndPointY(20);
-
fillRadialGradientEndRadius(radius) → {Number}
-
get/set fill radial gradient end radius
Parameters:
Name Type Description radius
Number Returns:
- Type
- Number
Example
// get radial gradient end radius var endRadius = shape.fillRadialGradientEndRadius(); // set radial gradient end radius shape.fillRadialGradientEndRadius(100);
-
fillRadialGradientStartPoint(startPoint) → {Object}
-
get/set fill radial gradient start point
Parameters:
Name Type Description startPoint
Object Properties
Name Type Description x
Number y
Number Returns:
- Type
- Object
Example
// get fill radial gradient start point var startPoint = shape.fillRadialGradientStartPoint(); // set fill radial gradient start point shape.fillRadialGradientStartPoint({ x: 20 y: 10 });
-
fillRadialGradientStartPointX(x) → {Number}
-
get/set fill radial gradient start point x
Parameters:
Name Type Description x
Number Returns:
- Type
- Number
Example
// get fill radial gradient start point x var startPointX = shape.fillRadialGradientStartPointX(); // set fill radial gradient start point x shape.fillRadialGradientStartPointX(20);
-
fillRadialGradientStartPointY(y) → {Number}
-
get/set fill radial gradient start point y
Parameters:
Name Type Description y
Number Returns:
- Type
- Number
Example
// get fill radial gradient start point y var startPointY = shape.fillRadialGradientStartPointY(); // set fill radial gradient start point y shape.fillRadialGradientStartPointY(20);
-
fillRadialGradientStartRadius(radius) → {Number}
-
get/set fill radial gradient start radius
Parameters:
Name Type Description radius
Number Returns:
- Type
- Number
Example
// get radial gradient start radius var startRadius = shape.fillRadialGradientStartRadius(); // set radial gradient start radius shape.fillRadialGradientStartRadius(0);
-
filters(filters) → {Array}
-
get/set filters. Filters are applied to cached canvases
Parameters:
Name Type Description filters
Array array of filters - Inherited From:
- Source:
Returns:
- Type
- 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 ]);
-
findAncestor(selector, includeSelf, stopNode) → {Konva.Node}
-
get ancestor (parent or parent of the parent, etc) of the node that match passed selector
Parameters:
Name Type Argument Description selector
String <optional>
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) - Inherited From:
- Source:
Returns:
ancestor- Type
- Konva.Node
Example
// get one of the parent group var group = node.findAncestors('.mygroup');
-
findAncestors(selector, includeSelf, stopNode) → {Array}
-
get all ancestros (parent then parent of the parent, etc) of the node
Parameters:
Name Type Argument Description selector
String <optional>
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) - Inherited From:
- Source:
Returns:
[ancestors]- Type
- Array
Example
// get one of the parent group var parentGroups = node.findAncestors('Group');
-
fire(eventType, evt, bubble) → {Konva.Node}
-
fire event
Parameters:
Name Type Argument Description 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. - Inherited From:
- Source:
Returns:
- Type
- 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);
-
getAbsoluteOpacity() → {Number}
-
get absolute opacity
- Inherited From:
- Source:
Returns:
- Type
- Number
-
getAbsolutePosition(top) → {Object}
-
get absolute position relative to the top left corner of the stage container div or relative to passed node
Parameters:
Name Type Argument Description top
Object <optional>
optional parent node - Inherited From:
- Source:
Returns:
- Type
- Object
-
getAbsoluteTransform() → {Konva.Transform}
-
get absolute transform of the node which takes into account its ancestor transforms
- Inherited From:
- Source:
Returns:
- Type
- Konva.Transform
-
getAbsoluteZIndex() → {Integer}
-
get absolute z-index which takes into account sibling and ancestor indices
- Inherited From:
- Source:
Returns:
- Type
- Integer
-
getAncestors() → {Konva.Collection}
-
get ancestors
- Inherited From:
- Source:
Returns:
- Type
- Konva.Collection
Example
shape.getAncestors().each(function(node) { console.log(node.getId()); })
-
getAttr(attr) → {Integer|String|Object|Array}
-
get attr
Parameters:
Name Type Description attr
String - Inherited From:
- Source:
Returns:
- Type
- Integer | String | Object | Array
Example
var x = node.getAttr('x');
-
getAttrs() → {Object}
-
get attrs object literal
- Inherited From:
- Source:
Returns:
- Type
- Object
-
getCanvas() → {Konva.Canvas}
-
get canvas renderer tied to the layer. Note that this returns a canvas renderer, not a canvas element
Returns:
- Type
- Konva.Canvas
-
getClassName() → {String}
-
get class name, which may return Stage, Layer, Group, or shape class names like Rect, Circle, Text, etc.
- Inherited From:
- Source:
Returns:
- Type
- String
-
getClientRect(skipTransform) → {Object}
-
Return client rectangle {x, y, width, height} of node. This rectangle also include all styling (strokes, shadows, etc). The rectangle position is relative to parent container.
Parameters:
Name Type Argument Description skipTransform
Boolean <optional>
flag should we skip transformation to rectangle - Inherited From:
- Source:
Returns:
rect with {x, y, width, height} properties- Type
- Object
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(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}
-
getContext() → {Konva.Context}
-
get canvas context tied to the layer
Returns:
- Type
- Konva.Context
-
getDepth() → {Integer}
-
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
- Inherited From:
- Source:
Returns:
- Type
- Integer
-
getLayer() → {Konva.Layer}
-
get layer ancestor
- Inherited From:
- Source:
Returns:
- Type
- Konva.Layer
-
getParent() → {Konva.Node}
-
get parent container
- Inherited From:
- Source:
Returns:
- Type
- Konva.Node
-
getSelfRect() → {Object}
-
return self rectangle (x, y, width, height) of shape. This method are not taken into account transformation and styles.
- Inherited From:
- Source:
Returns:
rect with {x, y, width, height} properties- Type
- Object
Example
rect.getSelfRect(); // return {x:0, y:0, width:rect.width(), height:rect.height()} circle.getSelfRect(); // return {x: - circle.width() / 2, y: - circle.height() / 2, width:circle.width(), height:circle.height()}
-
getStage() → {Konva.Stage}
-
get stage ancestor
- Inherited From:
- Source:
Returns:
- Type
- Konva.Stage
-
getTransform() → {Konva.Transform}
-
get transform of the node
- Inherited From:
- Source:
Returns:
- Type
- Konva.Transform
-
getType() → {String}
-
get the node type, which may return Stage, Layer, Group, or Node
- Inherited From:
- Source:
Returns:
- Type
- String
-
getZIndex() → {Integer}
-
get zIndex relative to the node's siblings who share the same parent
- Inherited From:
- Source:
Returns:
- Type
- Integer
-
green(green) → {Integer}
-
get/set filter green value. Use with Konva.Filters.RGBA filter.
Parameters:
Name Type Description green
Integer value between 0 and 255 - Inherited From:
- Source:
Returns:
- Type
- Integer
-
green(green) → {Integer}
-
get/set filter green value. Use with Konva.Filters.RGB filter.
Parameters:
Name Type Description green
Integer value between 0 and 255 - Inherited From:
- Source:
Returns:
- Type
- Integer
-
hasFill() → {Boolean}
-
returns whether or not the shape will be filled
Returns:
- Type
- Boolean
-
hasName(name) → {Boolean}
-
check is node has name
Parameters:
Name Type Description name
String - Inherited From:
- Source:
Returns:
- Type
- Boolean
Example
node.name('red'); node.hasName('red'); // return true node.hasName('selected'); // return false
-
hasShadow() → {Boolean}
-
returns whether or not a shadow will be rendered
Returns:
- Type
- Boolean
-
hasStroke() → {Boolean}
-
returns whether or not the shape will be stroked
Returns:
- Type
- Boolean
-
height(height) → {Number}
-
get/set height
Parameters:
Name Type Description height
Number - Inherited From:
- Source:
Returns:
- Type
- Number
Example
// get height var height = node.height(); // set height node.height(100);
-
hide() → {Konva.Node}
-
hide node. Hidden nodes are no longer detectable
- Inherited From:
- Source:
Returns:
- Type
- Konva.Node
-
hitFunc(drawFunc) → {function}
-
get/set hit draw function
Parameters:
Name Type Description drawFunc
function drawing function Returns:
- Type
- function
Example
// get hit draw function var hitFunc = shape.hitFunc(); // set hit draw function shape.hitFunc(function(context) { context.beginPath(); context.rect(0, 0, this.width(), this.height()); context.closePath(); context.fillStrokeShape(this); });
-
hue(hue) → {Number}
-
get/set hsv hue in degrees. Use with Konva.Filters.HSV or Konva.Filters.HSL filter.
Parameters:
Name Type Description hue
Number value between 0 and 359 - Inherited From:
- Source:
Returns:
- Type
- Number
-
hue(hue) → {Number}
-
get/set hsv hue in degrees. Use with Konva.Filters.HSV or Konva.Filters.HSL filter.
Parameters:
Name Type Description hue
Number value between 0 and 359 - Inherited From:
- Source:
Returns:
- Type
- Number
-
id(id) → {String}
-
get/set id. Id is global for whole page.
Parameters:
Name Type Description id
String - Inherited From:
- Source:
Returns:
- Type
- String
Example
// get id var name = node.id(); // set id node.id('foo');
-
intersects(point) → {Boolean}
-
determines if point is in the shape, regardless if other shapes are on top of it. Note: because this method clears a temporary canvas and then redraws the shape, it performs very poorly if executed many times consecutively. Please use the Konva.Stage#getIntersection method if at all possible because it performs much better
Parameters:
Name Type Description point
Object Properties
Name Type Description x
Number y
Number Returns:
- Type
- Boolean
-
isDragging()
-
determine if node is currently in drag and drop mode
- Inherited From:
- Source:
-
isListening() → {Boolean}
-
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 | T F | F | F ----------+-----------+------------ T | I | T F | I | F I | I | T
- Inherited From:
- Source:
Returns:
- Type
- Boolean
-
isVisible() → {Boolean}
-
determine if node is visible by taking into account ancestors. Parent | Self | isVisible visible | visible | ----------+-----------+------------ T | T | T T | F | F F | T | T F | F | F ----------+-----------+------------ T | I | T F | I | F I | I | T
- Inherited From:
- Source:
Returns:
- Type
- Boolean
-
kaleidoscopeAngle(degrees) → {Integer}
-
get/set kaleidoscope angle. Use with Konva.Filters.Kaleidoscope filter.
Parameters:
Name Type Description degrees
Integer - Inherited From:
- Source:
Returns:
- Type
- Integer
-
kaleidoscopePower(power) → {Integer}
-
get/set kaleidoscope power. Use with Konva.Filters.Kaleidoscope filter.
Parameters:
Name Type Description power
Integer of kaleidoscope - Inherited From:
- Source:
Returns:
- Type
- Integer
-
levels(level) → {Number}
-
get/set levels. Must be a number between 0 and 1. Use with Konva.Filters.Posterize filter.
Parameters:
Name Type Description level
Number between 0 and 1 - Inherited From:
- Source:
Returns:
- Type
- Number
-
lineCap(lineCap) → {String}
-
get/set line cap. Can be butt, round, or square
Parameters:
Name Type Description lineCap
String Returns:
- Type
- String
Example
// get line cap var lineCap = shape.lineCap(); // set line cap shape.lineCap('round');
-
lineJoin(lineJoin) → {String}
-
get/set line join. Can be miter, round, or bevel. The default is miter
Parameters:
Name Type Description lineJoin
String Returns:
- Type
- String
Example
// get line join var lineJoin = shape.lineJoin(); // set line join shape.lineJoin('round');
-
listening(listening) → {Boolean|String}
-
get/set listenig attr. If you need to determine if a node is listening or not by taking into account its parents, use the isListening() method
Parameters:
Name Type Description listening
Boolean | String Can be "inherit", true, or false. The default is "inherit". - Inherited From:
- Source:
Returns:
- Type
- Boolean | String
Example
// get listening attr var listening = node.listening(); // stop listening for events node.listening(false); // listen for events node.listening(true); // listen to events according to the parent node.listening('inherit');
-
move(change) → {Konva.Node}
-
move node by an amount relative to its current position
Parameters:
Name Type Description change
Object Properties
Name Type Description x
Number y
Number - Inherited From:
- Source:
Returns:
- Type
- Konva.Node
Example
// move node in x direction by 1px and y direction by 2px node.move({ x: 1, y: 2) });
-
moveDown() → {Boolean}
-
move node down
- Inherited From:
- Source:
Returns:
- Type
- Boolean
-
moveTo(newContainer) → {Konva.Node}
-
move node to another container
Parameters:
Name Type Description newContainer
Container - Inherited From:
- Source:
Returns:
- Type
- Konva.Node
Example
// move node from current layer into layer2 node.moveTo(layer2);
-
moveToBottom() → {Boolean}
-
move node to the bottom of its siblings
- Inherited From:
- Source:
Returns:
- Type
- Boolean
-
moveToTop() → {Boolean}
-
move node to the top of its siblings
- Inherited From:
- Source:
Returns:
- Type
- Boolean
-
moveUp() → {Boolean}
-
move node up
- Inherited From:
- Source:
Returns:
flag is moved or not- Type
- Boolean
-
name(name) → {String}
-
get/set name
Parameters:
Name Type Description name
String - Inherited From:
- Source:
Returns:
- Type
- 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');
-
noise(noise) → {Number}
-
get/set noise amount. Must be a value between 0 and 1. Use with Konva.Filters.Noise filter.
Parameters:
Name Type Description noise
Number - Inherited From:
- Source:
Returns:
- Type
- Number
-
off(evtStr) → {Konva.Node}
-
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:
Name Type Description evtStr
String e.g. 'click', 'mousedown touchstart', '.foobar' - Inherited From:
- Source:
Returns:
- Type
- Konva.Node
Example
// remove listener node.off('click'); // remove multiple listeners node.off('click touchstart'); // remove listener by name node.off('click.foo');
-
offsetX(x) → {Number}
-
get/set offset x
Parameters:
Name Type Description x
Number - Inherited From:
- Source:
Returns:
- Type
- Number
Example
// get offset x var offsetX = node.offsetX(); // set offset x node.offsetX(3);
-
offsetY(y) → {Number}
-
get/set offset y
Parameters:
Name Type Description y
Number - Inherited From:
- Source:
Returns:
- Type
- Number
Example
// get offset y var offsetY = node.offsetY(); // set offset y node.offsetY(3);
-
on(evtStr, handler) → {Konva.Node}
-
bind events to the node. KonvaJS supports mouseover, mousemove, mouseout, mouseenter, mouseleave, mousedown, mouseup, mousewheel, click, dblclick, touchstart, touchmove, touchend, tap, dbltap, dragstart, dragmove, and dragend events. The Konva Stage supports contentMouseover, contentMousemove, contentMouseout, contentMousedown, contentMouseup, contentClick, contentDblclick, contentTouchstart, contentTouchmove, contentTouchend, contentTap, and contentDblTap. Pass in a string of events delimmited 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:
Name Type Description evtStr
String e.g. 'click', 'mousedown touchstart', 'mousedown.foo touchstart.foo' handler
function The handler function is passed an event object - Inherited From:
- Source:
Returns:
- Type
- 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 = evtn.currentTarger; });
-
opacity(opacity) → {Number}
-
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:
Name Type Description opacity
Object - Inherited From:
- Source:
Returns:
- Type
- Number
Example
// get opacity var opacity = node.opacity(); // set opacity node.opacity(0.5);
-
perfectDrawEnabled(perfectDrawEnabled) → {Boolean}
-
get/set perfectDrawEnabled. If a shape has fill, stroke and opacity you may set `perfectDrawEnabled` to improve performance. See http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html for more information. Default value is true
Parameters:
Name Type Description perfectDrawEnabled
Boolean Returns:
- Type
- Boolean
Example
// get perfectDrawEnabled var perfectDrawEnabled = shape.perfectDrawEnabled(); // set perfectDrawEnabled shape.perfectDrawEnabled();
-
pixelSize(pixelSize) → {Integer}
-
get/set pixel size. Use with Konva.Filters.Pixelate filter.
Parameters:
Name Type Description pixelSize
Integer - Inherited From:
- Source:
Returns:
- Type
- Integer
-
position(pos) → {Object}
-
get/set node position relative to parent
Parameters:
Name Type Description pos
Object Properties
Name Type Description x
Number y
Number - Inherited From:
- Source:
Returns:
- Type
- Object
Example
// get position var position = node.position(); // set position node.position({ x: 5 y: 10 });
-
red(red) → {Integer}
-
get/set filter red value. Use with Konva.Filters.RGB filter.
Parameters:
Name Type Description red
Integer value between 0 and 255 - Inherited From:
- Source:
Returns:
- Type
- Integer
-
red(red) → {Integer}
-
get/set filter red value. Use with Konva.Filters.RGBA filter.
Parameters:
Name Type Description red
Integer value between 0 and 255 - Inherited From:
- Source:
Returns:
- Type
- Integer
-
remove() → {Konva.Node}
-
remove self from parent, but don't destroy
- Inherited From:
- Source:
Returns:
- Type
- Konva.Node
Example
node.remove();
-
removeName(name) → {Konva.Node}
-
remove name from node
Parameters:
Name Type Description name
String - Inherited From:
- Source:
Returns:
- Type
- Konva.Node
Example
node.name('red selected'); node.removeName('selected'); node.hasName('selected'); // return false node.name(); // return 'red'
-
rotate(theta) → {Konva.Node}
-
rotate node by an amount in degrees relative to its current rotation
Parameters:
Name Type Description theta
Number - Inherited From:
- Source:
Returns:
- Type
- Konva.Node
-
rotation(rotation) → {Number}
-
get/set rotation in degrees
Parameters:
Name Type Description rotation
Number - Inherited From:
- Source:
Returns:
- Type
- Number
Example
// get rotation in degrees var rotation = node.rotation(); // set rotation in degrees node.rotation(45);
-
saturation(saturation) → {Number}
-
get/set hsv saturation. Use with Konva.Filters.HSV or Konva.Filters.HSL filter.
Parameters:
Name Type Description saturation
Number 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc.. - Inherited From:
- Source:
Returns:
- Type
- Number
-
saturation(saturation) → {Number}
-
get/set hsv saturation. Use with Konva.Filters.HSV or Konva.Filters.HSL filter.
Parameters:
Name Type Description saturation
Number 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc.. - Inherited From:
- Source:
Returns:
- Type
- Number
-
scale(scale) → {Object}
-
get/set scale
Parameters:
Name Type Description scale
Object Properties
Name Type Description x
Number y
Number - Inherited From:
- Source:
Returns:
- Type
- Object
Example
// get scale var scale = node.scale(); // set scale shape.scale({ x: 2 y: 3 });
-
scaleX(x) → {Number}
-
get/set scale x
Parameters:
Name Type Description x
Number - Inherited From:
- Source:
Returns:
- Type
- Number
Example
// get scale x var scaleX = node.scaleX(); // set scale x node.scaleX(2);
-
scaleY(y) → {Number}
-
get/set scale y
Parameters:
Name Type Description y
Number - Inherited From:
- Source:
Returns:
- Type
- Number
Example
// get scale y var scaleY = node.scaleY(); // set scale y node.scaleY(2);
-
sceneFunc(drawFunc) → {function}
-
get/set scene draw function
Parameters:
Name Type Description drawFunc
function drawing function Returns:
- Type
- function
Example
// get scene draw function var sceneFunc = shape.sceneFunc(); // set scene draw function shape.sceneFunc(function(context) { context.beginPath(); context.rect(0, 0, this.width(), this.height()); context.closePath(); context.fillStrokeShape(this); });
-
setAbsolutePosition(pos) → {Konva.Node}
-
set absolute position
Parameters:
Name Type Description pos
Object Properties
Name Type Description x
Number y
Number - Inherited From:
- Source:
Returns:
- Type
- Konva.Node
-
setAttr(attr, val) → {Konva.Node}
-
set attr
Parameters:
Name Type Description attr
String val
* - Inherited From:
- Source:
Returns:
- Type
- Konva.Node
Example
node.setAttr('x', 5);
-
setAttrs(config) → {Konva.Node}
-
set multiple attrs at once using an object literal
Parameters:
Name Type Description config
Object object containing key value pairs - Inherited From:
- Source:
Returns:
- Type
- Konva.Node
Example
node.setAttrs({ x: 5, fill: 'red' });
-
setZIndex(zIndex) → {Konva.Node}
-
set zIndex relative to siblings
Parameters:
Name Type Description zIndex
Integer - Inherited From:
- Source:
Returns:
- Type
- Konva.Node
-
shadowBlur(blur) → {Number}
-
get/set shadow blur
Parameters:
Name Type Description blur
Number Returns:
- Type
- Number
Example
// get shadow blur var shadowBlur = shape.shadowBlur(); // set shadow blur shape.shadowBlur(10);
-
shadowColor(color) → {String}
-
get/set shadow color
Parameters:
Name Type Description color
String Returns:
- Type
- String
Example
// get shadow color var shadow = shape.shadowColor(); // set shadow color with color string shape.shadowColor('green'); // set shadow color with hex shape.shadowColor('#00ff00'); // set shadow color with rgb shape.shadowColor('rgb(0,255,0)'); // set shadow color with rgba and make it 50% opaque shape.shadowColor('rgba(0,255,0,0.5');
-
shadowEnabled(enabled) → {Boolean}
-
get/set shadow enabled flag
Parameters:
Name Type Description enabled
Boolean Returns:
- Type
- Boolean
Example
// get shadow enabled flag var shadowEnabled = shape.shadowEnabled(); // disable shadow shape.shadowEnabled(false); // enable shadow shape.shadowEnabled(true);
-
shadowForStrokeEnabled(shadowForStrokeEnabled) → {Boolean}
-
get/set shadowForStrokeEnabled. Useful for performance optimization. You may set `shape.shadowForStrokeEnabled(false)`. In this case stroke will be no draw shadow for stroke. Remember if you set `shadowForStrokeEnabled = false` for non closed line - that line with have no shadow!. Default value is true
Parameters:
Name Type Description shadowForStrokeEnabled
Boolean Returns:
- Type
- Boolean
Example
// get shadowForStrokeEnabled var shadowForStrokeEnabled = shape.shadowForStrokeEnabled(); // set shadowForStrokeEnabled shape.shadowForStrokeEnabled();
-
shadowOffset(offset) → {Object}
-
get/set shadow offset
Parameters:
Name Type Description offset
Object Properties
Name Type Description x
Number y
Number Returns:
- Type
- Object
Example
// get shadow offset var shadowOffset = shape.shadowOffset(); // set shadow offset shape.shadowOffset({ x: 20 y: 10 });
-
shadowOffsetX(x) → {Number}
-
get/set shadow offset x
Parameters:
Name Type Description x
Number Returns:
- Type
- Number
Example
// get shadow offset x var shadowOffsetX = shape.shadowOffsetX(); // set shadow offset x shape.shadowOffsetX(5);
-
shadowOffsetY(y) → {Number}
-
get/set shadow offset y
Parameters:
Name Type Description y
Number Returns:
- Type
- Number
Example
// get shadow offset y var shadowOffsetY = shape.shadowOffsetY(); // set shadow offset y shape.shadowOffsetY(5);
-
shadowOpacity(opacity) → {Number}
-
get/set shadow opacity. must be a value between 0 and 1
Parameters:
Name Type Description opacity
Number Returns:
- Type
- Number
Example
// get shadow opacity var shadowOpacity = shape.shadowOpacity(); // set shadow opacity shape.shadowOpacity(0.5);
-
shouldDrawHit() → {Boolean}
-
determine if listening is enabled by taking into account descendants. If self or any children have _isListeningEnabled set to true, then self also has listening enabled.
- Inherited From:
- Source:
Returns:
- Type
- Boolean
-
show() → {Konva.Node}
-
show node
- Inherited From:
- Source:
Returns:
- Type
- Konva.Node
-
size(size) → {Object}
-
get/set node size
Parameters:
Name Type Description size
Object Properties
Name Type Description width
Number height
Number - Inherited From:
- Source:
Returns:
- Type
- Object
Example
// get node size var size = node.size(); var x = size.x; var y = size.y; // set size node.size({ width: 100, height: 200 });
-
skew(skew) → {Object}
-
get/set skew
Parameters:
Name Type Description skew
Object Properties
Name Type Description x
Number y
Number - Inherited From:
- Source:
Returns:
- Type
- Object
Example
// get skew var skew = node.skew(); // set skew node.skew({ x: 20 y: 10 });
-
skewX(x) → {Number}
-
get/set skew x
Parameters:
Name Type Description x
Number - Inherited From:
- Source:
Returns:
- Type
- Number
Example
// get skew x var skewX = node.skewX(); // set skew x node.skewX(3);
-
skewY(y) → {Number}
-
get/set skew y
Parameters:
Name Type Description y
Number - Inherited From:
- Source:
Returns:
- Type
- Number
Example
// get skew y var skewY = node.skewY(); // set skew y node.skewY(3);
-
startDrag()
-
initiate drag and drop
- Inherited From:
- Source:
-
stopDrag()
-
stop drag and drop
- Inherited From:
- Source:
-
stroke(color) → {String}
-
get/set stroke color
Parameters:
Name Type Description color
String Returns:
- Type
- String
Example
// get stroke color var stroke = shape.stroke(); // set stroke color with color string shape.stroke('green'); // set stroke color with hex shape.stroke('#00ff00'); // set stroke color with rgb shape.stroke('rgb(0,255,0)'); // set stroke color with rgba and make it 50% opaque shape.stroke('rgba(0,255,0,0.5');
-
strokeEnabled(enabled) → {Boolean}
-
get/set stroke enabled flag
Parameters:
Name Type Description enabled
Boolean Returns:
- Type
- Boolean
Example
// get stroke enabled flag var strokeEnabled = shape.strokeEnabled(); // disable stroke shape.strokeEnabled(false); // enable stroke shape.strokeEnabled(true);
-
strokeHitEnabled(strokeHitEnabled) → {Boolean}
-
get/set strokeHitEnabled property. Useful for performance optimization. You may set `shape.strokeHitEnabled(false)`. In this case stroke will be no draw on hit canvas, so hit area of shape will be decreased (by lineWidth / 2). Remember that non closed line with `strokeHitEnabled = false` will be not drawn on hit canvas, that is mean line will no trigger pointer events (like mouseover) Default value is true
Parameters:
Name Type Description strokeHitEnabled
Boolean Returns:
- Type
- Boolean
Example
// get strokeHitEnabled var strokeHitEnabled = shape.strokeHitEnabled(); // set strokeHitEnabled shape.strokeHitEnabled();
-
strokeScaleEnabled(enabled) → {Boolean}
-
get/set strokeScale enabled flag
Parameters:
Name Type Description enabled
Boolean Returns:
- Type
- Boolean
Example
// get stroke scale enabled flag var strokeScaleEnabled = shape.strokeScaleEnabled(); // disable stroke scale shape.strokeScaleEnabled(false); // enable stroke scale shape.strokeScaleEnabled(true);
-
strokeWidth(strokeWidth) → {Number}
-
get/set stroke width
Parameters:
Name Type Description strokeWidth
Number Returns:
- Type
- Number
Example
// get stroke width var strokeWidth = shape.strokeWidth(); // set stroke width shape.strokeWidth();
-
threshold(threshold) → {Number}
-
get/set threshold. Must be a value between 0 and 1. Use with Konva.Filters.Threshold or Konva.Filters.Mask filter.
Parameters:
Name Type Description threshold
Number - Inherited From:
- Source:
Returns:
- Type
- Number
-
to(params)
-
Tween node properties. Shorter usage of Konva.Tween object.
Parameters:
Name Type Argument Description params
Object <optional>
tween params - Inherited From:
- Source:
Example
circle.to({ x : 50, duration : 0.5 });
-
toDataURL(config) → {String}
-
Creates a composite data URL. 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:
Name Type Description config
Object Properties
Name Type Argument Description mimeType
String <optional>
can be "image/png" or "image/jpeg". "image/png" is the default x
Number <optional>
x position of canvas section y
Number <optional>
y position of canvas section width
Number <optional>
width of canvas section height
Number <optional>
height of canvas section 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 - Inherited From:
- Source:
Returns:
- Type
- String
-
toImage(config)
-
converts node into an image. Since the toImage method is asynchronous, a callback is required. toImage is most commonly used to cache complex drawings as an image so that they don't have to constantly be redrawn
Parameters:
Name Type Description config
Object Properties
Name Type Argument Description callback
function function executed when the composite has completed mimeType
String <optional>
can be "image/png" or "image/jpeg". "image/png" is the default x
Number <optional>
x position of canvas section y
Number <optional>
y position of canvas section width
Number <optional>
width of canvas section height
Number <optional>
height of canvas section 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 - Inherited From:
- Source:
Example
var image = node.toImage({ callback: function(img) { // do stuff with img } });
-
toJSON() → {String}
-
convert Node into a JSON string. Returns a JSON string.
- Inherited From:
- Source:
Returns:
}- Type
- String
-
toObject() → {Object}
-
convert Node into an object for serialization. Returns an object.
- Inherited From:
- Source:
Returns:
- Type
- Object
-
transformsEnabled(enabled) → {String}
-
get/set transforms that are enabled. Can be "all", "none", or "position". The default is "all"
Parameters:
Name Type Description enabled
String - Inherited From:
- Source:
Returns:
- Type
- String
Example
// enable position transform only to improve draw performance node.transformsEnabled('position'); // enable all transforms node.transformsEnabled('all');
-
value(value) → {Number}
-
get/set hsl luminance. Use with Konva.Filters.HSL filter.
Parameters:
Name Type Description value
Number 0 is no change, -1.0 halves the value, 1.0 doubles, etc.. - Inherited From:
- Source:
Returns:
- Type
- Number
-
value(value) → {Number}
-
get/set hsv value. Use with Konva.Filters.HSV filter.
Parameters:
Name Type Description value
Number 0 is no change, -1.0 halves the value, 1.0 doubles, etc.. - Inherited From:
- Source:
Returns:
- Type
- Number
-
visible(visible) → {Boolean|String}
-
get/set visible attr. Can be "inherit", true, or false. The default is "inherit". If you need to determine if a node is visible or not by taking into account its parents, use the isVisible() method
Parameters:
Name Type Description visible
Boolean | String - Inherited From:
- Source:
Returns:
- Type
- Boolean | String
Example
// get visible attr var visible = node.visible(); // make invisible node.visible(false); // make visible node.visible(true); // make visible according to the parent node.visible('inherit');
-
width(width) → {Number}
-
get/set width
Parameters:
Name Type Description width
Number - Inherited From:
- Source:
Returns:
- Type
- Number
Example
// get width var width = node.width(); // set width node.width(100);
-
x(x) → {Object}
-
get/set x position
Parameters:
Name Type Description x
Number - Inherited From:
- Source:
Returns:
- Type
- Object
Example
// get x var x = node.x(); // set x node.x(5);
-
y(y) → {Integer}
-
get/set y position
Parameters:
Name Type Description y
Number - Inherited From:
- Source:
Returns:
- Type
- Integer
Example
// get y var y = node.y(); // set y node.y(5);