如何设置自定义键以在 FabricJS 中的画布上启用/禁用统一缩放?
fabricjsjavascripthtml5 canvas
在本文中，我们将学习如何设置自定义键以在 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>
