How to copy and paste shapes in KineticJS

Question

I have a button1 like this.

var Button1 = new Kinetic.Polygon({
            points: [0, 0, 0, 30, 15, 15],
            fill: 'rgb(0, 255, 0)'
        });

Now I want to copy it (duplicate it). How would I do that?

I tried this -

    var Button2 = new Kinetic.Polygon();
    Button2 = Button1;

This did not work as only one copy is being drawn on the canvas.

How should I do this?

Answer 1

The simplest way to copy an object in KineticJS is to use the clone method:

 var Button1 = new Kinetic.Polygon({
        points: [0, 0, 0, 30, 15, 15],
        fill: 'rgb(0, 255, 0)'
 });

 var Button2 = Button1.clone();

Button2 is now an exact copy of Button1

Answer 2

What about this:

var buttonData = {
            points: [0, 0, 0, 30, 15, 15],
            fill: 'rgb(0, 255, 0)'
        }

var Button1 = new Kinect.Polygon(buttonData);
var Button2 = new Kinect.Polygon(buttonData);

?

Answer 3

Button1 and Button2 now point to the same Kinetic object.

You can try to use jQuery extend method

var Button2 = $.extend({}, Button1);

This will make a copy of the object.