Fabric.js 以图像为中心的缩放属性

简介

Fabric.js 是一个用于制作交互式图形的开源库，它使用Canvas API，提供丰富的绘制功能和交互操作。

其中，以图像为中心的缩放是一项非常常用的功能，它可以通过拖拽鼠标对图像进行放大和缩小，同时始终以图像为中心进行缩放。

在本文中，我们将介绍如何使用 Fabric.js 实现以图像为中心的缩放属性。

实现方法

在 Fabric.js 中，可以通过设置 originX 和 originY 属性，将缩放中心点设置为图像的中心。然后，通过计算缩放前后的图像位置差，调整图像的位置，使其仍然处于中心点。

下面是实现代码：

// 创建一个Canvas对象
var canvas = new fabric.Canvas('canvas');

// 加载图像
fabric.Image.fromURL(imgSrc, function(img) {
    // 设置缩放中心点
    img.set({
        originX: 'center',
        originY: 'center'
    });
    canvas.add(img);
    // 监听鼠标滚轮事件
    canvas.on('mouse:wheel', function(opt) {
        var delta = opt.e.deltaY;
        var zoom = canvas.getZoom();
        zoom *= 0.999 ** delta;
        if (zoom > 20) zoom = 20; // 限制最大缩放比例
        if (zoom < 0.01) zoom = 0.01; // 限制最小缩放比例
        canvas.setZoom(zoom);
        if (zoom < 1) {
            // 计算缩放前后的位置差
            var tx = canvas.width / 2 - img.left * zoom;
            var ty = canvas.height / 2 - img.top * zoom;
            img.set({
                left: (canvas.width / 2 - tx) / zoom,
                top: (canvas.height / 2 - ty) / zoom
            });
        } else {
            // 重置图像位置
            img.set({
                left: canvas.width / 2,
                top: canvas.height / 2
            });
        }
        canvas.renderAll();
    });
});

结论

通过设置缩放中心点和计算位置差，我们可以实现以图像为中心的缩放功能。同时，我们还可以设置最大和最小缩放比例，以避免过度缩放和过度放大。

Fabric.js 提供了丰富的绘制功能和交互操作，通过使用这些功能，我们可以轻松实现各种图形的绘制和交互处理。