Kineticjs Cloning example

Posted on September 3, 2014 by sathyalog

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
<script src=”http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js”></script>
<script>
window.onload = function() {
var stage = new Kinetic.Stage({
container: ‘container’,
width: 578,
height: 200
});

var layer = new Kinetic.Layer();

var rect = new Kinetic.Rect({
x: 239,
y: 75,
width: 100,
height: 50,
fill: ‘green’,
stroke: ‘black’,
strokeWidth: 4,
draggable:true
});

var clone = rect.clone();
clone.setX(10);clone.setY(10);
// add the clone to the layer
layer.add(rect).add(clone);

// add the layer to the stage
stage.add(layer);
};

</script>
</head>
<body>
<div id=”container”></div>
</body>
</html>

Check in jsfiddle

Angularjs with kineticjs??

Posted on August 8, 2014 by sathyalog

Folks,

Can this be possible?? First we will know what are these different frameworks? what similarities and dissimilarities do they hold?

AngularJS is great at binding DOM elments.

But KineticJS objects are not DOM elements—they are just pixels on the canvas.

So AngularJS can’t control Kinetic objects directly.

To get Kinetic objects to move in response to text-input changes, you could use an AngularJS controller and make calls to the Kinetic object’s setX/setY.

To get text-input values to change as Kinetic objects are dragged, you might call the AngularJS controller from within a Kinetic dragmove event handler.

A complication is that by default, both Angular and Kinetic will want to control mouse events for their own purposes.

I’m not saying it can’t be done, but…

Integrating KineticJS + AngularJS is more complicated

How to add a text on image in kineticjs

Posted on June 30, 2014 by sathyalog

Folks,

I have been searching for a longtime to write text on image in kineticjs..but its none of use..in some articles they mentioned we can use z-index like below..zI should be given with integer..

bet.setZIndex(zI);

But i sort it out without using that by placing kinetic text in kinetic image like shown below..

                                var imageObj = new Image();
 
                                imageObj.onload = function () {
                                    bet = new Kinetic.Image({
                                        x: xaxis,
                                        y: yaxis,
                                        image: imageObj
                                    });
                                    group.add(bet);
                                    layer.add(group);
                                    yaxis = yaxis - 7;
                                    var text = new Kinetic.Text({
                                        x: bet.getX(),//get x coordinate of image
                                        y: bet.getY() + 30, // get y coordinate of image
                                        text: '',
                                        fill: 'red',
                                        fontFamily: 'Cambria',
                                        fontSize: 19,
                                        fontStyle: 'bold',
                                        width: 118,
                                        height: 100,
                                        align: "center",
                                        verticalAlign: "middle"
                                    });
                                    text.setText(arg1); //set text on your image
                                    group.add(text);
                                    layer.draw(); 
 
 
                                };
                                imageObj.src = 'bet_chips/' + i + '.png';//image source

Kinetic Js Reference links

Posted on June 25, 2014 by sathyalog

Useful links are listed here..

1. How to set boundary limits of dragging in kineticjs??

http://jsfiddle.net/m1erickson/n5xMs/

http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-bounds-tutorial-with-kineticjs/

Generic members and methods in kinetic js

Posted on June 24, 2014 by sathyalog

Guys,

The below list is a generic list of all members and methods in various classes..To know how to use it, clickhere

Members:

dragDistance

get/set drag distance

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

Example

// get offset x
var offsetX = node.offsetX();

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

Methods

angle(angle)

get/set angle in degrees

Parameters:

angle Number

Returns:

Type: Number

Example

// get angle
var angle = arc.angle();

// set angle
arc.angle(20);

blue(blue)

get/set filter blue value

Parameters:

blue Integer value between 0 and 255

Returns:

Type: Integer

blurRadius(radius)

get/set blur radius

Parameters:

radius Integer

Returns:

Type: Integer

cache(config)

cache node to improve drawing performance, apply filters, or create more accurate hit regions

Parameters:

config

Object

Properties

