如何使用 FabricJS 禁用椭圆的居中旋转?

椭圆形是 FabricJS 提供的各种形状之一。为了创建一个椭圆,我们必须创建一个 Fabric.Ellipse 类的实例并将其添加到画布中。默认情况下,FabricJS 中的所有对象都使用其中心作为旋转点。但是,我们可以使用 centeredRotation 属性来更改此行为。

语法

复制代码
new fabric.Ellipse({ centeredRotation: Boolean }: Object)

参数

  • 选项 (可选)- 此参数是一个对象< /em> 为我们的椭圆提供额外的定制。使用此参数,可以更改与 centeredRotation 属性相关的对象的颜色、光标、描边宽度和许多其他属性。

选项键

  • centeredRotation - 此属性接受布尔值* 值允许我们控制对象在通过控件旋转时是否使用其中心点作为变换原点。它的默认值为True*

示例1

FabricJS中椭圆旋转的默认行为

让我们看一个描述椭圆对象默认行为的示例。由于 centeredRotation 属性默认设置为"true",因此椭圆对象使用其中心作为旋转点。

复制代码
<!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>How to disable the centered rotation of Ellipse using FabricJS?</h2>
      <p>Select the object and rotate it. The ellipse will by default rotate around its center. This is the default behavior.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 215,
            top: 100,
            fill: "white",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
         });

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

示例 2

传递值为"false"的 centeredRotation 键

现在我们已经看到了默认行为,让我们看一下代码来了解当 centeredRotation 属性被分配"false"值时会发生什么。这里椭圆不再使用椭圆的中心作为旋转原点,而是使用其中一条边。

复制代码
<!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>How to disable the centered rotation of Ellipse using FabricJS?</h2>
      <p>Select the object and try to rotate it. The ellipse will not rotate around its center because we have set <b>centeredRotation</b> to False. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 215,
            top: 100,
            fill: "white",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            centeredRotation: false,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>
相关推荐
天天向上102412 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y28 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁34 分钟前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry35 分钟前
Fetch 笔记
前端·javascript
拾光拾趣录36 分钟前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟37 分钟前
vue3,你看setup设计详解,也是个人才
前端
Lefan41 分钟前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构
写不出来就跑路1 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui
OpenTiny社区1 小时前
盘点字体性能优化方案
前端·javascript