如何使用 FabricJS 設定倍數來縮放克隆影像？

在本教程中，我們將學習如何使用 FabricJS 設定乘數來縮放複製影像。我們可以透過建立fabric.Image的實例來建立一個Image物件。由於它是 FabricJS 的基本元素之一，我們也可以透過應用角度、不透明度等屬性輕鬆自訂它。為了設定乘數來縮放克隆圖像，我們使用 multiplier 屬性.

文法

cloneAsImage( callback: function, { multiplier: Number}: Object): fabric.Object 

參數

• 回呼（可選） - 此參數是一個函數，將使用複製影像實例作為第一個呼叫論證。

• 選項（可選）- 此參數是一個可選對象，它為我們的複製影像提供額外的自訂。使用此參數，我們可以設定乘數、裁剪複製影像、刪除目前物件變換或可以更改許多屬性，其中乘數是一個屬性。

選項鍵

• multiplier - 此屬性接受一個 Number 值，該值表示縮放最終輸出影像的乘數。預設值為 1。

不使用multiplier屬性

範例

讓我們看一個程式碼範例，了解在不使用 multiplier 屬性時複製的 Image 物件如何顯示。在這種情況下，將使用預設的乘數值，即 1。

   
   



   
Without using the multiplier property
 
   
You can see that the clone image uses the default multiplier
   
   
   

 

使用乘數屬性

#範例

在此範例中，我們使用了 multiplier 屬性並向其傳遞值 2，以示範最終的複製影像將在 x 和 y 方向上縮放兩倍。

   
   



   
Using the multiplier property
   
You can see that the clone image has been scaled
   
   
   

 

以上是如何使用 FabricJS 設定倍數來縮放克隆影像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！