Copy and Paste objects in Fabric.js
https://groups.google.com/forum/?fromgroups#!topic/fabricjs/bPH_h98JcVk
by Adi Jaya
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.3.0/fabric.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>
CSS
canvas{
border-width: 1pz;
border-style: solid;
border-color: #000;
}
JavaScript
var src = "http://fabricjs.com/lib/pug.jpg";
var copiedObject;
var copiedObjects = new Array();
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = "#F5F5F5";
var text = new fabric.Text('Text inside canvas', {
left: 200,
top: 50
});
text.hasRotatingPoint = true;
canvas.add(text);
var circle = new fabric.Circle({
left: 200,
top: 150,
radius: 50,
fill: "#dd0000"
});
circle.hasRotatingPoint = true;
canvas.add(circle);
fabric.util.loadImage(src, function(img) {
var object = new fabric.Image(img);
object.set({
left: 200,
top: 300
});
object.hasRotatingPoint = true;
object.scaleX = object.scaleY = .25;
canvas.add(object);
canvas.renderAll();
});
canvas.renderAll();
createListenersKeyboard();
function createListenersKeyboard() {
document.onkeydown = onKeyDownHandler;
//document.onkeyup = onKeyUpHandler;
}
function onKeyDownHandler(event) {
//event.preventDefault();
var key;
if(window.event){
key = window.event.keyCode;
}
else{
key = event.keyCode;
}
switch(key){
//////////////
// Shortcuts
//////////////
// Copy (Ctrl+C)
case 67: // Ctrl+C
if(ableToShortcut()){
if(event.ctrlKey){
event.preventDefault();
copy();
}
}
break;
// Paste (Ctrl+V)
case 86: // Ctrl+V
if(ableToShortcut()){
if(event.ctrlKey){
event.preventDefault();
paste();
}
}
break;
default:
// TODO
break;
}
}
function ableToShortcut(){
/*
TODO check all cases for this
if($("textarea").is(":focus")){
return false;
}
if($(":text").is(":focus")){
return false;
}
*/
return true;
}
function...