Wie verstecke ich die Kontrollecken eines Rechtecks mit FabricJS?-js-Tutorial-php.cn

Wie verstecke ich die Kontrollecken eines Rechtecks mit FabricJS?

王林

Freigeben： 2023-08-31 18:05:08

nach vorne

677 Leute haben es durchsucht

如何使用 FabricJS 隐藏矩形的控制角？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS die Kontrollecken eines Rechtecks ausblenden. Rechteck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Rechteck zu erstellen, müssen wir eine Instanz der Fabric.Rect-Klasse erstellen und sie der Leinwand hinzufügen. Mit den Kontrollecken eines Objekts können wir seine Proportionen vergrößern oder verkleinern, es strecken oder seine Position ändern.

Wir können die Kontrollecke auf viele Arten anpassen, z. B. indem wir ihr eine bestimmte Farbe hinzufügen, ihre Größe ändern und mehr. Wir können sie auch mit der hasControls-Eigenschaft ausblenden.

Syntax

new fabric.Rect({ hasControls: Boolean }: 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 wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften ändern, die sich auf das Objekt beziehen, für das hasControls ein Attribut ist.

Option Key

hasControls – Diese Eigenschaft akzeptiert einen Boolean-Wert, der es uns ermöglicht, die Kontrollecken des aktiv ausgewählten Objekts anzuzeigen oder auszublenden. Der Standardwert ist true.

Beispiel 1

Kontrollieren Sie die Standarddarstellung der Ecken.

Sehen wir uns das Codebeispiel an, das die Standarddarstellung der Kontrollecken zeigt. Da der Standardwert der hasControls-Eigenschaft True ist, werden die Control-Ecken nicht ausgeblendet.

<!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 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 rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         strokeWidth: 3,
         stroke: "#4169e1",
         fill: "grey",
         padding: 15,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Nach dem Login kopieren

Beispiel 2

Übergeben Sie hasControls als Schlüssel und weisen Sie ihm einen falschen Wert zu

In diesem Beispiel werden wir sehen, wie man Control-Ecken mithilfe des hasControls-Attributs ausblendet. Wir müssen dem hasControls-Schlüssel den Wert False zuweisen. Dadurch werden die Kontrollecken ausgeblendet.

<!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 hasControls as key and assigning it a False value</h2>
   <p>Select the rectangle and observe that its controlling corners are hidden</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,
         strokeWidth: 3,
         stroke: "#4169e1",
         fill: "grey",
         padding: 15,
         hasControls: false,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Nach dem Login kopieren

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

Wie verstecke ich die Kontrollecken eines Rechtecks ​​mit FabricJS?

Syntax

Parameter

Option Key

Beispiel 1

Beispiel 2

Wie verstecke ich die Kontrollecken eines Rechtecks mit FabricJS?