Home > Article > Web Front-end > How to disable multiple specific control points of an image object using FabricJS?
How to disable multiple specific control points of an image object using FabricJS?
- 王林forward
- 2023-08-22 12:45:071376browse
In this tutorial we will learn how to disable multiple specific control points.
Create image objects using FabricJS. We can create an image object by creating an instance of fabric.Image. Since it is one of the basic elements of FabricJS, we can also easily Customize it by applying properties such as angle, opacity, etc. In order to disable multiple For the image object of a specific control point, we use the setControlsVisibility methodgrammar
setControlsVisibility(options: Object): fabric.Object
parameter
-
options − This parameter accepts an Object value, used to set the visible state controls. Possible values are −
‘tl’ − This property accepts a boolean value that enables or disables the upper left corner control
‘tr’ −This property accepts a boolean value for enabling or disabling the upper right corner control
‘br’ −This property accepts a boolean value used to enable or disable the lower right corner control 'bl' - This property accepts a boolean value to enable or disable the bottom left corner control 'ml' − This property accepts a boolean value that enables or disables the center left control
‘mt’ −This property accepts a boolean value used to enable or disable the mid-upper control
‘mr’ −This property accepts a Boolean value used to enable or disable the center-right control ‘mb’ − This attribute accepts a boolean value to enable or disable the mid-lower control
‘mtr’ −This property accepts a Boolean value that is used to enable or disable the center-top rotation control
Use setControlsVisibility method
Example
Let's look at a code example to see the output when the setControlsVisibility method is called use. setControlsVisibility Method sets the visibility of multiple specified controls. exist In this case, since we set the "tl" and "bl" controls to false values, the upper left And the controls on the bottom left will be disabled.
<!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>Using setControlsVisibility method</h2>
<p>
You can select the image object to see that the bottom-left and top-left controls have been disabled
</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="max-width:90%" / alt="How to disable multiple specific control points of an image object using FabricJS?" >
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
});
// Add it to the canvas
canvas.add(image);
// Using setControlsVisibility method
image.setControlsVisibility({
tl: false,
bl: false,
});
</script>
</body>
</html>
Use the setControlsVisibility method to disable middle top rotation
The translation of control is: controlExample
In this example, we will use the setControlsVisibility method to disable the "mtr" control This is also known as mid-upper rotation control.<!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>
Using setControlsVisibility method to disable the middle-top-rotate control
</h2>
<p>
You can select the image object to see that the middle-top-rotate control has been disabled
</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="max-width:90%" / alt="How to disable multiple specific control points of an image object using FabricJS?" >
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
});
// Add it to the canvas
canvas.add(image);
// Using setControlsVisibility method
image.setControlsVisibility({
mtr: false,
});
</script>
</body>
</html>
The above is the detailed content of How to disable multiple specific control points of an image object using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!