Fabric.js ActiveSelection needsItsOwnCache() Method
Last Updated :
19 Mar, 2021
In this article, we are going to see how to use the needsItsOwnCache() Method in the canvas ActiveSelection using FabricJS, it used to fill an object. The canvas ActiveSelection means the ActiveSelection is movable and can be stretched according to requirements. Further, the ActiveSelection can be customized when it comes to initial stroke color, height, width, fill color, or stroke width.
The needsItsOwnCache() Method returns true if the object to have its own cache.
Approach: First import the fabric.js library. After importing the library, create a canvas block in the body tag which will contain the ActiveSelection. After this, initialize an instance of Canvas and ActiveSelection class provided by Fabric.JS and use the needsItsOwnCache() method.
Syntax:
ActiveSelection.needsItsOwnCache()
Parameters: This function does not takes any parameter.
Return Value: This method returns the object value that returns true if the object to have its own cache.
Example: This example uses FabricJS to set the needsItsOwnCache() method of the canvas ActiveSelection as shown in the below example.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
</ head >
< body >
< div style = "text-align: center;width: 400px;" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< b >
Fabric.js | ActiveSelection needsItsOwnCache() method
</ b >
</ div >
< div style = "text-align: center;" >
< canvas id = "canvas" width = "500" height = "500"
style = "border:1px solid green;" >
</ canvas >
</ div >
< img src =
width = "100" height = "100" id = "my-image"
style = "display: none;" >
< script >
var canvas = new fabric.Canvas("canvas");
// Getting the image
var img = document.getElementById('my-image');
// Creating the image instance
var geek = new fabric.Image(img, {
});
canvas.add(geek);
var geek = new fabric.IText('GeeksforGeeks', {
});
canvas.add(geek);
canvas.centerObject(geek);
var gfg = new fabric.ActiveSelection(canvas.getObjects(), {
});
canvas.setActiveObject(gfg);
canvas.requestRenderAll();
canvas.centerObject(gfg);
console.log(gfg.needsItsOwnCache())
</ script >
</ body >
</ html >
|
Output:
Reference: http://fabricjs.com/docs/fabric.ActiveSelection.html#needsItsOwnCache
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...