Heim > Artikel > Web-Frontend > Wie deaktiviere ich einen bestimmten Kontrollpunkt eines Bildobjekts mit FabricJS?
Wie deaktiviere ich einen bestimmten Kontrollpunkt eines Bildobjekts mit FabricJS?
- WBOYnach vorne
- 2023-08-24 15:25:021435Durchsuche
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
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.
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
BeispielSehen 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>
Verwenden Sie die Methode setControlVisible, um die Drehung in der Mitte oben zu deaktivieren Kontrolle
BeispielIn 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>
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!