FabricJS – Wie entferne ich den Schatten des aktuellen Objekts im geklonten Bild?-js-Tutorial-php.cn

FabricJS – Wie entferne ich den Schatten des aktuellen Objekts im geklonten Bild?

王林

Freigeben： 2023-09-16 13:13:27

nach vorne

1100 Leute haben es durchsucht

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!