您好,欢迎访问一九零五行业门户网

如何使用FabricJS锁定Triangle的垂直移动?

在本教程中,我们将学习如何使用 fabricjs 锁定三角形的垂直移动。正如我们可以指定画布中三角形对象的位置、颜色、不透明度和尺寸一样,我们也可以指定是否希望它仅在 x 轴上移动。这可以通过使用 lockmovementy 属性来完成。
语法 new fabric.triangle({ lockmovementy: boolean }: object)
参数选项 (可选) - 此参数是一个对象,它为我们的三角形提供额外的自定义。使用此参数,可以更改与 lockmovementy 为属性的对象相关的属性,例如颜色、光标、描边宽度和许多其他属性。
选项键lockmovementy 此属性接受布尔值。如果我们为其指定“true”值,则该对象将不再能够在垂直方向上移动。
示例 1画布中三角形对象的默认行为
让我们看一个代码示例,以了解如何在 时在 x 轴或 y 轴上自由移动三角形对象>lockmovementy 属性未分配“true”值。
画布中 triangle 对象的默认行为您可以选择三角形并将其拖动。请注意,您可以在水平和垂直方向上移动对象。// 启动画布实例var canvas = new fabric.canvas(canvas);canvas.setwidth(document.body.scrollwidth);画布.setheight(250);// 初始化一个三角形对象var triangle = new fabric.triangle({左:105,顶部:70,宽度:90,身高:80,填写:“#ffc1cc”,笔划:“#fbaed2”,笔划宽度:5,});// 将其添加到画布中canvas.add(三角形);
示例 2将 lockmovementy 作为具有“true”值的键传递
在此示例中,我们将看到我们如何锁定三角形对象的垂直运动。通过为 lockmovementy 属性分配“true”值,我们基本上停止了垂直方向的移动。
将 lockmovementy 作为具有“true”值的键传递您可以选择并拖动三角形以查看不再允许在 y 方向上移动。// 启动画布实例var canvas = new fabric.canvas(canvas);canvas.setwidth(document.body.scrollwidth);画布.setheight(250);// 初始化一个三角形对象var triangle = new fabric.triangle({左:105,顶部:70,宽度:90,身高:80,填写:“#ffc1cc”,笔划:“#fbaed2”,笔划宽度:5,锁定运动y:true,});// 将其添加到画布中canvas.add(三角形);
以上就是如何使用fabricjs锁定triangle的垂直移动?的详细内容。
其它类似信息

推荐信息