Fabric.js中如何实现所有缩放场景下均保持图片宽高比

嗨，我刚好遇到过类似的需求，给你两种实用的解决方案，看你更倾向哪种：

方案一：只允许角落缩放（禁用边缘手柄的缩放功能） #

如果你觉得边缘缩放没必要，只想保留角落的比例缩放，可以通过重写Fabric.Image的_getActionFromCorner方法，让边缘手柄不响应缩放操作：

// 重写方法，只允许四个角落触发缩放
fabric.Image.prototype._getActionFromCorner = function(corner) {
  // 仅保留左上、右上、左下、右下四个角落的缩放权限
  if (['tl', 'tr', 'bl', 'br'].includes(corner)) {
    return 'scale';
  }
  // 边缘手柄不执行任何操作
  return null;
};

// 初始化图片时记得开启宽高比锁定
const myImage = new fabric.Image(yourImageElement, {
  lockAspectRatio: true // 确保角落缩放时保持比例
});
canvas.add(myImage);

设置后，用户拖动边缘手柄不会有任何缩放效果，只有角落能正常按比例缩放。

方案二：让边缘缩放也强制保持宽高比 #

如果你想保留边缘缩放的交互，但又不想破坏比例，可以利用Fabric.js的lockUniScaling属性，它能强制对象的scaleX和scaleY始终同步，不管拖动哪个手柄：

const myImage = new fabric.Image(yourImageElement, {
  lockUniScaling: true, // 强制scaleX和scaleY同步，实现均匀缩放
  lockAspectRatio: true // 双重保险，确保比例锁定
});
canvas.add(myImage);

这个方法更省心，不管用户拖角落还是边缘，都会自动按原始宽高比缩放，完全不用担心比例被打破。

补充一下：你之前用lockScalingX和lockScalingY导致无法缩放，是因为这两个属性会分别锁定X/Y轴的缩放，而lockUniScaling是专门用来强制均匀缩放的，二者作用完全不同哦~

备注：内容来源于stack exchange，提问作者Adam