Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
FabricJS – Implementing object duplication programmatically on a Polygon?
We can create a Polygon object by creating an instance of fabric.Polygon. A polygon object can be characterized by any closed shape consisting of a set of connected straight-line segments. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc. In order to implement object duplication programmatically we need to implement duplicate control using the clone method.
Syntax
clone(callback: Object, propertiesToInclude: Array)
Parameters
-
Callback (optional) ? This parameter is a callback function which is invoked with a clone.
-
propertiesToInclude (optional) ? This parameter includes any additional properties that we want to be included in the clone canvas instance. This must be in the form of an Array.
Example 1: Implementing Object Duplication Programmatically on Polygon
Let's see a code example to understand how we can attain object duplication on a Polygon. Firstly, we have initiated a polygon object and its respective points array and add it to clipboard. We have also one button which when clicked fires the duplicate() function. duplicate() will get the object from clipboard and will clone the copied object with a offset and add it to the canvas using canvas.add.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Implementing object duplication programmatically on Polygon</h2>
<p>
You can click on Duplicate button to see object duplication in action
</p>
<button onclick="duplicate()" style="padding: 3px">Duplicate</button>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating duplicate() function which pastes
// the object to canvas, adds offset and
// makes the object active
function duplicate() {
_clipboard.clone(function (clonedObj) {
canvas.discardActiveObject();
clonedObj.set({
left: clonedObj.left + 10,
top: clonedObj.top + 10,
evented: true,
});
canvas.add(clonedObj);
_clipboard.top += 10;
_clipboard.left += 10;
canvas.setActiveObject(clonedObj);
canvas.requestRenderAll();
});
}
// Initiating a points array
var points = [
{ x: 30, y: 50 },
{ x: 70, y: 50 },
{ x: 0, y: 0 },
{ x: 70, y: 0 },
];
// Initiating a polygon object
var polygon = new fabric.Polygon(points, {
left: 100,
top: 40,
fill: "#1e90ff",
strokeWidth: 4,
stroke: "green",
scaleX: 2,
scaleY: 2,
});
// Clone the object to clipboard
polygon.clone(function (cloned) {
_clipboard = cloned;
});
// Adding it to the canvas
canvas.add(polygon);
</script>
</body>
</html>
Example 2: Implementing Object Duplication Programmatically on Circle
Let's see a code example to see how we can implement object duplication programmatically using FabricJS on a circle. In this case, we have initiated a circle instead of a polygon object and followed the same procedure. Therefore, the duplicate of the circle will be created.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Implementing object duplication programmatically on Circle</h2>
<p>
You can click on Duplicate button to see object duplication in action
</p>
<button onclick="duplicate()" style="padding: 3px">Duplicate</button>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating duplicate() function which pastes
// the object to canvas, adds offset and
// makes the object active
function duplicate() {
_clipboard.clone(function (clonedObj) {
canvas.discardActiveObject();
clonedObj.set({
left: clonedObj.left + 10,
top: clonedObj.top + 10,
evented: true,
});
canvas.add(clonedObj);
_clipboard.top += 10;
_clipboard.left += 10;
canvas.setActiveObject(clonedObj);
canvas.requestRenderAll();
});
}
// Initiating a circle object
var circle = new fabric.Circle({
left: 100,
top: 40,
fill: "#1e90ff",
radius: 40,
strokeWidth: 4,
stroke: "green",
scaleX: 2,
scaleY: 2,
});
// Clone the object to clipboard
circle.clone(function (cloned) {
_clipboard = cloned;
});
// Adding it to the canvas
canvas.add(circle);
</script>
</body>
</html>
Key Points
- The
clone()method creates an exact copy of the fabric object - Each cloned object should be offset to avoid overlapping with the original
- The
_clipboardvariable stores the reference to the object being duplicated - Use
canvas.setActiveObject()to make the newly created duplicate the active selection
Conclusion
In this tutorial, we used two simple examples to demonstrate how you can implement object duplication programmatically using FabricJS. The clone method provides a powerful way to duplicate objects with customizable offsets and properties.
352 Views
