简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Wie lege ich mit FabricJS ein Strichmuster fest, das die Ecken einer Textbox steuert?

Wie lege ich mit FabricJS ein Strichmuster fest, das die Ecken einer Textbox steuert?

WBOY
WBOYnach vorne
2023-08-25 12:05:04795Durchsuche

Wie lege ich mit FabricJS ein Strichmuster fest, das die Ecken einer Textbox steuert?

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS ein gepunktetes Linienmuster implementieren, das die Ecken eines Textfelds steuert. Die Kontrollecken eines Objekts ermöglichen es uns, seine Position zu skalieren, zu strecken oder zu ändern. Wir können die Kontrollecke auf viele Arten anpassen, z. B. indem wir ihr eine bestimmte Farbe hinzufügen, ihre Größe ändern usw. Mit dem Attribut cornerDashArray können wir auch ein Strichmuster für die Kontrollecken angeben. p>

Grammatik

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

Parameter

  • text – Dieser Parameter akzeptiert einen String, der die gewünschte Textzeichenfolge ist Wird in unserem Textfeld angezeigt.

  • Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Textfeld zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie Eigenschaften wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften ändern, die mit dem Objekt verknüpft sind, dessen cornerDashArray eine Eigenschaft ist.

Wahltaste

  • cornerDashArray: Diese Eigenschaft akzeptiert ein Array, mit dem wir ein Strichmuster angeben können, das die Ecken steuert. Wenn wir beispielsweise ein Array mit den Werten [2,3] übergeben, stellt es ein Strichmuster aus 2 Pixel-Strichen und 3 Pixel-Lücken dar, und dieses Muster wiederholt sich unendlich.

Beispiel 1

Kontrollieren Sie das Standard-Erscheinungsbild der Ecken

Sehen wir uns ein Codebeispiel an, das die Standarddarstellung der Steuerecken eines Textfeldobjekts beschreibt. Da wir das Attribut cornerDashArray nicht verwenden, wird das Strichmuster nicht angezeigt. 

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

Beispiel 2

Übergeben Sie das Attribut cornerDashArray als Schlüssel

In diesem Beispiel übergeben wir den Wert [1,2,1] an die Eigenschaft cornerDashArray. Das bedeutet, dass ein gestricheltes Muster mit einer 1 Pixel langen Linie, gefolgt von einer 2 Pixel langen Lücke, erstellt wird, dann erneut eine 1 Pixel lange Linie gefolgt von einer 1 Pixel langen Lücke usw. erstellt wird. 

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

Das obige ist der detaillierte Inhalt vonWie lege ich mit FabricJS ein Strichmuster fest, das die Ecken einer Textbox steuert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

String Array 字符串 对象
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Finden Sie minimale Löschungen in einer Zeichenfolge in JavaScriptNächster Artikel：Finden Sie minimale Löschungen in einer Zeichenfolge in JavaScript

In Verbindung stehende Artikel

Mehr sehen