Kineticjs Cloning example

<!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&gt;
<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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s