Heim > Artikel > Web-Frontend > FabricJS – Wie entferne ich den Schatten des aktuellen Objekts im geklonten Bild?
FabricJS – Wie entferne ich den Schatten des aktuellen Objekts im geklonten Bild?
- 王林nach vorne
- 2023-09-16 13:13:271073Durchsuche
In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den aktuellen Objektschatten in einem geklonten Bild entfernen. 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 einfach anpassen, indem wir Eigenschaften wie Winkel, Deckkraft usw. anwenden. Um den Schatten des aktuellen Objekts im geklonten Bild zu entfernen, verwenden wir das Attribut withoutShadow.
Grammatik
cloneAsImage( callback: function, { withoutShadow: Boolean }: Object): fabric.Object
Parameter
Callback (optional) – Dieser Parameter ist eine Funktion, die die geklonte Image-Instanz als erstes Aufrufargument verwendet.
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 withoutShadow eine Eigenschaft ist.
Wahltaste
withoutShadow – Diese Eigenschaft akzeptiert einen Boolean-Wert, der bestimmt, ob der aktuelle Objektschatten entfernt wird. Dieses Attribut ist optional.
Verwenden Sie das Attribut withoutShadow und übergeben Sie ihm einen „wahren“ Wert
Beispiel
Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein geklontes Image-Objekt aussieht, wenn die Eigenschaft withoutShadow verwendet und ihr ein „wahrer“ Wert übergeben wird. Dabei wurde dem Bildobjekt eine Schatteneigenschaft zugewiesen. Da wir jedoch einen „wahren“ Wert an die Eigenschaft withoutShadow übergeben haben, wird der Objektschatten entfernt und unser geklontes Bild hat keinen Schatten mehr.
<!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 withoutShadow property and passing it a ‘true’ value</h2>
<p>You can see that clone image does not have a shadow</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: "black",
blur: 12,
});
// 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);
},
{
withoutShadow: true,
}
);
</script>
</body>
</html>
Verwenden Sie das Attribut withoutShadow und übergeben Sie ihm einen „falschen“ Wert
Beispiel
In diesem Beispiel haben wir das Attribut withoutShadow verwendet und ihm einen „falschen“ Wert übergeben. Daher wird der Schatten unseres geklonten Objekts nicht entfernt.
<!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 withoutShadow property and passing it a ‘false’ value</h2>
<p>You can see that clone image contains a shadow</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: "black",
blur: 12,
});
// 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);
},
{
withoutShadow: false,
}
);
</script>
</body>
</html>
Das obige ist der detaillierte Inhalt vonFabricJS – Wie entferne ich den Schatten des aktuellen Objekts im geklonten Bild?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!