Wie lege ich mit FabricJS ein Strichmuster für die Kontrollecken eines Rechtecks fest?-js-Tutorial-php.cn

Wie lege ich mit FabricJS ein Strichmuster für die Kontrollecken eines Rechtecks fest?

WBOY

Freigeben： 2023-08-30 15:21:03

nach vorne

980 Leute haben es durchsucht

如何使用 FabricJS 为矩形的控制角设置虚线图案？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS ein Punktmuster implementieren, das die Ecken eines Rechtecks 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 angeben, das die Ecken steuert.

Syntax

new fabric.Rect({ cornerDashArray: Array }: Object)

Nach dem Login kopieren

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt , das unserem Rechteck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie Eigenschaften ändern, die sich auf das Objekt beziehen, dessen cornerDashArray ein Attribut ist, wie z. B. Farbe, Cursor, Strichstärke und viele andere Eigenschaften.

Option Key

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

Standarddarstellung von Kontrollecken

Sehen wir uns ein Codebeispiel an, das die Standarddarstellung von Kontrollecken beschreibt rechteckiges Objekt. Da wir das Attribut „cornerDashArray“ nicht verwenden, gibt es kein Strichmuster wird 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>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>

Nach dem Login kopieren

Beispiel 2

Übergabe der CornerDashArray-Eigenschaft als Schlüssel

In diesem Beispiel übergeben wir den Wert [1,2,1] an die CornerDashArray-Eigenschaft. Das Das bedeutet, dass ein gepunktetes Muster mit einer 1 Pixel langen Linie gefolgt von erstellt wird Eine Lücke von 2 Pixeln, dann erneut eine 1 Pixel lange Linie zeichnen, danach wird eine Lücke von 1 Pixeln gezeichnet Produktion und mehr.

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie lege ich mit FabricJS ein Strichmuster für die Kontrollecken eines Rechtecks fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!