`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

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()

clear cached canvas

Returns:

Type: Kinetic.Node

Example

node.clearCache();

clockwise(clockwise)

get/set clockwise flag

Parameters:

clockwise Boolean

Returns:

Type: Boolean

Example

// get clockwise flag
var clockwise = arc.clockwise();

// draw arc counter-clockwise
arc.clockwise(false);

// draw arc clockwise
arc.clockwise(true);

clone(attrs)

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:

attrs Object override attrs

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
});

dash(dash)

get/set dash array for stroke.

Parameters:

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)

get/set dash enabled flag

Parameters:

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

Example

node.destroy();

dragBoundFunc(dragBoundFunc)

get/set drag bound function. This is used to override the default drag and drop position

Parameters:

dragBoundFunc function

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)

get/set draggable flag

Parameters:

draggable Boolean

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()

draw both scene and hit graphs. If the node being drawn is the stage, all of the layers will be cleared and redrawn

Returns:

Type: Kinetic.Node

drawHitFromCache(alphaThreshold)

draw hit graph using the cached scene canvas

Parameters:

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: Kinetic.Shape

Example

shape.cache();
shape.drawHitFromCache();

embossBlend(embossBlend)

get/set emboss blend

Parameters:

embossBlend Boolean

Returns:

Type: Boolean

embossDirection(embossDirection)

get/set emboss direction

Parameters:

embossDirection String can be top-left, top, top-right, right, bottom-right, bottom, bottom-left or left The default is top-left

Returns:

Type: String

embossStrength(level)

get/set emboss strength

Parameters:

level Number between 0 and 1. Default is 0.5

Returns:

Type: Number

embossWhiteLevel(embossWhiteLevel)

get/set emboss white level

Parameters:

embossWhiteLevel Number between 0 and 1. Default is 0.5

Returns:

Type: Number

enhance(amount)

get/set enhance

Parameters:

amount Float

Returns:

Type: Float

fill(color)

get/set fill color

Parameters:

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');

fillAlpha(alpha)

get/set fill alpha component. Alpha is a real number between 0 and 1. The default is 1.

Parameters:

alpha Number

Returns:

Type: Number

Example

// get fill alpha component
var fillAlpha = shape.fillAlpha();

// set fill alpha component
shape.fillAlpha(0.5);

fillBlue(blue)

get/set fill blue component

Parameters:

blue Integer

Returns:

Type: Integer

Example

// get fill blue component
var fillBlue = shape.fillBlue();

// set fill blue component
shape.fillBlue(0);

fillEnabled(enabled)

get/set fill enabled flag

Parameters:

enabled Boolean

Returns:

Type: Boolean

Example

// get fill enabled flag
var fillEnabled = shape.fillEnabled();

// disable fill
shape.fillEnabled(false);

// enable fill
shape.fillEnabled(true);

fillGreen(green)

get/set fill green component

Parameters:

green Integer

Returns:

Type: Integer

Example

// get fill green component
var fillGreen = shape.fillGreen();

// set fill green component
shape.fillGreen(255);

fillLinearGradientColorStops(colorStops)

get/set fill linear gradient color stops

Parameters:

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)

get/set fill linear gradient end point

Parameters:

endPoint

Object

Properties

`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)

get/set fill linear gradient end point x

Parameters:

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)

get/set fill linear gradient end point y

Parameters:

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)

get/set fill linear gradient start point

Parameters:

startPoint

Object

Properties

`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)

get/set fill linear gradient start point x

Parameters:

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)

get/set fill linear gradient start point y

Parameters:

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)

get/set fill pattern image

Parameters:

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)

get/set fill pattern offset

Parameters:

offset

Object

Properties

`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)

get/set fill pattern offset x

Parameters:

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)

get/set fill pattern offset y

Parameters:

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)

get/set fill pattern repeat. Can be ‘repeat’, ‘repeat-x’, ‘repeat-y’, or ‘no-repeat’. The default is ‘repeat’

Parameters:

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)

get/set fill pattern rotation in degrees

Parameters:

rotation Number

Returns:

Type: Kinetic.Shape

Example

// get fill pattern rotation
var patternRotation = shape.fillPatternRotation();

// set fill pattern rotation
shape.fillPatternRotation(20);

fillPatternScale(scale)

get/set fill pattern scale

Parameters:

scale

Object

Properties

