在本文中，我们将学习如何设置自定义键以在 FabricJS 中启用/禁用统一缩放。在 FabricJS 中，当从角落拖动对象时，对象会按比例变换。这称为均匀缩放。但是，我们可以使用 uniScaleKey 启用/禁用此行为。
语法
new fabric.Canvas(element: HTMLElement|String, { uniScaleKey: String }: Object)
参数
element – 此参数是 元素本身，可以使用 Document 派生。 getElementById() 或 元素本身的 id。 FabricJS 画布将在此元素上初始化。
选项（可选） – 此参数是一个对象，它为我们的画布提供额外的自定义。使用这个参数，可以改变与画布相关的颜色、光标、边框宽度等很多属性，其中uniScaleKey就是一个属性。它接受一个字符串值，该值确定哪个键切换统一缩放。它的默认值为shiftKey。
示例1
传递值为“altKey”的uniScaleKey属性
让我们看一下用于在 FabricJS 中禁用统一缩放的自定义键的代码示例。在这里，我们将 uniScaleKey 设置为“altKey”。
Logome
AI驱动的Logo生成工具
183 查看详情
Setting a custom key to enable/disable uniform scaling on a canvas
Hold the alt key and stretch the object diagonally. The object will scale non-uniformly.
// 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);
示例 2
传递值为“ctrlKey”的 uniScaleKey 属性
我们还可以传递“ctrlKey”‘ 作为 uniScaleKey 属性的值，因为它也是修饰键。如果为 uniScaleKey 指定了 NULL 值或不是修饰键的键，则其功能将被禁用。
在此示例中，uniformScaling 已被指定为 false 值，这意味着该功能已被禁用。一旦我们按下ctrlKey，均匀缩放就会再次启用。
Setting a custom key to enable/disable uniform scaling on a canvas
Hold the ctrl key and stretch the object diagonally. It will scale uniformly.
// 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);
以上就是如何设置自定义键以启用/禁用 FabricJS 画布上的统一缩放？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/830041.html
微信扫一扫 
支付宝扫一扫 
