Heim > Artikel > Web-Frontend > FabricJS – Wie deaktiviere ich mehrere spezifische Kontrollpunkte eines Linienobjekts?

FabricJS – Wie deaktiviere ich mehrere spezifische Kontrollpunkte eines Linienobjekts?

WBOYnach vorne: 2023-08-24 20:17:061129Durchsuche

FabricJS – 如何禁用 Line 对象的多个特定控制点？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS mehrere spezifische Kontrollpunkte eines Linienobjekts deaktivieren. Das Linienelement ist eines der Grundelemente, die in FabricJS bereitgestellt werden. Es wird verwendet, um gerade Linien zu erstellen. Da Linienelemente geometrisch eindimensional sind und keine Innenräume enthalten, werden sie nie gefüllt. Wir können ein Linienobjekt erstellen, indem wir eine Instanz von Fabric.Line erstellen, die x- und y-Koordinaten der Linie angeben und sie der Leinwand hinzufügen. Um mehrere spezifische Kontrollpunkte eines Linienobjekts zu deaktivieren, verwenden wir die Methode setControlsVisibility.

Syntax

 setControlsVisibility(options: Object): fabric.Object

Parameter

Optionen – Dieser Parameter akzeptiert einen Objektwert, der die Steuerung festlegt. Mögliche Werte sind -
- 'tl' – Diese Eigenschaft akzeptiert einen Boolean-Wert, der das Steuerelement oben links aktiviert oder deaktiviert.
- 'tr' – Diese Eigenschaft akzeptiert einen Boolean-Wert, der das Steuerelement oben rechts aktiviert oder deaktiviert.
- 'br' – Diese Eigenschaft akzeptiert einen booleschen-Wert, der die untere rechte Steuerung aktiviert oder deaktiviert.
- 'bl' – Diese Eigenschaft akzeptiert einen Booleschen Wert zum Aktivieren oder Deaktivieren des unteren linken Steuerelements Mitte-Links-Steuerung.
- 'mt' – Diese Eigenschaft akzeptiert einen booleschen-Wert, der das Mid-Top-Steuerelement aktiviert oder deaktiviert.
- 'mr' – Diese Eigenschaft akzeptiert einen booleschen-Wert, der die Mitte-Rechts-Steuerung aktiviert oder deaktiviert.
- 'mb' – Diese Eigenschaft akzeptiert einen booleschen-Wert, der die Mitte-unten-Steuerung aktiviert oder deaktiviert.
- 'mtr' – Diese Eigenschaft akzeptiert einen booleschen-Wert, der die Steuerung der Drehung in der Mitte oben aktiviert oder deaktiviert.
- Verwendung der setControlsVisibilityMethode
  Beispiel
Sehen wir uns ein Codebeispiel an, um die Ausgabe bei Verwendung der

Methode zu sehen. Die Methode

setControlsVisibility legt die Sichtbarkeit mehrerer angegebener Steuerelemente fest. Da wir in diesem Beispiel einen falschen Wert an die Steuerelemente „tl“ und „bl“ übergeben haben, werden die Steuerelemente oben links und unten links deaktiviert.

<!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>Using setControlsVisibility method</h2>
   <p>
      You can select the line object to see that the bottom-left and top-left controls have been disabled
   </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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 6,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using setControlsVisibility method
      line.setControlsVisibility({
         tl: false,
         bl: false,
      });
   </script>
</body>
</html>

Deaktivieren Sie die Mitte-oben-Rotationssteuerung mit der Methode

setControlsVisibility

<!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>Using setControlsVisibility method</h2>
   <p>
      You can select the line object to see that the middle-top-rotate control has been disabled
   </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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 6,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using setControlsVisibility method
      line.setControlsVisibility({
         'mtr': false,
      });
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonFabricJS – Wie deaktiviere ich mehrere spezifische Kontrollpunkte eines Linienobjekts?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie deaktiviere ich die IText-Selektivität mit FabricJS?Nächster Artikel：Wie deaktiviere ich die IText-Selektivität mit FabricJS?

In Verbindung stehende Artikel

Mehr sehen