首頁 >web前端 >js教程 >如何使用 FabricJS 禁用圓的居中旋轉？

如何使用 FabricJS 禁用圓的居中旋轉？

PHPz轉載: 2023-08-31 11:21:06877瀏覽

如何使用 FabricJS 禁用圆的居中旋转？

在本教程中，我們將學習如何使用 FabricJS 停用 Circle 的居中旋轉。圓形是 FabricJS 提供的各種形狀之一。為了創建一個圓圈，我們將建立一個 Fabric.Circle 類別的實例並將其新增至畫布。預設情況下，FabricJS 中的所有物件都使用其中心作為旋轉點。但是，我們可以使用 centeredRotation 屬性來更改此行為。

語法

new fabric.Circle({ centeredRotation: Boolean }: Object)

參數

#選項（可選） - 此參數是一個物件為我們的圈子提供額外的客製化。使用此參數，可以變更與 centeredRotation 屬性相關的物件的顏色、遊標、描邊寬度等屬性。

選項鍵

#centeredRotation - 此屬性接受布林值值允許我們控制物件在透過控制旋轉時是否使用其變換原點作為中心點。其預設值為 True。

範例1

旋轉的預設行為 > FabricJS 中的Circle

讓我們來看一個描述圓形物件預設行為的範例。由於centeredRotation屬性預設為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>Disabling the centered rotation of circle using FabricJs</h2>
      <p>Select the object and rotate it by holding its controlling corner at the top. The circle will rotate around its center. It is the default behavior. Here we have not used the <b>centeredRotation</b> property but it is by default set to True. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
         });

         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

範例2

傳遞值為「false」的centeredRotation 鍵

現在我們已經看到了預設行為，讓我們看一段程式碼來了解當centeredRotation 屬性被指定為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>Disabling the centered rotation of circle using FabricJs</h2>
      <p>Select the object and rotate it by holding its controlling corner at the top. Now the circle will not rotate around its cente because we have used the <b>centeredRotation</b> property and set it False. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            centeredRotation: false
         });

         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

以上是如何使用 FabricJS 禁用圓的居中旋轉？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

对象 fabric

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何使用JavaScript/jQuery取消選取單選按鈕？下一篇：如何使用JavaScript/jQuery取消選取單選按鈕？

看更多