首頁 > web前端 > js教程 > 主體

如何使用 FabricJS 設定橢圓的旋轉角度?

PHPz
發布: 2023-09-10 13:29:02
轉載
1340 人瀏覽過

如何使用 FabricJS 设置椭圆的旋转角度?

在本教學中,我們將使用 FabricJS 設定橢圓的旋轉角度。橢圓形是 FabricJS 提供的各種形狀之一。為了創建一個橢圓,我們必須建立一個 Fabric.Ellipse 類別的實例並將其新增到畫布中。 FabricJS 中的角度屬性定義了物件的 2D 旋轉角度。我們也有 centeredRotation 屬性,它允許我們使用橢圓的中心點作為變換的原點。

語法

new fabric.Ellipse({ angle: Number, centeredRotation: Boolean }: Object)
登入後複製

參數

  • #選項(可選)- 此參數是一個物件< /em> 為我們的橢圓提供額外的客製化。使用此參數可以更改與畫布相關的顏色、遊標、描邊寬度和許多其他屬性,其中角度和centeredRotation是屬性。

< h2>選項鍵
  • # - 此屬性接受數字< /em> 指定橢圓的旋轉角度(以度為單位)。

  • centeredRotation - 這屬性接受一個布林值,該值決定橢圓的中心是否是變換的原點。

範例1

傳遞< 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

登入後複製

範例2

啟用橢圓形居中旋轉

#從這個範例我們可以看出,透過設定centeredRotation 屬性為“true”,我們的橢圓現在使用其中心作為旋轉中心。在版本 1.3.4 之前,centeredScalingcenteredRotation 包含在一個名為 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中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!