`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)

get/set fill pattern scale x

Parameters:

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)

get/set fill pattern scale y

Parameters:

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)

get/set fill pattern x

Parameters:

x Number

Returns:

Type: Number

Example

// get fill pattern x
var fillPatternX = shape.fillPatternX();

// set fill pattern x
shape.fillPatternX(20);

fillPatternY(y)

get/set fill pattern y

Parameters:

y Number

Returns:

Type: Number

Example

// get fill pattern y
var fillPatternY = shape.fillPatternY();

// set fill pattern y
shape.fillPatternY(20);

fillPriority(priority)

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:

priority String

Returns:

Type: String

Example

// get fill priority
var fillPriority = shape.fillPriority();

// set fill priority
shape.fillPriority('linear-gradient');

fillRadialGradientColorStops(colorStops)

get/set fill radial gradient color stops

Parameters:

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)

get/set fill radial gradient end point

Parameters:

endPoint

Object

Properties

`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)

get/set fill radial gradient end point x

Parameters:

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)

get/set fill radial gradient end point y

Parameters:

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)

get/set fill radial gradient end radius

Parameters:

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)

get/set fill radial gradient start point

Parameters:

startPoint

Object

Properties

`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)

get/set fill radial gradient start point x

Parameters:

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)

get/set fill radial gradient start point y

Parameters:

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)

get/set fill radial gradient start radius

Parameters:

radius Number

Returns:

Type: Number

Example

// get radial gradient start radius
var startRadius = shape.fillRadialGradientStartRadius();

// set radial gradient start radius
shape.fillRadialGradientStartRadius(0);

fillRed(red)

get/set fill red component

Parameters:

red Integer

Returns:

Type: Integer

Example

// get fill red component
var fillRed = shape.fillRed();

// set fill red component
shape.fillRed(0);

filters(filters)

get/set filters. Filters are applied to cached canvases

Parameters:

filters Array array of filters

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
]);

fire(eventType, evt, bubble)

fire event

Parameters:

`eventType`	String		event type. can be a regular event, like click, mouseover, or mouseout, or it can be a custom event, like myCustomEvent
`evt`	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.

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()

get absolute opacity

Returns:

Type: Number

getAbsolutePosition()

get absolute position relative to the top left corner of the stage container div

Returns:

Type: Object

getAbsoluteTransform()

get absolute transform of the node which takes into account its ancestor transforms

Returns:

Type: Kinetic.Transform

getAbsoluteZIndex()

get absolute z-index which takes into account sibling and ancestor indices

Returns:

Type: Integer

getAncestors()

get ancestors

Returns:

Type: Kinetic.Collection

Example

shape.getAncestors().each(function(node) {
  console.log(node.getId());
})

getAttr(attr)

get attr

Parameters:

attr String

Returns:

Type: Integer | String | Object | Array

Example

var x = node.getAttr('x');

getAttrs()

get attrs object literal

Returns:

Type: Object

getCanvas()

get canvas renderer tied to the layer. Note that this returns a canvas renderer, not a canvas element

Returns:

Type: Kinetic.Canvas

getClassName()

get class name, which may return Stage, Layer, Group, or shape class names like Rect, Circle, Text, etc.

Returns:

Type: String

getContext()

get canvas context tied to the layer

Returns:

Type: Kinetic.Context

getDepth()

get node depth in node tree. Returns an integer. e.g. Stage depth will always be 0. Layers will always be 1. Groups and Shapes will always be >= 2

Returns:

Type: Integer

getHeight()

get height

Returns:

Type: Integer

getLayer()

get layer ancestor

Returns:

Type: Kinetic.Layer

getParent()

get parent container

Returns:

Type: Kinetic.Node

getStage()

get stage ancestor

Returns:

Type: Kinetic.Stage

getTransform()

get transform of the node

Returns:

Type: Kinetic.Transform

getType()

get the node type, which may return Stage, Layer, Group, or Node

Returns:

Type: String

getWidth()

get width

Returns:

Type: Integer

getZIndex()

get zIndex relative to the node’s siblings who share the same parent

Returns:

Type: Integer

green(green)

get/set filter green value

Parameters:

green Integer value between 0 and 255

Returns:

Type: Integer

hasFill()

returns whether or not the shape will be filled

Returns:

Type: Boolean

hasShadow()

returns whether or not a shadow will be rendered

Returns:

Type: Boolean

hasStroke()

returns whether or not the shape will be stroked

Returns:

Type: Boolean

height(height)

get/set height

Parameters:

height Number

Returns:

Type: Number

Example

// get height
var height = node.height();

// set height
node.height(100);

hide()

hide node. Hidden nodes are no longer detectable

Returns:

Type: Kinetic.Node

hitFunc(drawFunc)

get/set hit draw function

Parameters:

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)

get/set hsv hue in degrees

Parameters:

hue Number value between 0 and 359

Returns:

Type: Number

hue(hue)

get/set hsv hue in degrees

Parameters:

hue Number value between 0 and 359

Returns:

Type: Number

id(id)

get/set id

Parameters:

id String

Returns:

Type: String

Example

// get id
var name = node.id();

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

innerRadius(innerRadius)

get/set innerRadius

Parameters:

innerRadius Number

Returns:

Type: Number

Example

// get inner radius
var innerRadius = arc.innerRadius();

// set inner radius
arc.innerRadius(20);

intersects(point)

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 Kinetic.Stage#getIntersection method if at all possible because it performs much better

Parameters:

point

Object

Properties

`x`	Number
`y`	Number

Returns:

Type: Boolean

isDragging()

determine if node is currently in drag and drop mode

isListening()

determine if node is listening for events by taking into account ancestors. Parent | Self | isListening listening | listening | ———-+———–+———— T | T | T T | F | F F | T | T F | F | F ———-+———–+———— T | I | T F | I | F I | I | T

Returns:

Type: Boolean

isVisible()

determine if node is visible by taking into account ancestors. Parent | Self | isVisible visible | visible | ———-+———–+———— T | T | T T | F | F F | T | T F | F | F ———-+———–+———— T | I | T F | I | F I | I | T

Returns:

Type: Boolean

kaleidoscopeAngle(degrees)

get/set kaleidoscope angle

Parameters:

degrees Integer

Returns:

Type: Integer

kaleidoscopePower(power)

get/set kaleidoscope power

Parameters:

power Integer of kaleidoscope

Returns:

Type: Integer

levels(level)

get/set levels. Must be a number between 0 and 1

Parameters:

level Number between 0 and 1

Returns:

Type: Number

lineCap(lineCap)

get/set line cap. Can be butt, round, or square

Parameters:

lineCap String

Returns:

Type: String

Example

// get line cap
var lineCap = shape.lineCap();

// set line cap
shape.lineCap('round');

lineJoin(lineJoin)

get/set line join. Can be miter, round, or bevel. The default is miter

Parameters:

lineJoin String

Returns:

Type: String

Example

// get line join
var lineJoin = shape.lineJoin();

// set line join
shape.lineJoin('round');

listening(listening)

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:

listening Boolean | String Can be “inherit”, true, or false. The default is “inherit”.

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)

move node by an amount relative to its current position

Parameters:

change

Object

Properties

`x`	Number
`y`	Number

Returns:

Type: Kinetic.Node

Example

// move node in x direction by 1px and y direction by 2px
node.move({
  x: 1,
  y: 2)
});

moveDown()

move node down

Returns:

Type: Boolean

moveTo(newContainer)

move node to another container

Parameters:

newContainer Container

Returns:

Type: Kinetic.Node

Example

// move node from current layer into layer2
node.moveTo(layer2);

moveToBottom()

move node to the bottom of its siblings

Returns:

Type: Boolean

moveToTop()

move node to the top of its siblings

Returns:

Type: Boolean

moveUp()

move node up

Returns:

Type: Boolean

name(name)

get/set name

Parameters:

name String

Returns:

Type: String

Example

// get name
var name = node.name();

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

noise(noise)

get/set noise amount. Must be a value between 0 and 1

Parameters:

noise Number

Returns:

Type: Number

off(evtStr)

remove event bindings from the node. Pass in a string of event types delimmited by a space to remove multiple event bindings at once such as ‘mousedown mouseup mousemove’. include a namespace to remove an event binding by name such as ‘click.foobar’. If you only give a name like ‘.foobar’, all events in that namespace will be removed.

Parameters:

evtStr String e.g. ‘click’, ‘mousedown touchstart’, ‘.foobar’

Returns:

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)

get/set offset y

Parameters:

y Number

Returns:

Type: Number

Example

// get offset y
var offsetY = node.offsetY();

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

on(evtStr, handler)

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:

`evtStr`	String	e.g. ‘click’, ‘mousedown touchstart’, ‘mousedown.foo touchstart.foo’
`handler`	function	The handler function is passed an event object

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)

get/set opacity. Opacity values range from 0 to 1. A node with an opacity of 0 is fully transparent, and a node with an opacity of 1 is fully opaque

Parameters:

opacity Object

Returns:

Type: Number

Example

// get opacity
var opacity = node.opacity();

// set opacity
node.opacity(0.5);

outerRadius(outerRadius)

get/set outerRadius

Parameters:

outerRadius Number

Returns:

Type: Number

Example

// get outer radius
var outerRadius = arc.outerRadius();

// set outer radius
arc.outerRadius(20);

pixelSize(pixelSize)

get/set pixel size

Parameters:

pixelSize Integer

Returns:

Type: Integer

position(pos)

get/set node position relative to parent

Parameters:

pos

Object

Properties

`x`	Number
`y`	Nubmer

Returns:

Type: Object

Example

// get position
var position = node.position();

// set position
node.position({
  x: 5
  y: 10
});

red(red)

get/set filter red value

Parameters:

red Integer value between 0 and 255

Returns:

Type: Integer

remove()

remove self from parent, but don’t destroy

Returns:

Type: Kinetic.Node

Example

node.remove();

rotate(theta)

rotate node by an amount in degrees relative to its current rotation

Parameters:

theta Number

Returns:

Type: Kinetic.Node

rotation(rotation)

get/set rotation in degrees

Parameters:

rotation Number

Returns:

Type: Number

Example

// get rotation in degrees
var rotation = node.rotation();

// set rotation in degrees
node.rotation(45);

saturation(saturation)

get/set hsv saturation

Parameters:

saturation Number 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc..

Returns:

Type: Number

saturation(saturation)

get/set hsv saturation

Parameters:

saturation Number 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc..

Returns:

Type: Number

scale(scale)

get/set scale

Parameters:

scale

Object

Properties

`x`	Number
`y`	Number

Returns:

Type: Object

Example

// get scale
var scale = node.scale();

// set scale 
shape.scale({
  x: 2
  y: 3
});

scaleX(x)

get/set scale x

Parameters:

x Number

Returns:

Type: Number

Example

// get scale x
var scaleX = node.scaleX();

// set scale x
node.scaleX(2);

scaleY(y)

get/set scale y

Parameters:

y Number

Returns:

Type: Number

Example

// get scale y
var scaleY = node.scaleY();

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

sceneFunc(drawFunc)

get/set scene draw function

Parameters:

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)

set absolute position

Parameters:

pos

Object

Properties

`x`	Number
`y`	Number

Returns:

Type: Kinetic.Node

setAttr(attr, val)

set attr

Parameters:

`attr`	String
`val`	*

Returns:

Type: Kinetic.Node

Example

node.setAttr('x', 5);

setAttrs(config)

set multiple attrs at once using an object literal

Parameters:

config Object object containing key value pairs

Returns:

Type: Kinetic.Node

Example

node.setAttrs({
  x: 5,
  fill: 'red'
});

setId(id)

set id

Parameters:

id String

Returns:

Type: Kinetic.Node

setZIndex(zIndex)

set zIndex relative to siblings

Parameters:

zIndex Integer

Returns:

Type: Kinetic.Node

shadowAlpha(alpha)

get/set shadow alpha component. Alpha is a real number between 0 and 1. The default is 1.

Parameters:

alpha Number

Returns:

Type: Number

Example

// get shadow alpha component
var shadowAlpha = shape.shadowAlpha();

// set shadow alpha component
shape.shadowAlpha(0.5);

shadowBlue(blue)

get/set shadow blue component

Parameters:

blue Integer

Returns:

Type: Integer

Example

// get shadow blue component
var shadowBlue = shape.shadowBlue();

// set shadow blue component
shape.shadowBlue(0);

shadowBlur(blur)

get/set shadow blur

Parameters:

blur Number

Returns:

Type: Number

Example

// get shadow blur
var shadowBlur = shape.shadowBlur();

// set shadow blur
shape.shadowBlur(10);

shadowColor(color)

get/set shadow color

Parameters:

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)

get/set shadow enabled flag

Parameters:

enabled Boolean

Returns:

Type: Boolean

Example

// get shadow enabled flag
var shadowEnabled = shape.shadowEnabled();

// disable shadow
shape.shadowEnabled(false);

// enable shadow
shape.shadowEnabled(true);

shadowGreen(green)

get/set shadow green component

Parameters:

green Integer

Returns:

Type: Integer

Example

// get shadow green component
var shadowGreen = shape.shadowGreen();

// set shadow green component
shape.shadowGreen(255);

shadowOffset(offset)

get/set shadow offset

Parameters:

offset

Object

Properties

`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)

