如何使用 FabricJS 設定影像的不透明度?
在本教程中,我們將學習如何使用 FabricJS 設定影像的不透明度。我們可以透過建立fabric.Image的例項來建立影像物件。由於它是 FabricJS 的基本元素之一,因此我們也可以透過應用角度、不透明度等屬性輕鬆自定義它。為了設定影像的不透明度,我們使用opacity屬性。
語法
new fabric.Image( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String, { opacity: Number }: Object, callback: function)
引數
element − 此引數接受 HTMLImageElement、HTMLCanvasElement、HTMLVideoElement 或 String,表示影像元素。字串應為 URL,並將作為影像載入。
options (可選) − 此引數是一個Object,它為我們的物件提供額外的自定義。使用此引數,可以更改與影像物件相關的原點、筆劃寬度和許多其他屬性,其中不透明度是一個屬性。
callback (可選) − 此引數是一個function,在最終應用過濾器後將呼叫它。
選項鍵
opacity − 此屬性接受一個Number,允許我們控制物件的不透明度。opacity屬性的預設值為 1。
影像物件的預設外觀
示例
讓我們看一個程式碼示例,瞭解我們的影像物件在opacity屬性的預設值下是什麼樣子。我們不會在此示例中傳遞任何不透明度鍵,如下所示:
<!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>Default appearance of Image object</h2> <p>You can see that the image object is fully opaque</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 an Image object var image = new fabric.Image(imageElement, { top: 50, left: 50, }); // Add it to the canvas canvas.add(image); </script> </body> </html>
將opacity屬性作為鍵傳遞
示例
在此示例中,我們將瞭解如何為opacity屬性賦值會如何改變畫布中影像物件的不透明度。這裡我們使用 0.3 作為不透明度,因此使我們的影像物件看起來是半透明的,而不是完全不透明的。
<!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>Passing the opacity property as key</h2> <p>You can see our image object is not fully opaque</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 an Image object var image = new fabric.Image(imageElement, { top: 50, left: 50, opacity: 0.3, }); // Add it to the canvas canvas.add(image); </script> </body> </html>
廣告