所属分类：web前端开发
在本文中，我们将学习如何设置自定义键以在 FabricJS 中启用/禁用统一缩放。在 FabricJS 中，当从角落拖动对象时，对象会按比例变换。这称为均匀缩放。但是，我们可以使用 uniScaleKey 启用/禁用此行为。
微博登录
QQ登录new fabric.Canvas(element: HTMLElement|String, { uniScaleKey: String }: Object)element - 此参数是 元素本身，可以使用 Document 派生。 getElementById() 或 元素本身的 id。 FabricJS 画布将在此元素上初始化。
选项（可选） - 此参数是一个对象，它为我们的画布提供额外的自定义。使用这个参数，可以改变与画布相关的颜色、光标、边框宽度等很多属性，其中uniScaleKey就是一个属性。它接受一个字符串值，该值确定哪个键切换统一缩放。它的默认值为shiftKey。
传递值为“altKey”的uniScaleKey属性
让我们看一下用于在 FabricJS 中禁用统一缩放的自定义键的代码示例。在这里，我们将 uniScaleKey 设置为“altKey”。
<!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>Setting a custom key to enable/disable uniform scaling on a canvas</h2>
<p>Hold the <b>alt</b> key and stretch the object diagonally. The object will scale non-uniformly. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
uniformScaling: true,
uniScaleKey: "altKey"
});
// Creating an instance of the fabric.Rect class
var circle = new fabric.Circle({
left: 215,
top: 100,
radius: 50,
fill: "orange",
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>传递值为“ctrlKey”的 uniScaleKey 属性
我们还可以传递“ctrlKey”' 作为 uniScaleKey 属性的值，因为它也是修饰键。如果为 uniScaleKey 指定了 NULL 值或不是修饰键的键，则其功能将被禁用。
在此示例中，uniformScaling 已被指定为 false 值，这意味着该功能已被禁用。一旦我们按下ctrlKey，均匀缩放就会再次启用。
<!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>Setting a custom key to enable/disable uniform scaling on a canvas </h2>
<p>Hold the <b>ctrl</b> key and stretch the object diagonally. It will scale uniformly. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
uniformScaling: false,
uniScaleKey: "ctrlKey"
});
// Creating an instance of the fabric.Rect class
var circle = new fabric.Circle({
left: 215,
top: 100,
radius: 50,
fill: "red",
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
