首頁 > 文章 > web前端 > 如何使用 FabricJS 透過角點非均勻地調整物件大小？

如何使用 FabricJS 透過角點非均勻地調整物件大小？

WBOY轉載: 2023-08-25 10:13:07995瀏覽

如何使用 FabricJS 通过角点非均匀地调整对象大小？

在本文中，我們將學習如何使用 FabricJS 透過角點非均勻地調整物件的大小。在 FabricJS 中，當從角落拖曳物件時，物件會按比例變換。但是，我們可以透過按 uniScaleKey 來控制此行為。

語法

new fabric.Canvas(element: HTMLElement|String, { uniScaleKey: String }: Object)

參數

# - 此參數是
選項（可選） - 此參數是一個對象，它提供對我們的畫布進行額外的自訂。使用這個參數，可以改變與畫布相關的顏色、遊標、邊框寬度等許多屬性，其中uniScaleKey就是一個屬性。它接受一個字串值，該值指示哪個鍵切換統一縮放。它的預設值為shiftKey。可能的鍵值為： altKey, shiftKey 和 ctrlKey。

範例1

按shift 鍵停用均勻縮放

當物件在保持縱橫比的情況下透過拖曳邊緣進行變換時，我們說該物件是均勻縮放的。 uniScaleKey 允許我們當場控制該行為。預設情況下，FabricJS 中的物件會按比例縮放。讓我們看一個程式碼範例，了解按下 shift 鍵時物件如何非均勻縮放。

<!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>Resizing an object non-uniformly via corner points</h2>
   <p>Hold the <b>shift</b> key and drag the object from its corners. The object will resize non-uniformly. </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 70,
         top: 90,
         radius: 40,
         fill: "#006400",
      });
      // Adding it to the canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

範例2

將uniScaleKey的值改為ctrlKey

雖然其預設值為 shiftKey#也可以使用數值：'ctrlKey' 和'

altKey'。如果指定了 NULL 或任何其他鍵，則該功能將被停用。 ###

<!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>Resizing an object non-uniformly via corner points</h2>
   <p>Hold the <b>ctrl</b> key and drag the object from its corners. The object will resize non-uniformly. </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         uniScaleKey: "ctrlKey",
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 70,
         top: 90,
         radius: 40,
         fill: "#006400",
      });
      // Adding it to the canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

###

以上是如何使用 FabricJS 透過角點非均勻地調整物件大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

NULL 字符串对象

陳述：

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

上一篇：解釋 JavaScript 中定時器的工作原理下一篇：解釋 JavaScript 中定時器的工作原理

看更多