Fabric.js 图片 originX 属性

在使用 Fabric.js 创建图形时，我们可以设置图形对象的 originX 属性来控制对象相对于其位置的水平对齐方式。对于图片来说，这个属性同样可以有效地调整图片的水平对齐方式。

图片 originX 属性的作用

在默认情况下，Fabric.js 会将图片对象的左上角用作其参照点。也就是说，无论图片的位置在画布上如何变化，这个左上角点始终保持相对不变。如果我们希望以图片中心点为参照点进行调整，则可以使用 originX 属性来实现这个效果。

originX 属性的取值

originX 属性的取值和作用跟其他形状对象基本一致，可以设置以下几种选项：

• left：对象左边对齐画布左边
• center：对象水平居中对齐画布
• right：对象右边对齐画布右边

此外，还可以使用浮点数作为 originX 的取值，值范围从 0 到 1。这个值表示相对于图片宽度的比例，例如，0.5 就表示将图片中心设置为对象的参照点。

设置图片 originX 属性的方法

在创建或者修改图片对象的时候，可以通过 originX 属性的设置来控制对象的位置。例如，在创建图片对象时，可以使用下面的代码来实现将图片中心点作为参照点：

var img = new fabric.Image(imgElement, {
  left: 100,
  top: 100,
  originX: 'center',
  originY: 'center'
});

这个代码中，originX 属性被设置为 center，这意味着图片对象的中心点会被用作参照点。

同样地，在修改图片对象时，也可以通过 set 方法来设置 originX 属性的值。例如，将图片对象的参考点设置为画布左侧边缘，可以使用以下代码实现：

img.set({
  originX: 'left'
});

小结

通过设置图片的 originX 属性，我们可以方便地调整对象的水平对齐方式。掌握这个属性的使用方法，可以让我们更加灵活地操作图片对象。