ericdrowell/KineticJS — pull request #41 by matteo78 (2012-07-06 12:17:18+00:00)
Title: Improved Kinetic.JS flexibilty

## Allow users to reuse properties in other nodes

Created a new class Styler who save some properties in order to re-use them in Nodes. Example :

var myStyler = new Kinetic.Styler({
stroke: "black",
strokeWidth: 4,
fill: "red"
});

To apply this styler to any node, just give him the wanted styler in parameter.

var myRect = new Kinetic.Rect({
x: 20,
y: 20,
width: 200,
height: 50,
styler: myStyler
});

You can also use getStyler and setStyler methods.

## Use a node as a source to create several others

Sometimes, it's usefull to use a node several times more to avoid copy/pasting. For example, you create your own Shape who draws a bubble :

var bubble = new Kinetic.Shape({
drawFunc: function() {
var context = this.getContext(), r = this.attrs.cornerRadius, w = this.attrs.width, h = this.attrs.height;
context.beginPath();
context.moveTo(r, 0);
context.lineTo(w - r, 0);
context.quadraticCurveTo(w, 0, w, r);
context.lineTo(w, h / 2 - 20);
context.lineTo(w + 25, h / 2);
context.lineTo(w, h / 2 + 20);
context.lineTo(w, h - r);
context.quadraticCurveTo(w, h, w - r, h);
context.lineTo(r, h);
context.quadraticCurveTo(0, h, 0, h - r);
context.lineTo(0, r);
context.quadraticCurveTo(0, 0, r, 0);
context.closePath();

this.fill();
this.stroke();
}
};

_Great, beautiful work, but I want to use it elsewhere. Should I copy/paste the draw func ?_
No ! Just use the clone() method.

var bubble1 = bubble.clone({
x: 3,
y: 3,
width: 20,
height: 20,
cornerRadius: 3
});

var bubble2 = bubble.clone({
x: 20,
y: 20,
width: 40,
height: 50,
cornerRadius: 4
});