get/set shadow offset x

Parameters:

x Number

Returns:

Type: Number

Example

// get shadow offset x
var shadowOffsetX = shape.shadowOffsetX();

// set shadow offset x
shape.shadowOffsetX(5);

shadowOffsetY(y)

get/set shadow offset y

Parameters:

y Number

Returns:

Type: Number

Example

// get shadow offset y
var shadowOffsetY = shape.shadowOffsetY();

// set shadow offset y
shape.shadowOffsetY(5);

shadowOpacity(opacity)

get/set shadow opacity. must be a value between 0 and 1

Parameters:

opacity Number

Returns:

Type: Number

Example

// get shadow opacity
var shadowOpacity = shape.shadowOpacity();

// set shadow opacity
shape.shadowOpacity(0.5);

shadowRed(red)

get/set shadow red component

Parameters:

red Integer

Returns:

Type: Integer

Example

// get shadow red component
var shadowRed = shape.shadowRed();

// set shadow red component
shape.shadowRed(0);

shouldDrawHit()

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.

Returns:

Type: Boolean

show()

show node

Returns:

Type: Kinetic.Node

size(size)

get/set node size

Parameters:

size

Object

Properties

`width`	Number
`height`	Number

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)

get/set skew

Parameters:

skew

Object

Properties

`x`	Number
`y`	Number

