在本教學中,我們將使用 FabricJS 設定橢圓的旋轉角度。橢圓形是 FabricJS 提供的各種形狀之一。為了創建一個橢圓,我們必須建立一個 Fabric.Ellipse 類別的實例並將其新增到畫布中。 FabricJS 中的角度屬性定義了物件的 2D 旋轉角度。我們也有 centeredRotation 屬性,它允許我們使用橢圓的中心點作為變換的原點。
new fabric.Ellipse({ angle: Number, centeredRotation: Boolean }: Object)
#選項(可選)- 此參數是一個物件< /em> 為我們的橢圓提供額外的客製化。使用此參數可以更改與畫布相關的顏色、遊標、描邊寬度和許多其他屬性,其中角度和centeredRotation是屬性。
# - 此屬性接受數字< /em> 指定橢圓的旋轉角度(以度為單位)。
centeredRotation - 這屬性接受一個布林值,該值決定橢圓的中心是否是變換的原點。
傳遞< em>angle 作為具有自訂值的鍵,並停用橢圓的居中旋轉
讓我們舉個例子,在FabricJS 中設定橢圓的旋轉角度。負角度指定逆時針方向,而正角度指定順時針方向。由於我們為centeredRotation分配了一個「false」值,因此橢圓將在使用其角點作為旋轉中心的同時進行旋轉。
How to set the angle of rotation of an Ellipse using FabricJS?
Select the object and rotate it. Here we have set the angle of rotation at -40
啟用橢圓形居中旋轉
#從這個範例我們可以看出,透過設定centeredRotation 屬性為“true”,我們的橢圓現在使用其中心作為旋轉中心。在版本 1.3.4 之前,centeredScaling 和 centeredRotation 包含在一個名為 centerTransform 的屬性中。
How to set the angle of rotation of an Ellipse using FabricJS?
Select the object and rotate it. You will notice that the object rotates around its center as we have set the centeredRotation property to True.
以上是如何使用 FabricJS 設定橢圓的旋轉角度?的詳細內容。更多資訊請關注PHP中文網其他相關文章!