FabricJS – 如何在克隆影像中移除當前物件的陰影?
在本教程中,我們將學習如何使用 FabricJS 在克隆影像中移除當前物件的陰影。我們可以透過建立 fabric.Image 的例項來建立 Image 物件。由於它是 FabricJS 的基本元素之一,我們還可以透過應用角度、不透明度等屬性輕鬆自定義它。為了移除克隆影像中當前物件的陰影,我們使用 withoutShadow 屬性。
語法
cloneAsImage( callback: function, { withoutShadow: Boolean }: Object): fabric.Object
引數
callback(可選) - 此引數是一個 function,它將使用克隆的影像例項作為第一個引數來呼叫。
options(可選) - 此引數是一個可選的 Object,它為我們的克隆影像提供額外的自定義。使用此引數,我們可以設定乘數,裁剪克隆影像,移除當前物件的變換,或者可以更改許多其他屬性,其中 withoutShadow 就是一個屬性。
選項鍵
withoutShadow - 此屬性接受一個 Boolean 值,用於確定是否移除當前物件的陰影。此屬性是可選的。
使用 withoutShadow 屬性並傳遞“true”值
示例
讓我們來看一個程式碼示例,說明當使用 withoutShadow 屬性並向其傳遞“true”值時,克隆的 Image 物件是如何顯示的。在這裡,影像物件已分配了陰影屬性。但是,由於我們向 withoutShadow 屬性傳遞了“true”值,因此該物件的陰影將被移除,並且我們的克隆影像將不再具有陰影。
<!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://tutorialspoint.tw/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>
使用 withoutShadow 屬性並傳遞“false”值
示例
在此示例中,我們使用了 withoutShadow 屬性並向其傳遞了“false”值。因此,克隆物件的陰影將不會被移除。
<!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://tutorialspoint.tw/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>
廣告