在本文中,我们将学习如何设置自定义键以在 FabricJS 中启用/禁用统一缩放。在 FabricJS 中,当从角落拖动对象时,对象会按比例变换。这称为均匀缩放。但是,我们可以使用 uniScaleKey 启用/禁用此行为。
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>
以上就是如何设置自定义键以启用/禁用 FabricJS 画布上的统一缩放?的详细内容,更多请关注php中文网其它相关文章!
已抢23781个
抢已抢118298个
抢已抢139528个
抢已抢6341个
抢已抢36682个
抢已抢66984个
抢