Returns:

Type: Object

Example

// get skew
var skew = node.skew();

// set skew 
node.skew({
  x: 20
  y: 10
});

skewX(x)

get/set skew x

Parameters:

x Number

Returns:

Type: Number

Example

// get skew x
var skewX = node.skewX();

// set skew x
node.skewX(3);

skewY(y)

get/set skew y

Parameters:

y Number

Returns:

Type: Number

Example

// get skew y
var skewY = node.skewY();

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

startDrag()

initiate drag and drop

stopDrag()

stop drag and drop

stroke(color)

get/set stroke color

Parameters:

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');

strokeAlpha(alpha)

get/set stroke alpha component. Alpha is a real number between 0 and 1. The default is 1.

Parameters:

alpha Number

Returns:

Type: Number

Example

// get stroke alpha component
var strokeAlpha = shape.strokeAlpha();

// set stroke alpha component
shape.strokeAlpha(0.5);

strokeBlue(blue)

get/set stroke blue component

Parameters:

blue Integer

Returns:

Type: Integer

Example

// get stroke blue component
var strokeBlue = shape.strokeBlue();

// set stroke blue component
shape.strokeBlue(0);

strokeEnabled(enabled)

get/set stroke enabled flag

Parameters:

enabled Boolean

Returns:

Type: Boolean

