Wie deaktiviere ich mehrere spezifische Kontrollpunkte eines Bildobjekts mit FabricJS?-js-Tutorial-php.cn

Wie deaktiviere ich mehrere spezifische Kontrollpunkte eines Bildobjekts mit FabricJS?

王林

Freigeben： 2023-08-22 12:45:07

nach vorne

1461 Leute haben es durchsucht

Wie deaktiviere ich mehrere spezifische Kontrollpunkte eines Bildobjekts mit FabricJS?

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!