Skip to content

Instantly share code, notes, and snippets.

@sandor

sandor/Fabric_Demo_Copy_Paste.html

Last active November 27, 2021 07:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sandor/3d9f033f7f5cd7fdd0c81208b23e0f4b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sandor/3d9f033f7f5cd7fdd0c81208b23e0f4b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Fabric_Demo_Copy_Paste.html
<!DOCTYPE html>
<html lang="en" ng-app="kitchensink">
<head>
<meta charset="utf-8">
<title>Copy and Paste | Fabric.js 2.0 Demos</title>
<link rel="stylesheet" href="../css/master.css">
<link rel="stylesheet" href="../css/ads.css">
<link rel="stylesheet" href="../css/prism.css">
<style>
pre { margin-left: 15px !important }
</style>
<script src="../lib/prism.js"></script>
<script>
(function() {
var fabricUrl = '../lib/fabric.js';
if (document.location.search.indexOf('load_fabric_from=') > -1) {
var match = document.location.search.match(/load_fabric_from=([^&]*)/);
if (match && match[1]) {
fabricUrl = match[1];
}
}
document.write('<script src="' + fabricUrl + '"><\/script>');
})();
</script>
<script src="../js/master.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
</head>
<body>
<ul id="header">
<li><a href="http://fabricjs.com/">Home</a></li>
<li><a href="http://fabricjs.com/demos">Demos</a></li>
<li><a href="http://fabricjs.com/articles">Tutorial</a></li>
<li><a href="http://fabricjs.com/docs">Docs</a></li>
<li><a href="http://fabricjs.com/build">Custom Build</a></li>
<li><a href="http://fabricjs.com/help">Support</a></li>
<li><a href="http://fabricjs.com/test">Tests/Benchmarks</a></li>
<li><a href="http://fabricjs.com/team">Team</a></li>
<li class="secondary">
<a href="https://codeclimate.com/repos/526a0ed089af7e6cf2001389/feed">
<img src="https://codeclimate.com/repos/526a0ed089af7e6cf2001389/badges/d1c922dd1511ffa8a72f/gpa.png">
</a>
<a href="http://travis-ci.org/#!/kangax/fabric.js">
<img src="https://api.travis-ci.org/kangax/fabric.js.png?branch=master">
</a>
</li>
<li class="gittip secondary">
<iframe style="border: 0; margin: 0; padding: 0;"
src="https://www.gittip.com/kangax/widget.html" width="48pt" height="22pt"></iframe>
</li>
<li class="flattr secondary">
<a class="FlattrButton" style="display:none;" rev="flattr;button:compact;" href="http://kangax.github.com/fabric.js"></a>
<noscript>
<a href="http://flattr.com/thing/391332/Fabric-js" target="_blank">
<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" />
</a>
</noscript>
</li>
<li class="github secondary">
<iframe src="http://ghbtns.com/github-btn.html?user=kangax&repo=fabric.js&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="95px" height="20px"></iframe>
</li>
<li class="twitter secondary">
<a href="https://twitter.com/fabricjs" class="twitter-follow-button" data-show-count="true">Follow @fabricjs</a>
</li>
<li id="carbonads-container">
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fabricjscom" id="_carbonads_js"></script>
</li>
</ul>
<script>
(function() {
if (document.location.hostname === 'localhost') {
var links = document.getElementById('header').getElementsByTagName('a');
for (var i = 0, len = links.length; i < len; i++) {
// very retarted fix but fuck it
links[i].href = links[i].href.replace('fabricjs.com', 'localhost:4000');
}
}
else {
var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
s.async = true;
s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
t.parentNode.insertBefore(s, t);
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
}
})();
</script>
<div id="bd-wrapper" ng-controller="CanvasControls">
<h2><span>Fabric.js 2.0 demos</span> &middot; Copy and Paste</h2>
<style>
.controls { display: inline-block; background: #fafafa; margin-left: 10px; padding: 15px; border-left: 1px dotted #aaa; height: 270px }
.canvas-container { display: inline-block; vertical-align: top; }
canvas { border: 1px solid #eee !important }
label span { width: 50px; display: inline-block }
*[type=range] { position: relative; top: 4px }
p:first-child { margin-top: 0 }
p:last-child { margin-bottom: 0 }
</style>
<canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>
<div class="controls">
<p><button id="copy">Copy Selected Objects</button></p>
<p><button id="paste">Paste Selected Objects</button></p>
<p><button id="group">Group Selected Objects</button></p>
<p><button id="ungroup">Unroup Selected Objects</button></p>
</div>
<script id="main">
var canvas = new fabric.Canvas("c");
var clipboard = null;
var copy = document.getElementById("copy");
var paste = document.getElementById("paste");
var group = document.getElementById("group");
var ungroup = document.getElementById("ungroup");
copy.onclick = Copy;
paste.onclick = Paste;
group.onclick = Group;
ungroup.onclick = Ungroup;
function Group() {
if (!canvas.getActiveObject()) {
return;
}
if (canvas.getActiveObject().type !== 'activeSelection') {
return;
}
canvas.getActiveObject().toGroup();
canvas.requestRenderAll();
}
function Ungroup() {
if (!canvas.getActiveObject()) {
return;
}
if (canvas.getActiveObject().type !== 'group') {
return;
}
canvas.getActiveObject().toActiveSelection();
canvas.requestRenderAll();
}
function Copy() {
var activeObject = canvas.getActiveObject();
_clipboard = activeObject;
console.log(_clipboard);
}
function Paste() {
var activeObject = canvas.getActiveObject();
canvas.discardActiveObject();
if (_clipboard.size) {
_clipboard.clone(function (clonedObj) {
canvas.discardActiveObject();
clonedObj.set({
left: clonedObj.left + 10,
top: clonedObj.top + 10,
evented: true,
active: true
});
clonedObj.forEachObject(function (obj) {
obj.set('active', true);
canvas.add(obj);
});
canvas.setActiveObject(clonedObj);
canvas.requestRenderAll;
});
} else {
_clipboard.clone(function (clonedObj) {
canvas.discardActiveObject();
clonedObj.set("top", _clipboard.top + 5);
clonedObj.set("left", _clipboard.left + 5);
clonedObj.set('active', true);
clonedObj.setCoords();
canvas.add(clonedObj);
canvas.setActiveObject(clonedObj);
canvas.requestRenderAll;
});
}
}
// create a rectangle object
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 100,
height: 100,
hasControls: true
});
canvas.add(rect);
// create a rectangle object
var rect2 = new fabric.Rect({
left: 200,
top: 250,
fill: 'red',
width: 100,
height: 100,
strokeWidth: 2,
stroke: "#000",
hasControls: true
});
canvas.add(rect2);
</script>
</div>
<script>
(function(){
var mainScriptEl = document.getElementById('main');
if (!mainScriptEl) return;
var preEl = document.createElement('pre');
var codeEl = document.createElement('code');
codeEl.innerHTML = mainScriptEl.innerHTML;
codeEl.className = 'language-javascript';
preEl.appendChild(codeEl);
document.getElementById('bd-wrapper').appendChild(preEl);
})();
</script>
<script>
(function() {
fabric.util.addListener(fabric.window, 'load', function() {
var canvas = this.__canvas || this.canvas,
canvases = this.__canvases || this.canvases;
canvas && canvas.calcOffset && canvas.calcOffset();
if (canvases && canvases.length) {
for (var i = 0, len = canvases.length; i < len; i++) {
canvases[i].calcOffset();
}
}
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment