Comment définir un motif de tirets qui contrôle les coins d'une Textbox à l'aide de FabricJS ?-js tutoriel-php.cn

Comment définir un motif de tirets qui contrôle les coins d'une Textbox à l'aide de FabricJS ?

WBOY

Libérer： 2023-08-25 12:05:04

avant

836 Les gens l'ont consulté

Comment définir un motif de tirets qui contrôle les coins dune Textbox à laide de FabricJS ?

Dans ce tutoriel, nous allons apprendre à utiliser FabricJS pour implémenter un motif de lignes pointillées qui contrôle les coins d'une zone de texte. Les coins de contrôle d'un objet nous permettent de le redimensionner, de l'étirer ou de changer sa position. Nous pouvons personnaliser le coin de contrôle de plusieurs manières, par exemple en y ajoutant une couleur spécifique, en modifiant sa taille, etc. Nous pouvons également spécifier un motif de tirets pour les coins de contrôle en utilisant l'attribut cornerDashArray. p>

Grammaire

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

Copier après la connexion

Paramètres

text - Ce paramètre accepte une String, qui est la chaîne de texte que nous voulons Affiché dans notre zone de texte.
Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre zone de texte. En utilisant ce paramètre, vous pouvez modifier des propriétés telles que la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés associées à l'objet dont cornerDashArray est une propriété.

Touche d'option

cornerDashArray : Cette propriété accepte un Array qui nous permet de spécifier un motif de tiret qui contrôle les coins. Par exemple, si nous transmettons un tableau avec les valeurs [2,3], il représente un motif de tirets de 2 pixels et d'espaces de 3 pixels, et ce motif se répète à l'infini.

Exemple 1

Contrôlez l'apparence par défaut des coins

Regardons un exemple de code qui décrit l'apparence par défaut des coins de contrôle d'un objet zone de texte. Puisque nous n'utilisons pas l'attribut cornerDashArray, le motif de tiret n'est pas affiché.

<!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>

Copier après la connexion

Exemple 2

Passez l'attribut cornerDashArray comme clé

Dans cet exemple, nous transmettons la valeur [1,2,1] à la propriété cornerDashArray. Cela signifie qu'un motif en pointillés sera créé avec une ligne longue de 1 pixel suivie d'un espacement de 2 pixels, puis à nouveau une ligne longue de 1 pixel sera tracée suivie d'un espacement de 1 pixel et ainsi de suite.

<!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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!