Fabric.js Image CenteredRotation 属性

在使用 HTML5 Canvas 绘图时，Fabric.js 是一个非常优秀的框架。它提供了丰富的绘图功能，其中之一就是 Image 类。你可以很容易地加载图片并进行处理，Fabric.js 也为 Image 类提供了 Centered Rotation 属性。

Centered Rotation

在 Canvas 中，图片默认的旋转点在左上角。当你对其进行旋转时，其旋转中心也是在左上角。然而，对于某些场景，你可能期望旋转中心在图片的中心位置。这时候，Centered Rotation 属性就派上用场了。

当你将 Centered Rotation 属性设置为 true 时，Fabric.js 会将旋转中心设置为图片的中心位置，而不是左上角。这样做可以使图片的旋转更加自然，并且更符合我们的预期。

使用 Centered Rotation

使用 Centered Rotation 属性非常简单。只需要在创建 Image 对象时将该属性设置为 true 即可：

var img = new fabric.Image(imgElement, {
    centeredRotation: true
});

以上代码中，imgElement 是我们要加载的图片元素。我们将其传递给 Image 构造函数，同时将 centeredRotation 属性设置为 true。

效果展示

下面是一个示例展示 Centered Rotation 属性的效果：

var canvas = new fabric.Canvas('canvas');

// 创建一个图片对象
fabric.Image.fromURL('https://www.w3schools.com/w3images/forestbridge.jpg', function(img) {
    img.scale(0.5).set({
        left: 50,
        top: 50,
        centeredRotation: true
    });
    canvas.add(img);
});

以上代码会在 Canvas 中添加一张森林桥的图片，并对其进行了缩放和位置调整。注意其中的 centeredRotation 属性被设置为 true。

加载完成后，你可以通过鼠标拖拽旋转图片。你会发现，当 centeredRotation 属性为 true 时，旋转的中心点是图片的中心，而不是左上角。

总结

Centered Rotation 属性是 Fabric.js 提供的一个非常实用的功能，它可以使图片的旋转更加自然，并且更容易被人理解。如果你需要对图片进行旋转操作，不妨尝试一下这个属性。