Heim >Web-Frontend >js-Tutorial >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:271201Durchsuche

FabricJS – 如何删除克隆图像中当前对象的阴影？

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!

值传递对象 fabric

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie finde ich mit FabricJS die wahren Mittelpunktkoordinaten eines Linienobjekts?Nächster Artikel：Wie finde ich mit FabricJS die wahren Mittelpunktkoordinaten eines Linienobjekts?

In Verbindung stehende Artikel

Mehr sehen