Example

// get stroke enabled flag
var strokeEnabled = shape.strokeEnabled();

// disable stroke
shape.strokeEnabled(false);

// enable stroke
shape.strokeEnabled(true);

strokeGreen(green)

get/set stroke green component

Parameters:

green Integer

Returns:

Type: Integer

Example

// get stroke green component
var strokeGreen = shape.strokeGreen();

// set stroke green component
shape.strokeGreen(255);

strokeRed(red)

get/set stroke red component

Parameters:

red Integer

Returns:

Type: Integer

Example

// get stroke red component
var strokeRed = shape.strokeRed();

// set stroke red component
shape.strokeRed(0);

strokeScaleEnabled(enabled)

get/set strokeScale enabled flag

Parameters:

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)

get/set stroke width

Parameters:

strokeWidth Number

Returns:

Type: Number

Example

// get stroke width
var strokeWidth = shape.strokeWidth();

// set stroke width
shape.strokeWidth();

threshold(threshold)

get/set threshold. Must be a value between 0 and 1

Parameters:

threshold Number

Returns:

Type: Number

toDataURL(config)

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:

config

Object

Properties

`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

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:

config

Object

Properties

`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

Example

var image = node.toImage({
  callback: function(img) {
    // do stuff with img
  }
});

toJSON()

