Heim > Artikel > Web-Frontend > 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:071375Durchsuche
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 setControlsVisibilityGrammatik
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: KontrolleBeispiel
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!