Class: Container

Kinetic. Container

<abstract> new Container(config)

Container constructor.  Containers are used to contain nodes or other containers
Parameters:
Name Type Description
config Object
Properties
Name Type Argument Description
x Number <optional>
y Number <optional>
width Number <optional>
height Number <optional>
visible Boolean <optional>
listening Boolean <optional>
whether or not the node is listening for events
id String <optional>
unique id
name String <optional>
non-unique name
opacity Number <optional>
determines node opacity. Can be any number between 0 and 1
scale Object <optional>
set scale
scaleX Number <optional>
set scale x
scaleY Number <optional>
set scale y
rotation Number <optional>
rotation in degrees
offset Object <optional>
offset from center point and rotation point
offsetX Number <optional>
set offset x
offsetY Number <optional>
set offset y
draggable Boolean <optional>
makes the node draggable. When stages are draggable, you can drag and drop the entire stage by dragging any portion of the stage
dragDistance Number <optional>
dragBoundFunc function <optional>
clipFunc function <optional>
clipping function

Extends

Members

dragDistance

get/set drag distance
Inherited From:
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
Kinetic.dragDistance = 3;

offsetX

get/set offset x
Inherited From:
Example
// get offset x
var offsetX = node.offsetX();

// set offset x
node.offsetX(3);

Methods

add(child) → {Container}

Add node or nodes to container.
Parameters:
Name Type Argument Description
child Kinetic.Node <repeatable>
Returns:
Type
Container
Example
layer.add(shape1, shape2, shape3);

blue(blue) → {Integer}

get/set filter blue value
Parameters:
Name Type Description
blue Integer value between 0 and 255
Inherited From:
Returns:
Type
Integer

blurRadius(radius) → {Integer}

get/set blur radius
Parameters:
Name Type Description
radius Integer
Inherited From:
Returns:
Type
Integer

cache(config) → {Kinetic.Node}

cache node to improve drawing performance, apply filters, or create more accurate hit regions
Parameters:
Name Type Description
config Object
Properties
Name Type Argument Description
x Number <optional>
y Number <optional>
width Number <optional>
height Number <optional>
drawBorder Boolean <optional>
when set to true, a red border will be drawn around the cached region for debugging purposes
Inherited From:
Returns:
Type
Kinetic.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,
  drawBorder: true
});

clearCache() → {Kinetic.Node}

clear cached canvas
Inherited From:
Returns:
Type
Kinetic.Node
Example
node.clearCache();

clip(clip) → {Object}

get/set clip
Parameters:
Name Type Description
clip Object
Properties
Name Type Description
x Number
y Number
width Number
height Number
Returns:
Type
Object
Example
// get clip
var clip = container.clip();

// set clip
container.setClip({
  x: 20,
  y: 20,
  width: 20,
  height: 20
});

clipHeight(height) → {Number}

get/set clip height
Parameters:
Name Type Description
height Number
Returns:
Type
Number
Example
// get clip height
var clipHeight = container.clipHeight();

// set clip height
container.clipHeight(100);

clipWidth(width) → {Number}

get/set clip width
Parameters:
Name Type Description
width Number
Returns:
Type
Number
Example
// get clip width
var clipWidth = container.clipWidth();

// set clip width
container.clipWidth(100);

clipX(x) → {Number}

get/set clip x
Parameters:
Name Type Description
x Number
Returns:
Type
Number
Example
// get clip x
var clipX = container.clipX();

// set clip x
container.clipX(10);

clipY(y) → {Number}

get/set clip y
Parameters:
Name Type Description
y Number
Returns:
Type
Number
Example
// get clip y
var clipY = container.clipY();

// set clip y
container.clipY(10);

