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

WBOY 转载: 2023-09-07 17:13:02 971浏览

在本教程中，我们将学习如何使用 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中文网其它相关文章！

PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除

上一条：如何使用 FabricJS 取消 Line 中的运行动画？下一条：JavaScript 程序检查给定数字是否是 2 的幂