在本教程中，我们将学习如何使用 FabricJS 锁定椭圆的水平倾斜。正如我们可以指定画布中椭圆对象的位置、颜色、不透明度和尺寸一样，我们也可以指定是否要停止水平倾斜对象。这可以通过使用lockSkewingX属性来完成。
语法
new fabric.Ellipse({ lockSkewingX : Boolean }: Object)
参数
选项（可选）- 此参数是一个提供额外自定义的对象到我们的椭圆。使用此参数，可以更改与 lockSkewingX 为属性的对象相关的颜色、光标、描边宽度和许多其他属性。
选项键
lockSkewingX – 此属性接受布尔值强>值。如果我们为其指定“true”值，则对象的水平倾斜将被锁定。
示例 1
默认行为画布中的 Ellipse 对象
稿定AI设计
AI自动去水印、背景消除、批量抠人像工具
76 查看详情
让我们通过一个示例来了解未使用 lockSkewingX 属性时 Ellipse 对象的默认行为。通过按住 Shift 键，然后沿水平或垂直方向拖动，可以使对象在水平和垂直方向上倾斜。
Locking the horizontal skewing of Ellipse using FabricJS
Select the object. Hold the "shift" and try to stretch the object (not diagonally). You can skew the object both horizontally and vertically. This is the default behavior.
// Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); // Initiate an ellipse instance var ellipse = new fabric.Ellipse({ left: 115, top: 50, fill: "white", rx: 80, ry: 50, stroke: "black", strokeWidth: 5, }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250);
示例 2
将 lockSkewingX 作为具有“true”值的键传递
在此示例中，我们将了解如何可以使用lockSkewingX属性来停止Ellipse对象水平倾斜的能力。虽然我们可以垂直倾斜椭圆对象，但我们不允许水平执行相同的操作。
How to lock the horizontal skewing of Ellipse using FabricJS?
Select the object; hold the "shift" key and try to stretch the object horizontally. You cannot skew the object horizontally because we have set lockSkewingX to True.
// Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); // Initiate an ellipse instance var ellipse = new fabric.Ellipse({ left: 115, top: 50, fill: "white", rx: 80, ry: 50, stroke: "black", strokeWidth: 5, lockSkewingX: true, }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250);
以上就是如何使用 FabricJS 锁定 Ellipse 的水平倾斜？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/529295.html
微信扫一扫 
支付宝扫一扫 