convert Node into a JSON string. Returns a JSON string.

Returns:

}

Type: String

toObject()

convert Node into an object for serialization. Returns an object.

Returns:

Type: Object

transformsEnabled(enabled)

get/set transforms that are enabled. Can be “all”, “none”, or “position”. The default is “all”

Parameters:

enabled String

Returns:

Type: String

Example

// enable position transform only to improve draw performance
node.transformsEnabled('position');

// enable all transforms
node.transformsEnabled('all');

value(value)

get/set hsv value

Parameters:

value Number 0 is no change, -1.0 halves the value, 1.0 doubles, etc..

Returns:

Type: Number

value(value)

get/set hsl luminance

Parameters:

value Number 0 is no change, -1.0 halves the value, 1.0 doubles, etc..

Returns:

Type: Number

visible(visible)

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:

visible Boolean | String

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)

get/set width

Parameters:

width Number

Returns:

Type: Number

Example

// get width
var width = node.width();

// set width
node.width(100);

x(x)

get/set x position

Parameters:

x Number

Returns:

Type: Object

Example

// get x
var x = node.x();

// set x
node.x(5);

y(y)

get/set y position

Parameters:

y Number

Returns:

Type: Integer

Example

// get y
var y = node.y();

// set y
node.y(5);

How to use properties, members and methods in kineticjs

Posted on June 24, 2014 by sathyalog

Folks,

We have multiple properties like width,height,listening etc etc as shown below

`width`	Number	<optional>
`height`	Number	<optional>
`visible`	Boolean	<optional>
`listening`	Boolean	<optional>	whether or not the node is listening for events

In the same manner we do even have methods like dragDistance,offsetX,dash,clone etc along with methods like dragDistance

Now my question is how to use this in efficient way? Thinking why questioning u 😉 even myself has same question 😛

I am a new bee, don’t scold me if i go wrong somewhere 😉

Properties can be used inside method like

var circle = new Kinetic.Circle({
                radius: 40,
                fill: 'blue',
                stroke: 'green',
                x: stage.getWidth() / 2,
                y: stage.getHeight() / 2,
                strokeWidth: 3
 
            });

Members can be used like

            circle.dash([10, 5]);
            circle.dashEnabled(true);
            circle.draggable(true);
            circle.dragDistance(30);

Methods can be used like this

Kinetic.dragDistance = 3;

Just run the below example in a notepad file to see a circle with outlined dash and even you can drag it.

Code:

<!DOCTYPE html>
 
<html lang="en">
    <head>
        
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="newcont"></div>
        <script src="kScript.js"></script>
        <script>
             //stage class
            var stage = new Kinetic.Stage({
                container: 'newcont', // container property
                width: 500, //width property
                height: 500 //height property
            });
            Kinetic.dragDistance = 30; // dragDistance method
            //layer class
            var layer = new Kinetic.Layer();
            // var node = new Node();
            // var dragDistance = circle.dragDistance();
 
            var circle = new Kinetic.Circle({
                radius: 40,
                fill: 'blue',
                stroke: 'green',
                x: stage.getWidth() / 2,
                y: stage.getHeight() / 2,
                strokeWidth: 3
 
            });
            circle.dash([10, 5]); //calling dash method
            circle.dashEnabled(true);
            circle.draggable(true);
            circle.dragDistance(30);
            layer.add(circle); // calling add method
            stage.add(layer);
        </script>
    </body>
</html>

Output:

If u want to append a rectangle to the same layer of your stage, you can do that by adding child to add method like shown below..

layer.add(shape1, shape2, shape3);

In my example:
add rect in scrpits tags like

Generic properties used in kinetic js

Posted on June 24, 2014 by sathyalog

