防止 Fabric js 对象拖拽到画布边界之外（moving事件）

最新推荐文章于 2024-01-08 09:20:53 发布

End.summer

最新推荐文章于 2024-01-08 09:20:53 发布

阅读量456

点赞数

分类专栏： canvas 文章标签： fabric vue.js canva可画

本文链接：https://blog.csdn.net/weixin_47924642/article/details/134313445

版权

canvas 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

			// 监听矩形移动
			rect.on("moving", () => {
			this.movingFn(rect)
			});
			
			// 移动处理函数
			movingFn(rect) {
			let obj = rect;
			// 获取画布边界
			let canvasWidth = this.canvas.width;
			let canvasHeight = this.canvas.height;
			// 计算对象的边界框
			let objLeft = obj.left;
			let objTop = obj.top;
			let objWidth = obj.width * obj.scaleX;
			let objHeight = obj.height * obj.scaleY; // 计算对象的右边和底部边界
			let objRight = objLeft + objWidth;
			let objBottom = objTop + objHeight; // 检查对象是否移出了画布边界
			let isOutside = false;
			
			复制代码
			// 检查左边是否超出边界
			if (objLeft < 0) {
			    obj.set({left: 0});
			    isOutside = true;
			}
			// 检查上边是否超出边界
			if (objTop < 0) {
			    obj.set({top: 0});
			    isOutside = true;
			}
			// 检查右边是否超出边界
			if (objRight > canvasWidth) {
			    obj.set({left: canvasWidth - objWidth});
			    isOutside = true;
			}
			// 检查底边是否超出边界
			if (objBottom > canvasHeight) {
			    obj.set({top: canvasHeight - objHeight});
			    isOutside = true;
			}
			
			// 如果对象移出了边界，阻止对象移动
			if (isOutside) {
			    this.canvas.renderAll();
			}
			}