Heim > Artikel > Web-Frontend > Wie beschneide ich die Breite eines geklonten Bildes mit FabricJS?
Wie beschneide ich die Breite eines geklonten Bildes mit FabricJS?
- 王林nach vorne
- 2023-08-24 14:09:061048Durchsuche
In diesem Tutorial lernen wir, wie man die Breite eines geklonten Bildes zuschneidet FabricJS. Wir können ein Image-Objekt erstellen, indem wir eine Instanz von fabric.Image erstellen. seit Es ist eines der Grundelemente von FabricJS und wir können es auch einfach über die Anwendung anpassen Winkel, Deckkraft und andere Eigenschaften. Um die Breite im geklonten Bild zuzuschneiden, verwenden wir BreiteEigenschaft
Grammatik
cloneAsImage( callback: function, { width: Number}: Object): fabric.Object
Parameter
-
Callback (optional) – Dieser Parameter ist eine Funktion, die mit der geklonten Bildinstanz als erstem Parameter aufgerufen wird.
Optionen (optional) – Dieser Parameter ist ein optionales Objekt, das unserem geklonten Bild zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können wir einen Multiplikator festlegen, das geklonte Bild zuschneiden, die aktuelle Objekttransformation entfernen oder viele andere Eigenschaften ändern, von denen width eine Eigenschaft ist.
Wahltaste
width – Diese Eigenschaft akzeptiert einen Number-Wert, der die Zuschnitt-width darstellt. Dieses Attribut ist optional.
Verwenden Sie nicht das Attribut width
Beispiel
Schauen wir uns ein Codebeispiel an, um zu sehen, wie ein geklontes Bildobjekt angezeigt wird, wenn width Eigentum wird nicht genutzt. In diesem Fall wird das geklonte Bild nicht zugeschnitten.
<!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>Without using the width property</h2>
<p>You can see that no cropping has been applied to the clone image</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 a shadow object
var shadow = new fabric.Shadow({
color: "#308080",
blur: 3,
});
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
skewX: 20,
shadow: shadow,
});
// Using cloneAsImage method
image.cloneAsImage(function(Img) {
Img.set("top", 150);
canvas.add(Img);
});
</script>
</body>
</html>
Verwenden Sie die Eigenschaft width
BeispielIn diesem Beispiel haben wir das Attribut
width verwendet und ihm den Wert 245 übergeben Zuschneiden Breite. Daher wird die Breite beschnitten.
<!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 the width property</h2>
<p>You can see that cropping has been applied to the clone image</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 a shadow object
var shadow = new fabric.Shadow({
color: "#308080",
blur: 3,
});
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
skewX: 20,
shadow: shadow,
});
// Using cloneAsImage method
image.cloneAsImage(
function(Img) {
Img.set("top", 150);
Img.set("left", 150);
canvas.add(Img);
}, {
width: 245,
}
);
</script>
</body>
</html>
Das obige ist der detaillierte Inhalt vonWie beschneide ich die Breite eines geklonten Bildes mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!