`container`	String \| DomElement		Container id or DOM element
`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

`angle`	Number		in degrees
`innerRadius`	Number
`outerRadius`	Number
`clockwise`	Boolean	<optional>
`fill`	String	<optional>	fill color
`fillRed`	Integer	<optional>	set fill red component
`fillGreen`	Integer	<optional>	set fill green component
`fillBlue`	Integer	<optional>	set fill blue component
`fillAlpha`	Integer	<optional>	set fill alpha component
`fillPatternImage`	Image	<optional>	fill pattern image
`fillPatternX`	Number	<optional>
`fillPatternY`	Number	<optional>
`fillPatternOffset`	Object	<optional>	object with x and y component
`fillPatternOffsetX`	Number	<optional>
`fillPatternOffsetY`	Number	<optional>
`fillPatternScale`	Object	<optional>	object with x and y component
`fillPatternScaleX`	Number	<optional>
`fillPatternScaleY`	Number	<optional>
`fillPatternRotation`	Number	<optional>
`fillPatternRepeat`	String	<optional>	can be “repeat”, “repeat-x”, “repeat-y”, or “no-repeat”. The default is “no-repeat”
`fillLinearGradientStartPoint`	Object	<optional>	object with x and y component
`fillLinearGradientStartPointX`	Number	<optional>
`fillLinearGradientStartPointY`	Number	<optional>
`fillLinearGradientEndPoint`	Object	<optional>	object with x and y component
`fillLinearGradientEndPointX`	Number	<optional>
`fillLinearGradientEndPointY`	Number	<optional>
`fillLinearGradientColorStops`	Array	<optional>	array of color stops
`fillRadialGradientStartPoint`	Object	<optional>	object with x and y component
`fillRadialGradientStartPointX`	Number	<optional>
`fillRadialGradientStartPointY`	Number	<optional>
`fillRadialGradientEndPoint`	Object	<optional>	object with x and y component
`fillRadialGradientEndPointX`	Number	<optional>
`fillRadialGradientEndPointY`	Number	<optional>
`fillRadialGradientStartRadius`	Number	<optional>
`fillRadialGradientEndRadius`	Number	<optional>
`fillRadialGradientColorStops`	Array	<optional>	array of color stops
`fillEnabled`	Boolean	<optional>	flag which enables or disables the fill. The default value is true
`fillPriority`	String	<optional>	can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority(‘color’) to render the shape with a color fill, or use setFillPriority(‘pattern’) to render the shape with the pattern fill configuration
`stroke`	String	<optional>	stroke color
`strokeRed`	Integer	<optional>	set stroke red component
`strokeGreen`	Integer	<optional>	set stroke green component
`strokeBlue`	Integer	<optional>	set stroke blue component
`strokeAlpha`	Integer	<optional>	set stroke alpha component
`strokeWidth`	Number	<optional>	stroke width
`strokeScaleEnabled`	Boolean	<optional>	flag which enables or disables stroke scale. The default is true
`strokeEnabled`	Boolean	<optional>	flag which enables or disables the stroke. The default value is true
`lineJoin`	String	<optional>	can be miter, round, or bevel. The default is miter
`lineCap`	String	<optional>	can be butt, round, or sqare. The default is butt
`shadowColor`	String	<optional>
`shadowRed`	Integer	<optional>	set shadow color red component
`shadowGreen`	Integer	<optional>	set shadow color green component
`shadowBlue`	Integer	<optional>	set shadow color blue component
`shadowAlpha`	Integer	<optional>	set shadow color alpha component
`shadowBlur`	Number	<optional>
`shadowOffset`	Object	<optional>	object with x and y component
`shadowOffsetX`	Number	<optional>
`shadowOffsetY`	Number	<optional>
`shadowOpacity`	Number	<optional>	shadow opacity. Can be any real number between 0 and 1
`shadowEnabled`	Boolean	<optional>	flag which enables or disables the shadow. The default value is true
`dash`	Array	<optional>
`dashEnabled`	Boolean	<optional>	flag which enables or disables the dashArray. The default value is true

M	T	W	T	F	S	S
« Aug
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Sathya's Log

Love to learn..Passion to code..

Category Archives: KineticJs

Kineticjs Cloning example

Angularjs with kineticjs??

How to add a text on image in kineticjs

Kinetic Js Reference links

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

How to use properties, members and methods in kineticjs

Generic properties used in kinetic js