如何使用 FabricJS 停用 Circle 的居中縮放？-js教程-PHP中文網

如何使用 FabricJS 停用 Circle 的居中縮放？

WBOY

發布： 2023-09-07 17:13:02

轉載

1418 人瀏覽過

如何使用 FabricJS 禁用 Circle 的居中缩放？

在本教學中，我們將學習如何使用 FabricJS 停用 Circle 的居中縮放。圓形是 FabricJS 提供的各種形狀之一。為了創建一個圓圈，我們必須創建一個 Fabric.Circle 類別的實例並將其添加到畫布中。透過控制項進行縮放時，為 centeredScaling 屬性指派一個真值，使用中心作為物件的變換原點。

語法

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

登入後複製

參數

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

選項鍵

centeredScaling - 此屬性接受布林值價值。當此屬性為True時，物件使用中心作為變換原點。

範例1

將centeredScaling作為鍵傳遞並為其指派一個「true」值

讓我們看一段程式碼，看看圓形物件在centeredScaling時的行為

em> 屬性已啟用。當我們放大物件時，變換的原點是圓心。

<!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 scaling of circle using FabricJs</h2>
      <p>Select the object and stretch it by holding one of its controlling corners. You will notice the circle scales up uniformly from its center. This is the default behavior. Here we have not used the <b>centeredScaling</b> property but by default, it is 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",
            centeredScaling: true
         });

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

登入後複製

範例 2

停用 centeredScaling 屬性

我們可以透過為其指定一個 false 值來停用 centeredScaling 屬性。它將迫使圓不再使用圓心作為變換中心。這是一個程式碼來證明這一點

<!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 scaling of circle using FabricJs</h2>
      <p>Select the object and stretch it by holding one of its controlling corners. You will notice that the circle is no longer scaling up uniformly from its center. Here we have used the <b>centeredScaling</b> property and set it False. </p>
      <canvas id="canvas"></canvas>

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

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

登入後複製

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