如何使用 FabricJS 鎖定圓形的垂直縮放?


在本教程中,我們將學習如何使用 FabricJS 鎖定圓形的垂直縮放。就像我們可以在畫布上指定圓形物件的的位置、顏色、不透明度和尺寸一樣,我們還可以指定是否要停止物件的垂直縮放。這可以透過使用 `lockScalingY` 屬性來實現。

語法

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

引數

  • options(可選) − 此引數是一個物件,它為我們的圓形提供了額外的自定義選項。使用此引數,可以更改與物件相關的許多屬性,例如顏色、游標、描邊寬度等等,其中 `lockScalingY` 是一個屬性。

選項鍵

  • lockScalingY − 此屬性接受一個布林值。如果我們將其賦值為“true”,則物件的垂直縮放將被鎖定。

示例 1

畫布中圓形物件的預設行為

讓我們看一個例子來了解當不使用 `lockScalingY` 屬性時圓形物件的預設行為。在水平和垂直方向上縮放物件是可行的。

<!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>Locking the vertical scaling of circle using FabricJS</h2>
      <p>You can select the circle and scale it freely in any direction. This is the default behavior. Here we have not used the <b>lockScalingY</b> property, but by default, it is set to False. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            fill: "white",
            radius: 50,
            stroke: "black",
            strokeWidth: 5
         });

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

示例 2

將 `lockScalingY` 作為鍵並傳遞值為 'true'

在本例中,我們將看到如何使用 `lockScalingY` 屬性停止圓形物件垂直縮放的能力。正如我們所看到的,儘管我們可以水平縮放圓形物件,但我們不允許垂直執行相同的操作。

<!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>Locking the vertical scaling of circle using FabricJS</h2>
      <p>Select the object and try to scale it by stretching its controlling corners. You will notice that the object can be scaled in the horizontal direction, but its vertical scaling is locked. Here we have set <b>lockScalingY</b> to True. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            fill: "white",
            radius: 50,
            stroke: "black",
            strokeWidth: 5,
            lockScalingY: true
         });

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

更新於: 2022年5月25日

126 次檢視

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告