How to hide the control border of a circle using FabricJS?-JS Tutorial-php.cn

How to hide the control border of a circle using FabricJS?

PHPz

Release： 2023-08-24 09:21:12

forward

1383 people have browsed it

如何使用 FabricJS 隐藏圆的控制边框？

In this tutorial, we will learn how to hide the control border of a circle using FabricJS. Circles are one of the various shapes provided by FabricJS. To create a circle, we will create an instance of the Fabric.Circle class and add it to the canvas. We can customize the control borders in many ways, such as adding specific colors, dash patterns, etc. However, we can also eliminate the borders entirely using the hasBorders property.

Syntax

new fabric.Circle({ hasBorders: Boolean }: Object)

Copy after login

Parameters

Options (optional) - This parameter is a Object< /em> Provides additional customization for our circles. Using this parameter, you can change the color, cursor, stroke width and other properties related to the object with hasBorders as the attribute.

Option Key

##hasBorders - This property accepts Boolean values Value, when set to < /strong>False, the control border will not be rendered. The default value is True.

Example 1
Circle object controls the default appearance of the border< /strong>
Let us look at a piece of code that displays the control of the circle border Default appearance. Since the default value of the
hasBorders property is True, borders are rendered when a circular object is selected.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Hiding the controlling borders of a circle using FabricJS</h2> <p>Select the object and notice its controlling borders. This is the default appearance. Although we have not used the <b>hasBorders</b> property, it is by default set to True.</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); var circle = new fabric.Circle({ left: 215, top: 100, fill: "white", radius: 50, stroke: "#c154c1", strokeWidth: 5 }); // Adding it to the canvas canvas.add(circle); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Copy after login
Example 2
Pass hasBorders as a key and assign it the value of "false"
If the
hasBorders attribute is Assigned a False value, the border will no longer be rendered. This means that when we select the circular object, the control border will be hidden.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Hiding the controlling borders of a circle using FabricJS</h2> <p>Select the object and now you will no longer be able to see its controlling borders, as we have set <b>hasBorders</b> as False.</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); var circle = new fabric.Circle({ left: 215, top: 100, fill: "white", radius: 50, stroke: "#c154c1", strokeWidth: 5, hasBorders: false }); // Adding it to the canvas canvas.add(circle); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Copy after login
The above is the detailed content of How to hide the control border of a circle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!