防止 Fabric js 对象扩展到画布边界之外（scaling，modified事件）

在使用 Fabric js的时候，遇到的问题，当我开始缩放拖拽对象时，他会超出边界，找了很多文章虽然都能解决不超出，但是有了新问题，当我判断他接触边界的时候设置最大值就到这，但是我继续拖动它会反方向继续延伸，就很困扰我！！！（好在解决了但不是最佳方案）

  // 监听矩形放大缩小
            rect.on("scaling", () => {

                this.scalingFn(rect);
            });
		// 当矩形对象被修改时触发事件
		rect.on('modified', (event) => {
	    // 检查事件目标是否存在
	    if (!!event.target) {
	        // 解除X轴缩放锁定
	        event.target.lockScalingX = false;
	        // 解除Y轴缩放锁定
	        event.target.lockScalingY = false;
	        // 解除X轴移动锁定
	        event.target.lockMovementX = false;
	        // 解除Y轴移动锁定
	        event.target.lockMovementY = false;
	   		 }
		})
   	scalingFn(obj) {
			 // 更新对象的边界坐标
			obj.setCoords();
			// 获取对象的顶部位置
			let top = obj.getBoundingRect().top;
			// 获取对象的左侧位置
			let left = obj.getBoundingRect().left;
			// 获取对象的高度
			let height = obj.getBoundingRect().height;
			// 获取对象的宽度
			let width = obj.getBoundingRect().width;
			
			// 限制对象缩放时不超出画布底部
			if (top + height > obj.canvas.height) {
			// 重置Y轴缩放比例为1
			obj.scaleY = 1;
			// 更新对象的边界坐标
			obj.setCoords();
			// 获取缩放后的高度
			let h = obj.getScaledHeight();
			// 计算新的Y轴缩放比例，以防止对象超出画布底部
			obj.scaleY = (obj.canvas.height - top) / h;
			// 更新对象的边界坐标
			obj.setCoords();
			// 重新渲染画布
			this.canvas.renderAll();
			
			复制代码
			// 锁定对象的X轴和Y轴缩放
			obj.lockScalingX = true;
			obj.lockScalingY = true;
			obj.lockMovementX = true;
			obj.lockMovementY = true;
			}
			
			// 限制对象缩放时不超出画布顶部
			if (top < 0) {
			// 重置Y轴缩放比例为1
			obj.scaleY = 1;
			// 更新对象的边界坐标
			obj.setCoords();
			// 获取缩放后的高度
			let h = obj.getScaledHeight();
			// 计算新的Y轴缩放比例，以防止对象超出画布顶部
			obj.scaleY = (height + top) / h;
			// 设置对象的顶部位置为0
			obj.top = 0;
			// 更新对象的边界坐标
			obj.setCoords();
			// 重新渲染画布
			this.canvas.renderAll();
			
			复制代码
			// 锁定对象的X轴和Y轴缩放
			obj.lockScalingX = true;
			obj.lockScalingY = true;
			obj.lockMovementX = true;
			obj.lockMovementY = true;
			}
			
			// 限制对象缩放时不超出画布右侧
			if (left + width > obj.canvas.width) {
			// 重置X轴缩放比例为1
			obj.scaleX = 1;
			// 更新对象的边界坐标
			obj.setCoords();
			// 获取缩放后的宽度
			let w = obj.getScaledWidth();
			// 计算新的X轴缩放比例，以防止对象超出画布右侧
			obj.scaleX = (obj.canvas.width - left) / w;
			// 更新对象的边界坐标
			obj.setCoords();
			// 重新渲染画布
			this.canvas.renderAll();
			
			复制代码
			// 锁定对象的X轴和Y轴缩放
			obj.lockScalingX = true;
			obj.lockScalingY = true;
			obj.lockMovementX = true;
			obj.lockMovementY = true;
			}
			
			// 限制对象缩放时不超出画布左侧
			if (left < 0) {
			// 重置X轴缩放比例为1
			obj.scaleX = 1;
			// 更新对象的边界坐标
			obj.setCoords();
			// 获取缩放后的宽度
			let w = obj.getScaledWidth();
			// 计算新的X轴缩放比例，以防止对象超出画布左侧
			obj.scaleX = (width + left) / w;
			// 设置对象的左侧位置为0
			obj.left = 0;
			// 更新对象的边界坐标
			obj.setCoords();
			// 重新渲染画布
			this.canvas.renderAll();
			// 锁定对象的X轴和Y轴缩放
			obj.lockScalingX = true;
			obj.lockScalingY = true;
			obj.lockMovementX = true;
			obj.lockMovementY = true;
			}
        }