Heim >Web-Frontend >js-Tutorial >Wie deaktiviere ich mehrere spezifische Kontrollpunkte eines Bildobjekts mit FabricJS?

Wie deaktiviere ich mehrere spezifische Kontrollpunkte eines Bildobjekts mit FabricJS?

王林nach vorne: 2023-08-22 12:45:071433Durchsuche

In diesem Tutorial erfahren Sie, wie Sie mehrere spezifische Kontrollpunkte deaktivieren.

Erstellen Sie Bildobjekte mit FabricJS. Wir können ein Bildobjekt erstellen, indem wir eine Instanz von erstellen Stoff.Bild. Da es eines der Grundelemente von FabricJS ist, können wir es auch problemlos Passen Sie es an, indem Sie Eigenschaften wie Winkel, Deckkraft usw. anwenden. Um mehrere zu deaktivieren Für Bildobjekte bestimmter Kontrollpunkte verwenden wir die Methode setControlsVisibility

Grammatik

setControlsVisibility(options: Object): fabric.Object

Parameter

options − Dieser Parameter akzeptiert einen Object-Wert, der zum Festlegen des sichtbaren Status verwendet wird Kontrollen. Mögliche Werte sind −
- ‘tl’ − Diese Eigenschaft akzeptiert einen booleschen-Wert, um das Steuerelement in der oberen linken Ecke zu aktivieren oder zu deaktivieren
- ‘tr’ – Diese Eigenschaft akzeptiert einen boolean-Wert, um das Steuerelement in der oberen rechten Ecke zu aktivieren oder zu deaktivieren
- ‘br’ − Diese Eigenschaft akzeptiert einen Booleschen Wert, um das Steuerelement in der unteren rechten Ecke zu aktivieren oder zu deaktivieren „bl“ – Diese Eigenschaft akzeptiert einen booleschen Wert, um das Steuerelement in der unteren linken Ecke zu aktivieren oder zu deaktivieren „ml“ – Diese Eigenschaft akzeptiert einen booleschen-Wert, um das Steuerelement in der Mitte links zu aktivieren oder zu deaktivieren
- ‘mt’ − Diese Eigenschaft akzeptiert einen Booleschen Wert, um das mittlere Steuerelement zu aktivieren oder zu deaktivieren
- ‘mr’ − Diese Eigenschaft akzeptiert einen Booleschen Wert, um die Mitte-Rechts-Steuerung zu aktivieren oder zu deaktivieren „mb“ – Diese Eigenschaft akzeptiert einen booleschen-Wert, um das mittlere/untere Steuerelement zu aktivieren oder zu deaktivieren
- ‘mtr’ − Diese Eigenschaft akzeptiert einen booleschen-Wert, um die Steuerung der Rotation in der Mitte oben zu aktivieren oder zu deaktivieren

Verwenden Sie die setControlsVisibility-Methode

Beispiel

Sehen wir uns ein Codebeispiel an, um die Ausgabe zu sehen, wenn die Methode setControlsVisibility aufgerufen wird verwenden. Die Methode setControlsVisibility legt die Sichtbarkeit mehrerer angegebener Steuerelemente fest. existieren In diesem Fall, da wir die Steuerelemente „tl“ und „bl“ auf falsche Werte gesetzt haben, oben links Und die Steuerelemente unten links werden 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 image object to see that the bottom-left and top-left controls have been disabled
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Wie deaktiviere ich mehrere spezifische Kontrollpunkte eines Bildobjekts mit FabricJS?" >
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using setControlsVisibility method
      image.setControlsVisibility({
         tl: false,
         bl: false,
      });
   </script>
</body>
</html>

Verwenden Sie die Methode setControlsVisibility, um die mittlere obere Drehung zu deaktivieren

Die Übersetzung von Kontrolle lautet: Kontrolle

Beispiel

In diesem Beispiel verwenden wir die Methode setControlsVisibility, um das „mtr“-Steuerelement zu deaktivieren Dies wird auch als Mid-Upper-Rotationssteuerung bezeichnet.

<!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 to disable the middle-top-rotate control
   </h2>
   <p>
      You can select the image object to see that the middle-top-rotate control has been disabled
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Wie deaktiviere ich mehrere spezifische Kontrollpunkte eines Bildobjekts mit FabricJS?" >
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using setControlsVisibility method
      image.setControlsVisibility({
         mtr: false,
      });
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie deaktiviere ich mehrere spezifische Kontrollpunkte eines Bildobjekts mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Object 对象 tr fabric mr

Stellungnahme：

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

Vorheriger Artikel：Wie kann der Sticky-Hover-Effekt für Tasten auf Touch-Geräten verhindert werden?Nächster Artikel：Wie kann der Sticky-Hover-Effekt für Tasten auf Touch-Geräten verhindert werden?

In Verbindung stehende Artikel

Mehr sehen