search

Home >Web Front-end >JS Tutorial >How to set a dash pattern that controls the corners of a Textbox using FabricJS?

How to set a dash pattern that controls the corners of a Textbox using FabricJS?

WBOY
WBOYforward
2023-08-25 12:05:04827browse

How to set a dash pattern that controls the corners of a Textbox using FabricJS?

In this tutorial, we will learn how to use FabricJS to implement a dotted line pattern that controls the corners of a Textbox. 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 a dash pattern for the control corners using the cornerDashArray property. p>

grammar

new fabric.Textbox(text: String, { cornerDashArray: Array }: Object)

parameter

  • text - This parameter accepts a String, which is the text string we want Displayed in our text box.

  • Options (optional) - This parameter is an object that provides additional customization to our text box. Using this parameter, you can change properties such as color, cursor, stroke width, and many other properties associated with the object for which cornerDashArray is a property.

Option key

  • cornerDashArray: This property accepts an Array, which allows us to specify the dash 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.

Example 1

Controls the default appearance of corners

Let's look at a code example that describes the default appearance of the control corners of a text box object. Since we are not using the cornerDashArray attribute, the dash pattern is not displayed. 

<!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>You can select the textbox to see the default appearance of controlling corners</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 textbox object
		var textbox = new fabric.Textbox("How high you fly is derived from how big you think.", {
		backgroundColor: "rgba(204,255,0,0.2)",
			width: 400,
			top: 70,
			left: 110,
			cornerColor: "#87a96b",
		});
		
		// Add it to the canvas
		canvas.add(textbox);
	</script>
</body>
</html>

Example 2

Passing cornerDashArray properties as keys

In this example, we pass the value [1,2,1] to the cornerDashArray property. This means that a dashed pattern will be created with a 1 pixel long line followed by a 2 pixel gap, then again a 1 pixel long line will be drawn followed by a 1 pixel gap and so on. 

<!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>You can select the textbox to see the dash pattern of controlling corners</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 textbox object
		var textbox = new fabric.Textbox("How high you fly is derived from how big you think.", {
			backgroundColor: "rgba(204,255,0,0.2)",
			width: 400,
			top: 70,
			left: 110,
			cornerColor: "#87a96b",
			cornerDashArray: [1, 2, 1],
		});
		
		// Add it to the canvas
		canvas.add(textbox);
	</script>
</body>
</html>

The above is the detailed content of How to set a dash pattern that controls the corners of a Textbox using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

String Array 字符串 对象
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Find minimal deletions in string in JavaScriptNext article：Find minimal deletions in string in JavaScript

Related articles

See more