FabricJS – 如何在克隆影像中移除當前物件的變換?
在本教程中,我們將學習如何使用FabricJS在克隆影像中移除當前物件的變換(縮放、角度、翻轉和傾斜)。我們可以透過建立fabric.Image的例項來建立一個影像物件。由於它是FabricJS的基本元素之一,我們也可以透過應用角度、不透明度等屬性輕鬆地對其進行自定義。為了移除克隆影像中的當前物件變換,我們使用withoutTransform屬性。
語法
cloneAsImage( callback: function, { withoutTransform: Boolean }: Object): fabric.Object
引數
callback(可選)– 此引數是一個函式,它將以克隆的影像例項作為第一個引數被呼叫。
options(可選)– 此引數是一個可選的物件,它為我們的克隆影像提供額外的自定義。使用此引數,我們可以設定乘數,裁剪克隆影像,移除當前物件的變換,或者可以更改許多其他屬性,其中withoutTransform就是一個屬性。
選項鍵
withoutTransform – 此屬性接受一個布林值,用於確定是否移除當前物件的變換。此屬性是可選的。
使用withoutTransform屬性並傳遞“true”值
示例
讓我們來看一個程式碼示例,說明當使用withoutTransform屬性並向其傳遞“true”值時,克隆的影像物件是如何顯示的。影像物件已經具有傾斜變換。但是,由於我們向withoutTransform屬性傳遞了“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 withoutTransform property and passing it a ‘true’ value</h2> <p>You can see that clone image does not have skew transformation</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: "#308080", blur: 3, }); // 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); }, { withoutTransform: true, } ); </script> </body> </html>
使用withoutTransform屬性並傳遞“false”值
示例
在此示例中,我們使用了withoutTransform屬性並向其傳遞了“false”值。這意味著,無論我們的影像物件具有什麼物件變換,它的克隆影像也將包含這些變換。因此,由於我們的影像物件具有20的水平傾斜角(skewX),並且withoutTransform被傳遞了“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 withoutTransform property and passing it a ‘false’ value</h2> <p>You can see that clone image contains skew transformation</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: "#308080", blur: 3, }); // 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); }, { withoutTransform: false, } ); </script> </body> </html>
廣告