如何设置自定义键以在 FabricJS 中的画布上启用/禁用统一缩放?

fabricjsjavascripthtml5 canvas更新于 2025/1/28 5:32:17

在本文中，我们将学习如何设置自定义键以在 FabricJS 中启用/禁用统一缩放。在 FabricJS 中，对象从其角落拖动时会按比例变换。这称为统一缩放。但是，我们可以通过使用 uniScaleKey 启用/禁用此行为。

语法

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

参数

element − 此参数是 <canvas> 元素本身，可以使用 Document.getElementById() 或 <canvas> 元素本身的 id 派生。 FabricJS 画布将在此元素上初始化。

选项(可选) − 此参数是一个对象，可为我们的画布提供额外的自定义。使用此参数，可以更改与画布相关的属性(例如颜色、光标、边框宽度和许多其他属性)，其中 uniScaleKey 是一个属性。它接受一个字符串值，该值确定哪个键切换统一缩放。它的默认值是 shiftKey。

示例 1

将 uniScaleKey 属性的值作为"altKey"传递

让我们看一个自定义键的代码示例，以在 FabricJS 中禁用统一缩放。在这里，我们将 uniScaleKey 设置为 'altKey'。

<!DOCTYPE html>
<html>
<head>
   <!-- 添加 Fabric JS 库-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>设置自定义键以在画布上启用/禁用统一缩放</h2>
   <p>按住 <b>alt</b> 键并沿对角线拉伸对象。对象将非均匀缩放。</p>
   <canvas id="canvas"></canvas>
   <script>
   // 启动一个canvas实例
      var canvas = new fabric.Canvas("canvas", {
         uniformScaling: true,
         uniScaleKey: "altKey"
      });
      // 创建 fabric.Rect 类的实例
      var circle = new fabric.Circle({
         left: 215,
         top: 100,
         radius: 50,
         fill: "orange",
      });
      // 将其添加到画布
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
   </script>
</body>
</html>

示例 2

将 uniScaleKey 属性的值作为 'ctrlKey'

我们还可以将 'ctrlKey' 作为 uniScaleKey 属性的值传递，因为它也是一个修饰键。如果为 uniScaleKey 分配了 NULL 值或不是修饰键的键，则其功能将被禁用。

在此示例中，uniformScaling 被分配了一个 false 值，这意味着该功能被禁用。只要我们按下 ctrlKey，统一缩放就会再次启用。

<!DOCTYPE html>
<html>
<head>
   <!-- 添加 Fabric JS 库-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>设置自定义键以启用/禁用画布上的均匀缩放 </h2>
   <p>按住 <b>ctrl</b> 键并沿对角线拉伸对象。它将均匀缩放。</p>
   <canvas id="canvas"></canvas>
   <script>
      // 启动一个canvas实例
      var canvas = new fabric.Canvas("canvas", {
         uniformScaling: false,
         uniScaleKey: "ctrlKey"
      });
      // 创建 fabric.Rect 类的实例
      var circle = new fabric.Circle({
         left: 215,
         top: 100,
         radius: 50,
         fill: "red",
      });
      // 将其添加到画布
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>