在vue-cropper 的changeCropNow方法里nextTick模块,minSize传入最小宽高(我的需求是正方形,所以传一个number)
this.$nextTick(() => {
var fw = nowX - this.cropX;
var fh = nowY - this.cropY;
if (this.canChangeX) {
if (this.changeCropTypeX === 1) {
if ((this.cropOldW - fw) / this.scale < this.minSize) {
this.cropW = this.minSize * this.scale;
} else if (this.cropOldW - fw > 0) {
this.cropW =
wrapperW - this.cropChangeX - fw <= wrapperW - minX
? this.cropOldW - fw
: this.cropOldW + this.cropChangeX - minX;
this.cropOffsertX =
wrapperW - this.cropChangeX - fw <= wrapperW - minX
? this.cropChangeX + fw
: minX;
} else {
this.cropW =
Math.abs(fw) + this.cropChangeX <= wrapperW
? Math.abs(fw) - this.cropOldW
: wrapperW - this.cropOldW - this.cropChangeX;
this.cropOffsertX = this.cropChangeX + this.cropOldW;
}
} else if (this.changeCropTypeX === 2) {
if ((this.cropOldW + fw) / this.scale < this.minSize) {
this.cropW = this.minSize * this.scale;
this.cropOffsertX = this.cropChangeX;
} else if (this.cropOldW + fw > 0) {
this.cropW =
this.cropOldW + fw + this.cropOffsertX <= wrapperW
? this.cropOldW + fw
: wrapperW - this.cropOffsertX;
this.cropOffsertX = this.cropChangeX;
} else {
// 右侧坐标抽 超过左侧
this.cropW =
wrapperW - this.cropChangeX + Math.abs(fw + this.cropOldW) <=
wrapperW - minX
? Math.abs(fw + this.cropOldW)
: this.cropChangeX - minX;
this.cropOffsertX =
wrapperW - this.cropChangeX + Math.abs(fw + this.cropOldW) <=
wrapperW - minX
? this.cropChangeX - Math.abs(fw + this.cropOldW)
: minX;
}
}
}
if (this.canChangeY) {
if (this.changeCropTypeY === 1) {
if ((this.cropOldH - fh) / this.scale < this.minSize) {
this.cropH = this.minSize * this.scale;
} else if (this.cropOldH - fh > 0) {
this.cropH =
wrapperH - this.cropChangeY - fh <= wrapperH - minY
? this.cropOldH - fh
: this.cropOldH + this.cropChangeY - minY;
this.cropOffsertY =
wrapperH - this.cropChangeY - fh <= wrapperH - minY
? this.cropChangeY + fh
: minY;
} else {
this.cropH =
Math.abs(fh) + this.cropChangeY <= wrapperH
? Math.abs(fh) - this.cropOldH
: wrapperH - this.cropOldH - this.cropChangeY;
this.cropOffsertY = this.cropChangeY + this.cropOldH;
}
} else if (this.changeCropTypeY === 2) {
if ((this.cropOldH + fh) / this.scale < this.minSize) {
this.cropH = this.minSize * this.scale;
} else if (this.cropOldH + fh > 0) {
this.cropH =
this.cropOldH + fh + this.cropOffsertY <= wrapperH
? this.cropOldH + fh
: wrapperH - this.cropOffsertY;
this.cropOffsertY = this.cropChangeY;
} else {
this.cropH =
wrapperH - this.cropChangeY + Math.abs(fh + this.cropOldH) <=
wrapperH - minY
? Math.abs(fh + this.cropOldH)
: this.cropChangeY - minY;
this.cropOffsertY =
wrapperH - this.cropChangeY + Math.abs(fh + this.cropOldH) <=
wrapperH - minY
? this.cropChangeY - Math.abs(fh + this.cropOldH)
: minY;
}
}
}
if (this.canChangeX && this.fixed) {
var fixedHeight =
(this.cropW / this.fixedNumber[0]) * this.fixedNumber[1];
if (fixedHeight + this.cropOffsertY > wrapperH) {
this.cropH = wrapperH - this.cropOffsertY;
this.cropW =
(this.cropH / this.fixedNumber[1]) * this.fixedNumber[0];
} else {
this.cropH = fixedHeight;
}
}
if (this.canChangeY && this.fixed) {
var fixedWidth =
(this.cropH / this.fixedNumber[1]) * this.fixedNumber[0];
if (fixedWidth + this.cropOffsertX > wrapperW) {
this.cropW = wrapperW - this.cropOffsertX;
this.cropH =
(this.cropW / this.fixedNumber[0]) * this.fixedNumber[1];
} else {
this.cropW = fixedWidth;
}
}
});