clone(attrs) → {Kinetic.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
attrs Object override attrs
Inherited From:
Returns:
Type
Kinetic.Node
Example
// simple clone
var clone = node.clone();

// clone a node and override the x position
var clone = rect.clone({
  x: 5
});

destroy()

remove and destroy self
Inherited From:
Example
node.destroy();

destroyChildren()

destroy all children

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:
Returns:
Type
function
Example
// get drag bound function
var dragBoundFunc = node.dragBoundFunc();

// create vertical drag and drop
node.dragBoundFunc(function(){
  return {
    x: this.getAbsolutePosition().x,
    y: pos.y
  };
});

draggable(draggable) → {Boolean}

get/set draggable flag
Parameters:
Name Type Description
draggable Boolean
Inherited From:
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() → {Kinetic.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:
Returns:
Type
Kinetic.Node

embossBlend(embossBlend) → {Boolean}

get/set emboss blend
Parameters:
Name Type Description
embossBlend Boolean
Inherited From:
Returns:
Type
Boolean

embossDirection(embossDirection) → {String}

get/set emboss direction
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:
Returns:
Type
String

embossStrength(level) → {Number}

get/set emboss strength
Parameters:
Name Type Description
level Number between 0 and 1. Default is 0.5
Inherited From:
Returns:
Type
Number

embossWhiteLevel(embossWhiteLevel) → {Number}

get/set emboss white level
Parameters:
Name Type Description
embossWhiteLevel Number between 0 and 1. Default is 0.5
Inherited From:
Returns:
Type
Number

enhance(amount) → {Float}

get/set enhance
Parameters:
Name Type Description
amount Float
Inherited From:
Returns:
Type
Float

filters(filters) → {Array}

get/set filters. Filters are applied to cached canvases
Parameters:
Name Type Description
filters Array array of filters
Inherited From:
Returns:
Type
Array
Example
// get filters
var filters = node.filters();

// set a single filter
node.cache();
node.filters([Kinetic.Filters.Blur]);

// set multiple filters
node.cache();
node.filters([
  Kinetic.Filters.Blur,
  Kinetic.Filters.Sepia,
  Kinetic.Filters.Invert
]);

find(selector) → {Collection}

return a Kinetic.Collection of nodes that match the selector. Use '#' for id selections and '.' for name selections. You can also select by type or class name. Pass multiple selectors separated by a space.
Parameters:
Name Type Description
selector String
Returns:
Type
Collection
Example
// select node with id foo
var node = stage.find('#foo');

// select nodes with name bar inside layer
var nodes = layer.find('.bar');

// select all groups inside layer
var nodes = layer.find('Group');

// select all rectangles inside layer
var nodes = layer.find('Rect');

// select node with an id of foo or a name of bar inside layer
var nodes = layer.find('#foo, .bar');

fire(eventType, evt, bubble) → {Kinetic.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 EventObject <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:
Returns:
Type
Kinetic.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:
Returns:
Type
Number

getAbsolutePosition() → {Object}

get absolute position relative to the top left corner of the stage container div
Inherited From:
Returns:
Type
Object

getAbsoluteTransform() → {Kinetic.Transform}

get absolute transform of the node which takes into account its ancestor transforms
Inherited From:
Returns:
Type
Kinetic.Transform

getAbsoluteZIndex() → {Integer}

get absolute z-index which takes into account sibling and ancestor indices
Inherited From:
Returns:
Type
Integer

getAllIntersections(pos) → {Array}

get all shapes that intersect a point. Note: because this method must clear a temporary canvas and redraw every shape inside the container, it should only be used for special sitations because it performs very poorly. Please use the Kinetic.Stage#getIntersection method if at all possible because it performs much better
Parameters:
Name Type Description
pos Object
Properties
Name Type Description
x Number
y Number
Returns:
array of shapes
Type
Array

getAncestors() → {Kinetic.Collection}

get ancestors
Inherited From:
Returns:
Type
Kinetic.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:
Returns:
Type
Integer | String | Object | Array
Example
var x = node.getAttr('x');

getAttrs() → {Object}

get attrs object literal
Inherited From:
Returns:
Type
Object

getChildren(filterFunc) → {Kinetic.Collection}

returns a Kinetic.Collection of direct descendant nodes
Parameters:
Name Type Argument Description
filterFunc function <optional>
filter function
Returns:
Type
Kinetic.Collection
Example
// get all children
var children = layer.getChildren();

// get only circles
var circles = layer.getChildren(function(node){
   return node.getClassName() === 'Circle';
});

getClassName() → {String}

get class name, which may return Stage, Layer, Group, or shape class names like Rect, Circle, Text, etc.
Inherited From:
Returns:
Type
String

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:
Returns:
Type
Integer

getHeight() → {Integer}

get height
Inherited From:
Returns:
Type
Integer

getLayer() → {Kinetic.Layer}

get layer ancestor
Inherited From:
Returns:
Type
Kinetic.Layer

getParent() → {Kinetic.Node}

get parent container
Inherited From:
Returns:
Type
Kinetic.Node

getStage() → {Kinetic.Stage}

get stage ancestor
Inherited From:
Returns:
Type
Kinetic.Stage

getTransform() → {Kinetic.Transform}

get transform of the node
Inherited From:
Returns:
Type
Kinetic.Transform

getType() → {String}

get the node type, which may return Stage, Layer, Group, or Node
Inherited From:
Returns:
Type
String

getWidth() → {Integer}

get width
Inherited From:
Returns:
Type
Integer

getZIndex() → {Integer}

get zIndex relative to the node's siblings who share the same parent
Inherited From:
Returns:
Type
Integer

green(green) → {Integer}

get/set filter green value
Parameters:
Name Type Description
green Integer value between 0 and 255
Inherited From:
Returns:
Type
Integer

hasChildren() → {Boolean}

determine if node has children
Returns:
Type
Boolean

height(height) → {Number}

get/set height
Parameters:
Name Type Description
height Number
Inherited From:
Returns:
Type
Number
Example
// get height
var height = node.height();

// set height
node.height(100);

hide() → {Kinetic.Node}

hide node. Hidden nodes are no longer detectable
Inherited From:
Returns:
Type
Kinetic.Node

hue(hue) → {Number}

get/set hsv hue in degrees
Parameters:
Name Type Description
hue Number value between 0 and 359
Inherited From:
Returns:
Type
Number

hue(hue) → {Number}

get/set hsv hue in degrees
Parameters:
Name Type Description
hue Number value between 0 and 359
Inherited From:
Returns:
Type
Number

id(id) → {String}

get/set id
Parameters:
Name Type Description
id String
Inherited From:
Returns:
Type
String
Example
// get id
var name = node.id();

// set id
node.id('foo');

isAncestorOf(node)

determine if node is an ancestor of descendant
Parameters:
Name Type Description
node Kinetic.Node

isDragging()

determine if node is currently in drag and drop mode
Inherited From:

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:
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:
Returns:
Type
Boolean

kaleidoscopeAngle(degrees) → {Integer}

get/set kaleidoscope angle
Parameters:
Name Type Description
degrees Integer
Inherited From:
Returns:
Type
Integer

kaleidoscopePower(power) → {Integer}

get/set kaleidoscope power
Parameters:
Name Type Description
power Integer of kaleidoscope
Inherited From:
Returns:
Type
Integer

levels(level) → {Number}

get/set levels. Must be a number between 0 and 1
Parameters:
Name Type Description
level Number between 0 and 1
Inherited From:
Returns:
Type
Number

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:
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) → {Kinetic.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:
Returns:
Type
Kinetic.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:
Returns:
Type
Boolean

moveTo(newContainer) → {Kinetic.Node}

move node to another container
Parameters:
Name Type Description
newContainer Container
Inherited From:
Returns:
Type
Kinetic.Node
Example
// move node from current layer into layer2
node.moveTo(layer2);

moveToBottom() → {Boolean}

move node to the bottom of its siblings
Inherited From:
Returns:
Type
Boolean

moveToTop() → {Boolean}

move node to the top of its siblings
Inherited From:
Returns:
Type
Boolean

moveUp() → {Boolean}

move node up
Inherited From:
Returns:
Type
Boolean

name(name) → {String}

get/set name
Parameters:
Name Type Description
name String
Inherited From:
Returns:
Type
String
Example
// get name
var name = node.name();

// set name
node.name('foo');

noise(noise) → {Number}

get/set noise amount. Must be a value between 0 and 1
Parameters:
Name Type Description
noise Number
Inherited From:
Returns:
Type
Number

off(evtStr) → {Kinetic.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:
Returns:
Type
Kinetic.Node
Example
// remove listener
node.off('click');

// remove multiple listeners
node.off('click touchstart');

// remove listener by name
node.off('click.foo');

offsetY(y) → {Number}

get/set offset y
Parameters:
Name Type Description
y Number
Inherited From:
Returns:
Type
Number
Example
// get offset y
var offsetY = node.offsetY();

// set offset y
node.offsetY(3);

on(evtStr, handler) → {Kinetic.Node}

bind events to the node. KineticJS supports mouseover, mousemove, mouseout, mouseenter, mouseleave, mousedown, mouseup, click, dblclick, touchstart, touchmove, touchend, tap, dbltap, dragstart, dragmove, and dragend events. The Kinetic 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:
Returns:
Type
Kinetic.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;
});

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:
Returns:
Type
Number
Example
// get opacity
var opacity = node.opacity();

// set opacity
node.opacity(0.5);

pixelSize(pixelSize) → {Integer}

get/set pixel size
Parameters:
Name Type Description
pixelSize Integer
Inherited From:
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 Nubmer
Inherited From:
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
Parameters:
Name Type Description
red Integer value between 0 and 255
Inherited From:
Returns:
Type
Integer

remove() → {Kinetic.Node}

remove self from parent, but don't destroy
Inherited From:
Returns:
Type
Kinetic.Node
Example
node.remove();

removeChildren()

remove all children

rotate(theta) → {Kinetic.Node}

rotate node by an amount in degrees relative to its current rotation
Parameters:
Name Type Description
theta Number
Inherited From:
Returns:
Type
Kinetic.Node

rotation(rotation) → {Number}

get/set rotation in degrees
Parameters:
Name Type Description
rotation Number
Inherited From:
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
Parameters:
Name Type Description
saturation Number 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc..
Inherited From:
Returns:
Type
Number

saturation(saturation) → {Number}

get/set hsv saturation
Parameters:
Name Type Description
saturation Number 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc..
Inherited From:
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:
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:
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:
Returns:
Type
Number
Example
// get scale y
var scaleY = node.scaleY();

// set scale y
node.scaleY(2);

setAbsolutePosition(pos) → {Kinetic.Node}

set absolute position
Parameters:
Name Type Description
pos Object
Properties
Name Type Description
x Number
y Number
Inherited From:
Returns:
Type
Kinetic.Node

setAttr(attr, val) → {Kinetic.Node}

set attr
Parameters:
Name Type Description
attr String
val *
Inherited From:
Returns:
Type
Kinetic.Node
Example
node.setAttr('x', 5);

setAttrs(config) → {Kinetic.Node}

set multiple attrs at once using an object literal
Parameters:
Name Type Description
config Object object containing key value pairs
Inherited From:
Returns:
Type
Kinetic.Node
Example
node.setAttrs({
  x: 5,
  fill: 'red'
});

setId(id) → {Kinetic.Node}

set id
Parameters:
Name Type Description
id String
Inherited From:
Returns:
Type
Kinetic.Node

setZIndex(zIndex) → {Kinetic.Node}

set zIndex relative to siblings
Parameters:
Name Type Description
zIndex Integer
Inherited From:
Returns:
Type
Kinetic.Node

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:
Returns:
Type
Boolean

show() → {Kinetic.Node}

show node
Inherited From:
Returns:
Type
Kinetic.Node

size(size) → {Object}

get/set node size
Parameters:
Name Type Description
size Object
Properties
Name Type Description
width Number
height Number
Inherited From:
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:
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:
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:
Returns:
Type
Number
Example
// get skew y
var skewY = node.skewY();

// set skew y
node.skewY(3);

startDrag()

initiate drag and drop
Inherited From:

stopDrag()

stop drag and drop
Inherited From:

threshold(threshold) → {Number}

get/set threshold. Must be a value between 0 and 1
Parameters:
Name Type Description
threshold Number
Inherited From:
Returns:
Type
Number

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:
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:
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:
Returns:
}
Type
String

toObject() → {Object}

convert Node into an object for serialization. Returns an object.
Inherited From:
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:
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 hsv value
Parameters:
Name Type Description
value Number 0 is no change, -1.0 halves the value, 1.0 doubles, etc..
Inherited From:
Returns:
Type
Number

value(value) → {Number}

get/set hsl luminance
Parameters:
Name Type Description
value Number 0 is no change, -1.0 halves the value, 1.0 doubles, etc..
Inherited From:
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:
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:
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:
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:
Returns:
Type
Integer
Example
// get y
var y = node.y();

// set y
node.y(5);