-
-
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'
-
align(align) → {String}
-
get/set horizontal align of text. Can be 'left', 'center', or 'right'
Parameters:
Name |
Type |
Description |
align |
String
|
|
- Source:
Returns:
-
Type
-
String
Example
// get text align
var align = text.align();
// center text
text.align('center');
// align text to right
text.align('right');
-
alpha(alpha) → {Float}
-
Parameters:
Name |
Type |
Description |
alpha |
Float
|
value between 0 and 1 |
- Inherited From:
- Source:
Returns:
-
Type
-
Float
-
blue(blue) → {Integer}
-
Parameters:
Name |
Type |
Description |
blue |
Integer
|
value between 0 and 255 |
- Inherited From:
- Source:
Returns:
-
Type
-
Integer
-
blue(blue) → {Integer}
-
Parameters:
Name |
Type |
Description |
blue |
Integer
|
value between 0 and 255 |
- Inherited From:
- Source:
Returns:
-
Type
-
Integer
-
blurRadius(radius) → {Integer}
-
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 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
});
-
-
clear cached canvas
- Inherited From:
- Source:
Returns:
-
Type
-
Konva.Node
Example
node.clearCache();
-
-
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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 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 |
- Inherited From:
- Source:
Returns:
-
Type
-
Konva.Shape
Example
shape.cache();
shape.drawHitFromCache();
-
embossBlend(embossBlend) → {Boolean}
-
Parameters:
Name |
Type |
Description |
embossBlend |
Boolean
|
|
- Inherited From:
- Source:
Returns:
-
Type
-
Boolean
-
embossDirection(embossDirection) → {String}
-
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}
-
Parameters:
Name |
Type |
Description |
level |
Number
|
between 0 and 1. Default is 0.5 |
- Inherited From:
- Source:
Returns:
-
Type
-
Number
-
embossWhiteLevel(embossWhiteLevel) → {Number}
-
Parameters:
Name |
Type |
Description |
embossWhiteLevel |
Number
|
between 0 and 1. Default is 0.5 |
- Inherited From:
- Source:
Returns:
-
Type
-
Number
-
enhance(amount) → {Float}
-
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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 |
- Inherited From:
- Source:
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
|
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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);
-
fontFamily(fontFamily) → {String}
-
get/set font family
Parameters:
Name |
Type |
Description |
fontFamily |
String
|
|
- Source:
Returns:
-
Type
-
String
Example
// get font family
var fontFamily = text.fontFamily();
// set font family
text.fontFamily('Arial');
-
fontSize(fontSize) → {Number}
-
get/set font size in pixels
Parameters:
Name |
Type |
Description |
fontSize |
Number
|
|
- Source:
Returns:
-
Type
-
Number
Example
// get font size
var fontSize = text.fontSize();
// set font size to 22px
text.fontSize(22);
-
fontStyle(fontStyle) → {String}
-
set font style. Can be 'normal', 'italic', or 'bold'. 'normal' is the default.
Parameters:
Name |
Type |
Description |
fontStyle |
String
|
|
- Source:
Returns:
-
Type
-
String
Example
// get font style
var fontStyle = text.fontStyle();
// set font style
text.fontStyle('bold');
-
fontVariant(fontVariant) → {String}
-
set font variant. Can be 'normal' or 'small-caps'. 'normal' is the default.
Parameters:
Name |
Type |
Description |
fontVariant |
String
|
|
- Source:
Returns:
-
Type
-
String
Example
// get font variant
var fontVariant = text.fontVariant();
// set font variant
text.fontVariant('small-caps');
-
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
-
-
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
-
-
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
-
-
get canvas renderer tied to the layer. Note that this returns a canvas renderer, not a canvas element
- Inherited From:
- Source:
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}
-
-
get canvas context tied to the layer
- Inherited From:
- Source:
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
-
getHeight() → {Number}
-
get the height of the text area, which takes into account multi-line text, line heights, and padding
- Source:
Returns:
-
Type
-
Number
-
-
get layer ancestor
- Inherited From:
- Source:
Returns:
-
Type
-
Konva.Layer
-
-
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()}
-
-
get stage ancestor
- Inherited From:
- Source:
Returns:
-
Type
-
Konva.Stage
-
getText(text) → {String}
-
get/set text
Parameters:
Name |
Type |
Description |
text |
String
|
|
- Source:
Returns:
-
Type
-
String
Example
// get text
var text = text.text();
// set text
text.text('Hello world!');
-
getTextHeight() → {Number}
-
get text height
- Source:
Returns:
-
Type
-
Number
-
getTextWidth() → {Number}
-
get text width
- Source:
Returns:
-
Type
-
Number
-
-
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
-
getWidth() → {Number}
-
get width of text area, which includes padding
- Source:
Returns:
-
Type
-
Number
-
getZIndex() → {Integer}
-
get zIndex relative to the node's siblings who share the same parent
- Inherited From:
- Source:
Returns:
-
Type
-
Integer
-
green(green) → {Integer}
-
Parameters:
Name |
Type |
Description |
green |
Integer
|
value between 0 and 255 |
- Inherited From:
- Source:
Returns:
-
Type
-
Integer
-
green(green) → {Integer}
-
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
- Inherited From:
- Source:
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
- Inherited From:
- Source:
Returns:
-
Type
-
Boolean
-
hasStroke() → {Boolean}
-
returns whether or not the shape will be stroked
- Inherited From:
- Source:
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 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 |
- Inherited From:
- Source:
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}
-
Parameters:
Name |
Type |
Description |
hue |
Number
|
value between 0 and 359 |
- Inherited From:
- Source:
Returns:
-
Type
-
Number
-
hue(hue) → {Number}
-
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
|
|
|
- Inherited From:
- Source:
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}
-
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
|
|
- Inherited From:
- Source:
Returns:
-
Type
-
String
Example
// get line cap
var lineCap = shape.lineCap();
// set line cap
shape.lineCap('round');
-
lineHeight(lineHeight) → {Number}
-
get/set line height. The default is 1.
Parameters:
Name |
Type |
Description |
lineHeight |
Number
|
|
- Source:
Returns:
-
Type
-
Number
Example
// get line height
var lineHeight = text.lineHeight();
// set the line height
text.lineHeight(2);
-
lineJoin(lineJoin) → {String}
-
get/set line join. Can be miter, round, or bevel. The
default is miter
Parameters:
Name |
Type |
Description |
lineJoin |
String
|
|
- Inherited From:
- Source:
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 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}
-
Parameters:
Name |
Type |
Description |
noise |
Number
|
|
- Inherited From:
- Source:
Returns:
-
Type
-
Number
-
-
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, wheel, click, dblclick, touchstart, touchmove,
touchend, tap, dbltap, dragstart, dragmove, and dragend events. The Konva Stage supports
contentMouseover, contentMousemove, contentMouseout, contentMousedown, contentMouseup, contentWheel
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);
-
padding(padding) → {Number}
-
set padding
Parameters:
Name |
Type |
Description |
padding |
Number
|
|
- Source:
Returns:
-
Type
-
Number
Example
// get padding
var padding = text.padding();
// set padding to 10 pixels
text.padding(10);
-
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
|
|
- Inherited From:
- Source:
Returns:
-
Type
-
Boolean
Example
// get perfectDrawEnabled
var perfectDrawEnabled = shape.perfectDrawEnabled();
// set perfectDrawEnabled
shape.perfectDrawEnabled();
-
pixelSize(pixelSize) → {Integer}
-
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}
-
Parameters:
Name |
Type |
Description |
red |
Integer
|
value between 0 and 255 |
- Inherited From:
- Source:
Returns:
-
Type
-
Integer
-
red(red) → {Integer}
-
Parameters:
Name |
Type |
Description |
red |
Integer
|
value between 0 and 255 |
- Inherited From:
- Source:
Returns:
-
Type
-
Integer
-
-
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 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}
-
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}
-
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 |
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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 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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
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
|
|
- Inherited From:
- Source:
Returns:
-
Type
-
Number
Example
// get stroke width
var strokeWidth = shape.strokeWidth();
// set stroke width
shape.strokeWidth();
-
threshold(threshold) → {Number}
-
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
-
-
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}
-
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}
-
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);
-
wrap(wrap) → {String}
-
get/set wrap. Can be word, char, or none. Default is word.
Parameters:
Name |
Type |
Description |
wrap |
String
|
|
- Source:
Returns:
-
Type
-
String
Example
// get wrap
var wrap = text.wrap();
// set wrap
text.wrap('word');
-
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);