在本教程中，我们将学习如何使用 FabricJS 锁定圆的垂直倾斜。正如我们可以指定画布中圆形对象的位置、颜色、不透明度和尺寸一样，我们也可以指定是否要停止垂直倾斜对象。这可以通过使用lockSkewingY属性来完成。
语法
new fabric.Circle({ lockSkewingY : Boolean }: Object)
参数
选项（可选） – 此参数是一个对象 为我们的圈子提供额外的定制。使用此参数，可以更改与 lockSkewingY 为属性的对象相关的属性，例如颜色、光标、描边宽度和许多其他属性。
ul>
选项键
lockSkewingY – 此属性接受布尔值 值。如果我们为其指定“true”值，则对象的垂直倾斜将被锁定。
示例 1
a 的默认行为画布中的 Circle 对象
来画数字人直播
来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。
0 查看详情 
让我们看一个代码示例，以了解不使用 lockSkewingY 属性时 Circle 对象的默认行为。通过按 shift 键，然后沿水平或垂直方向拖动，可以使对象在水平和垂直方向上倾斜。
Locking the vertical skewing of a circle using FabricJS
Select the object, hold the shift key, and stretch it horizontally or vertically. The object will get skewed freely. This is the default behavior. Here we have not applied the lockSkewingY property, but by default, it is set to False.
// Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); var circle = new fabric.Circle({ left: 115, top: 50, fill: "white", radius: 50, stroke: "black", strokeWidth: 5 }); // Adding it to the canvas canvas.add(circle); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250);
示例 2
将 lockSkewingY 作为具有“true”值的键传递
在这个示例中，我们将看到如何停止圆的能力使用lockSkewingY 属性垂直倾斜对象。正如我们所看到的，虽然我们可以通过按 Shift 键来水平倾斜圆形对象，但我们不允许垂直执行相同的操作。
Locking the vertical skewing of a circle using FabricJS
Select the object, hold the shift key, and try to stretch the circle horizontally or vertically. You will notice that the object gets skewed horizontally, but its vertical skewing is locked. Here we have set lockSkewingY to True.
// Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); var circle = new fabric.Circle({ left: 115, top: 50, fill: "white", radius: 50, stroke: "black", strokeWidth: 5, lockSkewingY: true }); // 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/536792.html
微信扫一扫 
支付宝扫一扫 
