Wie deaktiviere ich einen bestimmten Kontrollpunkt eines Bildobjekts mit FabricJS?-js-Tutorial-php.cn

Wie deaktiviere ich einen bestimmten Kontrollpunkt eines Bildobjekts mit FabricJS?

WBOY

Freigeben： 2023-08-24 15:25:02

nach vorne

1469 Leute haben es durchsucht

如何使用 FabricJS 禁用 Image 对象的特定控制点？

In diesem Tutorial lernen wir, wie man bestimmte Kontrollpunkte eines Bildes deaktiviert Objekte mit FabricJS. Wir können ein Bildobjekt erstellen, indem wir eine Instanz 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 und mehr anwenden. Um bestimmte zu deaktivieren Für die Kontrollpunkte des Image-Objekts verwenden wir die Methode setControlVisible.

Grammatik

setControlVisible(controlKey: String, visible: Boolean): fabric.Object

Nach dem Login kopieren

Parameter

controlKey – Dieser Parameter akzeptiert einen String-Wert, der angibt Kontrolle. Mögliche Werte sind -
- 'tl' – Diese Eigenschaft akzeptiert einen booleschen-Wert, der das Steuerelement oben links aktiviert oder deaktiviert.
- 'tr' – Diese Eigenschaft akzeptiert einen booleschen-Wert, der das Steuerelement in der oberen rechten Ecke aktiviert oder deaktiviert.
- 'br' – Diese Eigenschaft akzeptiert einen booleschen-Wert, der das Steuerelement in der unteren rechten Ecke aktiviert oder deaktiviert.
- 'bl' – Diese Eigenschaft akzeptiert einen booleschen-Wert, der das Steuerelement in der unteren linken Ecke aktiviert oder deaktiviert.
- 'ml' – Diese Eigenschaft akzeptiert einen booleschen-Wert, der die Mitte-Links-Steuerung aktiviert oder deaktiviert.
- '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 Mitte-Oben-Rotation aktiviert oder deaktiviert. < /p>
visible – Dieser Parameter akzeptiert einen Boolean-Wert, der gesetzt wird, wenn „true“ Gibt an, ob das Steuerelement sichtbar und unsichtbar mit „false“ ist.

Verwenden Sie die Methode setControlVisible

Beispiel

Sehen wir uns ein Codebeispiel an, um die Ausgabe bei Verwendung der Methode

setControlVisible zu sehen. Die Methode setControlVisible legt die Sichtbarkeit des angegebenen Steuerelements fest. in diesem Fall, Da wir dem „br“-Steuerelement den falschen Wert übergeben haben, funktioniert das Steuerelement in der unteren rechten Ecke nicht Nicht mehr sichtbar.

<!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 setControlVisible method</h2>
   <p>
      You can select the image object to see that the bottom-right control is not visible
   </p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <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 setControlVisible method
      image.setControlVisible("br", false);
   </script>
</body>
</html>

Nach dem Login kopieren

Verwenden Sie die Methode

setControlVisible, um die Drehung in der Mitte oben zu deaktivieren Kontrolle

Beispiel

In diesem Beispiel verwenden wir die Methode

setControlVisible, um das „mtr“-Steuerelement zu deaktivieren Wird auch als Rotationssteuerung für die obere Mitte 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 setControlVisible method to disable the middle-top-rotate control
   </h2>
   <p>
      You can select the Image object to see that the middle-top-rotate control is not visible
   </p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <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 setControlVisible method
      image.setControlVisible("mtr", false);
   </script>
</body>
</html>

Nach dem Login kopieren

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