Heim > Artikel > Web-Frontend > Wie verstecke ich den Kontrollrahmen eines Dreiecks mit FabricJS?
Wie verstecke ich den Kontrollrahmen eines Dreiecks mit FabricJS?
- 王林nach vorne
- 2023-09-01 08:29:05565Durchsuche
In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den Kontrollrahmen eines Dreiecks ausblenden. Dreieck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Dreieck zu erstellen, müssen wir eine Instanz der Fabric.Triangle-Klasse erstellen und sie der Leinwand hinzufügen.
Wir können den Kontrollrahmen auf viele Arten anpassen, z. B. durch Hinzufügen einer bestimmten Farbe, eines gepunkteten Musters usw. Mithilfe des Attributs hasBorders können wir Ränder auch vollständig entfernen.
Syntax
new fabric.Triangle({ hasBorders: Boolean }: Object)Parameter
Optionen (optional)− Dieser Parameter ist ein Objekt, das unserem Dreieck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie Eigenschaften ändern, die sich auf das Objekt beziehen, für das hasBorders ein Attribut ist, wie z. B. Farbe, Cursor, Strichstärke und viele andere Eigenschaften.
hasBorders – Diese Eigenschaft akzeptiert einen booleschen-Wert, der beim Rendern von Kontrollrändern hilft. Bei der Einstellung „False“ wird der Kontrollrahmen nicht gerendert. Der Standardwert ist wahr.
Optionsschlüssel
Beispiel 1
Das Dreiecksobjekt steuert das Standarderscheinungsbild des Rahmens
Sehen wir uns ein Codebeispiel an, das das Standarderscheinungsbild des Dreiecksrahmens zeigt. Da der Standardwert der hasBorders-Eigenschaft True ist, werden Rahmen gerendert, wenn das Dreiecksobjekt ausgewählt wird.
<!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>Default appearance of the controlling borders of a triangle object</h2>
<p>Select the triangle to see its controlling borders</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 75,
width: 90,
height: 80,
fill: "#ff878d",
stroke: "#674846",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>Beispiel 2
HasBorders als Schlüssel übergeben und ihm einen „falschen“ Wert zuweisen
Wenn die Eigenschaft hasBorders mit dem Wert „False“ angegeben ist, werden Rahmen nicht mehr gerendert. Das bedeutet, dass der Kontrollrahmen ausgeblendet wird, wenn wir das Dreiecksobjekt auswählen.
<!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>Passing hasBorders as key and assigning it "false"</h2>
<p>Select the triangle and observe that its controlling borders have not been rendered.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 75,
width: 90,
height: 80,
fill: "#ff878d",
stroke: "#674846",
strokeWidth: 5,
hasBorders: false,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonWie verstecke ich den Kontrollrahmen eines Dreiecks mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!