跳转到主内容
极星编程网:以代码为星,赴技术山海!

如何使用 FabricJS 禁用三角形的中心缩放?

在本教程中,我们将学习如何使用 FabricJS 禁用三角形的居中缩放。三角形是 FabricJS 提供的各种形状之一。为了创建一个三角形,我们必须创建一个 Fabric.Triangle 类的实例并将其添加到画布中。 当通过控件缩放对象时,分配一个centeredScaling 属性的真实值,变换的原点是其中心。 语法
new fabric.Triangle({ centeredScaling: Boolean }: Object)
参数 选项 (可选) - 此参数是一个 对象 为我们的三角形提供额外的定制。使用此参数,可以更改与centeredScaling属性相关的对象的颜色、光标、描边宽度等属性。 选项键 centeredScaling - 该属性接受一个 布尔 值并允许我们控制对象是否应使用其中心作为变换原点。 示例 1 传递 centeredScaling 作为 key 并为其分配一个“true”值 让我们看一个代码示例,了解启用 centeredScaling 属性时三角形对象的行为。当我们放大对象时,变换的原点是三角形的中心。

Passing centeredScaling as key and assigning it a "true" value

Try scaling the triangle to see that it is using its center as the center of transformation.

示例 2 禁用 centeredScaling 属性 我们可以通过为其指定 False 值来禁用 centeredScaling 属性。这将不再使用三角形的中心作为变换的中心。这是一个代码示例来演示

Disabling the centeredScaling property

Try scaling the triangle to see that it is using one of its corners as the center of transformation.

相关文章