首頁 >web前端 >js教程 >如何使用FabricJS禁用矩形的居中縮放？

如何使用FabricJS禁用矩形的居中縮放？

WBOY轉載: 2023-08-24 20:53:071241瀏覽

在本教學中，我們將學習如何使用FabricJS停用矩形的居中縮放。矩形是FabricJS提供的各種形狀之一。為了建立一個矩形，我們需要建立一個fabric.Rect類別的實例，並將其新增到畫布上。當透過控制器進行縮放時，將centeredScaling屬性賦值為true，使用中心作為物件的變換起點。

語法

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

Parameters

#Options (optional) − This parameter is an #Object which provides additional customizations to our rectangle. Using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be changed related to the object of which centeredScaling is properedScaling#. ##Options Keys

centeredScaling

Boolean
value. When this property is true, the object uses the center as its origin of transformation.Example 1

Passing

centeredScaling

as key and assigning a “true” value to it

Let's see a code example to see how a rectangle object behaves when centeredScaling property is enabled. When we scale the object up the origin of transformation is the center we scale the

範例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>Passing centeredScaling as key and assigning a "true" value to it</h2>
   <p>Try scaling the rectangle to see that centered scaling has been enabled</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         centeredScaling: true,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

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

Boolean Object using Property 对象 this fabric

陳述：

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

上一篇：如何在 React Native 中顯示載入指示器？下一篇：如何在 React Native 中顯示載入指示器？

看更多