【 fabric 封装工具函数】

65 阅读1分钟

设置元素可以调整尺寸、面积

此处,用户改变元素,只能改变一侧,要么 mr, ml 要么 mt, mt

//设置元素可以调整的最大尺寸和最小尺寸
export const setObjectSizeLimit = (
	object: fabric.Object,
	options: {
		maxWidth?: number;
		maxHeight?: number;
		minWidth?: number;
		minHeight?: number;
		maxArea?: number;
		minArea?: number;
	},
) => {
	const getRight = () => object.left! + object.getScaledWidth()!;
	const getBottom = () => object.top! + object.getScaledHeight()!;

	let right: number = 0;
	let bottom: number = 0;
	setTimeout(() => {
		right = getRight();
		bottom = getBottom();
	}, 800);

	object.on("modified", () => {
		right = getRight();
		bottom = getBottom();
	});

	object.on("scaling", (e) => {
		const currentArea = object.getScaledWidth()! * object.getScaledHeight()!;

		if (options.maxWidth !== undefined) {
			const maxScaleX = options.maxWidth / object.width!;
			if (object.getScaledWidth()! > options.maxWidth) {
				object.scaleX = maxScaleX;
				if (e.transform?.corner === "ml") {
					object.left = right - object.getScaledWidth();
				}
			}
			right = getRight();
		}

		if (options.maxHeight !== undefined) {
			const maxScaleY = options.maxHeight / object.height!;
			if (object.getScaledHeight()! > options.maxHeight) {
				object.scaleY = maxScaleY;
				if (e.transform?.corner === "mt") {
					object.top = bottom - object.getScaledHeight();
				}
			}
			bottom = getBottom();
		}

		if (options.minWidth !== undefined) {
			const minScaleX = options.minWidth / object.width!;
			if (object.getScaledWidth()! < options.minWidth) {
				object.lockScalingX = true;
				object.scaleX = minScaleX;
				object.lockScalingX = false;
			}
		}

		if (options.minHeight !== undefined) {
			const minScaleY = options.minHeight / object.height!;
			if (object.getScaledHeight()! < options.minHeight) {
				object.lockScalingY = true;
				object.scaleY = minScaleY;
				object.lockScalingY = false;
			}
		}

		if (options.maxArea !== undefined && currentArea >= options.maxArea) {
			if (e.transform?.corner === "mr" || e.transform?.corner === "ml") {
				object.lockScalingX = true;
				const maxWidth = options.maxArea / object.getScaledHeight()!;
				const maxScaleX = maxWidth / object.width!;
				if (object.getScaledWidth()! > maxWidth) {
					object.scaleX = maxScaleX;
				}
				object.lockScalingX = false;
			}
			if (e.transform?.corner === "mb" || e.transform?.corner === "mt") {
				object.lockScalingY = true;
				const maxHeight = options.maxArea / object.getScaledWidth()!;
				const maxScaleY = maxHeight / object.height!;
				if (object.getScaledHeight()! > maxHeight) {
					object.scaleY = maxScaleY;
				}
				object.lockScalingY = false;
			}
		}

		if (options.minArea !== undefined && currentArea <= options.minArea) {
			if (e.transform?.corner === "mr" || e.transform?.corner === "ml") {
				object.lockScalingX = true;
				const minWidth = options.minArea / object.getScaledHeight()!;
				const minScaleX = minWidth / object.width!;
				if (object.getScaledWidth()! < minWidth) {
					object.scaleX = minScaleX;
				}
				object.lockScalingX = false;
			}
			if (e.transform?.corner === "mb" || e.transform?.corner === "mt") {
				object.lockScalingY = true;
				const minHeight = options.minArea / object.getScaledWidth()!;
				const minScaleY = minHeight / object.height!;
				if (object.getScaledHeight()! < minHeight) {
					object.scaleY = minScaleY;
				}
				object.lockScalingY = false;
			}
		}
	});
};