Home > Article > Web Front-end > How to set a dash pattern for the control corners of a rectangle using FabricJS?
How to set a dash pattern for the control corners of a rectangle using FabricJS?
- WBOYforward
- 2023-08-30 15:21:03972browse
In this tutorial, we will learn how to use FabricJS to implement a dotted pattern that controls the corners of a rectangle. The control corners of an object allow us to scale, stretch or change its position.
We can customize the control corner in many ways, such as adding a specific color to it, changing its size, etc. We can also specify the dash pattern that controls the corners using the cornerDashArray property.
Syntax
new fabric.Rect({ cornerDashArray: Array }: Object)Parameters
Options (optional) - This parameter is a ## that provides additional customization #Object to our rectangle. Using this parameter, you can change properties related to the object for which cornerDashArray is a property, such as color, cursor, stroke width, and many other properties.
Option Key
cornerDashArray - This property accepts an Array which allows us to specify A dotted pattern that controls the corners. For example, if we pass an array with values [2,3], it represents a dash pattern of 2px dashes and 3px gaps, and this pattern repeats infinitely.
Default appearance of the control corner
Let’s look at a code example that describes the default appearance of the control corner rectangular object. Since we are not using the cornerDashArray attribute, there is no Showing dash pattern.<!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>Default appearance of controlling corners</h2>
<p>Select the rectangle to see the default appearance</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a rectangle object
var rect = new fabric.Rect({
left: 125,
top: 90,
width: 170,
height: 70,
fill: "#cf1020",
borderColor: "black",
borderScaleFactor: 3,
cornerColor: "#3b7a57",
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>Example 2
Passing cornerDashArray property as key
In this example, we are passing value [1,2,1 to cornerDashArray property ]. this Meaning a dotted pattern will be created with a 1px long line followed by A 2px gap, then again draw a 1px long line, after which a 1px gap will be drawn Production and more.<!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>Passing cornerDashArray property as key</h2>
<p>Select the rectangle to see the appearance of the controlling corners with dash pattern</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a rectangle object
var rect = new fabric.Rect({
left: 125,
top: 90,
width: 170,
height: 70,
fill: "#cf1020",
borderColor: "black",
borderScaleFactor: 3,
cornerColor: "#3b7a57",
cornerDashArray: [1, 2, 1],
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
The above is the detailed content of How to set a dash pattern for the control corners of a rectangle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!