Heim > Artikel > Web-Frontend > Wie lege ich mit FabricJS Eigenschaften eines Bildobjekts aus Optionen fest?
Wie lege ich mit FabricJS Eigenschaften eines Bildobjekts aus Optionen fest?
- 王林nach vorne
- 2023-08-23 08:01:041471Durchsuche
In diesem Tutorial lernen wir, wie man die Eigenschaften eines Bildobjekts über die Optionen festlegt
Verwenden Sie FabricJS. Wir können ein Image-Objekt erstellen, indem wir eine Instanz von fabric.Image erstellen Da es eines der Grundelemente von FabricJS ist, können wir es auch leicht ändern, indem wir es anpassen Wenden Sie Eigenschaften wie Winkel, Deckkraft usw. an. um die Eigenschaften des Bildobjekts festzulegen Optionen verwenden wir die Methode setOptions.Grammatik
setOptions(options: Object)
Parameter
options (optional) − Dieser Parameter ist ein Objekt, das zusätzliche bereitstellt Passen Sie unser Objekt an. Verwenden Sie diesen Parameterursprung, die Strichstärke und viele andere Dinge Andere Eigenschaften, die sich auf das Bildobjekt beziehen, können geändert werden.
Standarddarstellung von Bildobjekten
Die chinesische Übersetzung vonBeispiel
lautet:Beispiel
Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein Image-Objekt angezeigt wird, wenn setOptions vorhanden ist.
Methode nicht verwendet.<!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 image object</h2>
<p>You can see the default appearance of Image object</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="max-width:90%" / alt="Wie lege ich mit FabricJS Eigenschaften eines Bildobjekts aus Optionen fest?" >
<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);
// Add it to the canvas
canvas.add(image);
</script>
</body>
</html>
Verwenden Sie die setOptionsMethode
Die chinesische Übersetzung vonBeispiel
lautet:Beispiel
In diesem Beispiel verwenden wir die Methode setOptions, um die Eigenschaften des Bildes festzulegen
Hier haben wir einen 4-Pixel-Farbstrich „Grün“ angewendet und neu angepasst Optionen. Hier haben wir einen 4-Pixel-Strich mit der Farbe „Grün“ angewendet und dessen Größe geändert Legen Sie die Position des Bildobjekts auf einen oberen Wert von 30 und einen linken Wert von 100 fest<!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 setOptions method</h2>
<p>
You can see that the object's properties have been set using setOptions method
</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="max-width:90%" / alt="Wie lege ich mit FabricJS Eigenschaften eines Bildobjekts aus Optionen fest?" >
<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);
// Using setOptions method
image.setOptions({
left: 100,
top: 30,
stroke: "green",
strokeWidth: 4,
});
// Add it to the canvas
canvas.add(image);
</script>
</body>
</html>
Das obige ist der detaillierte Inhalt vonWie lege ich mit FabricJS Eigenschaften eines Bildobjekts aus Optionen fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!