设置元素可以调整尺寸、面积
此处,用户改变元素,只能改变一侧,要么 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;
}
}
});
};