Copy and Paste objects in Fabric.js
https://groups.google.com/forum/?fromgroups#!topic/fabricjs/bPH_h98JcVk
HTML
<script src="https://raw.github.com/kangax/fabric.js/master/dist/all.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.3.0/fabric.min.js"></script>
<canvas id="paper" width="550" height="400" style="border:2px solid #000"></canvas>
<button id="select">Selection mode</button>
<button id="copy">Copy</button>
<button id="paste">Paste</button>
JavaScript
// Initialize variables
var src = "http://fabricjs.com/lib/pug.jpg";
var canvas = new fabric.Canvas('paper',{isDrawingMode:true});
// event handlers
$("#select").click(function(){
canvas.isDrawingMode = false;
});
$("#draw").click(function(){
canvas.isDrawingMode = true;
});
$("#copy").click(function(){
copy();
});
$("#paste").click(function(){
paste();
});
// Adding some objects onto canvas
// adding text on canvas
var text = new fabric.Text('1. Select Object(s) \n2. Press Ctr+c to copy \n3. Ctr+v to paste\n4. Or use buttons below', {
left: 100,
top: 50,
fontFamily: 'Arial',
fontSize: 15,
fill: '#333'
});
text.hasRotatingPoint = true;
canvas.add(text);
// adding circle to canvas
var circle = new fabric.Circle({
left: 350,
top: 250,
radius: 50,
fill: "#299b71"
});
circle.hasRotatingPoint = true;
canvas.add(circle);
// adding rectangle to canvas
var rect = new fabric.Rect({
left: 200,
top: 250,
width:100,
height:80,
rx: 10, // rounded corner, x parameter
ry: 15, // rounded corner, y parameter
fill: "#ff8a1b"
});
rect.hasRotatingPoint = true;
canvas.add(rect);
// add image to canvas, url being specified earlier
fabric.util.loadImage(src, function(img) {
var object = new fabric.Image(img);
object.set({
left: 400,
top: 70
});
object.hasRotatingPoint = true;
object.scaleX = object.scaleY = .25;
canvas.add(object);
canvas.renderAll();
});
canvas.renderAll();
createListenersKeyboard();
function createListenersKeyboard() {
document.onkeydown = onKeyDownHandler;
//document.onkeyup = onKeyUpHandler;
}
var copiedObject,
copiedObjects = new Array();
function copy(){
copiedObjects = new Array();
if(canvas.getActiveGroup()){
}
else if(canvas.getActiveObject()){
var object = fabric.util.object.clone(canvas.getActiveObject());
/* var copiedObject1 = object;
copiedObject1.set("top",...