cropperjs icon indicating copy to clipboard operation
cropperjs copied to clipboard

image或者selection的限制边界在接近边界时卡顿,在达到边界时,斜向拖动会变现为无法拖动或者卡顿

Open maopixin opened this issue 6 months ago • 3 comments

Cropper version

2.0.0-rc.2

Link to minimal reproduction

https://fengyuanchen.github.io/cropperjs/v2/zh/api/cropper-image.html#%E9%99%90%E5%88%B6%E8%BE%B9%E7%95%8C

Steps to reproduce

官方示例,两个限制边缘都不行,卡顿,或者卡住

What is expected?

预期跟v1相同,在达到边界时只是不能出去,但是其他方向还是可以流畅的拖动

What is actually happening?

卡住

System Info


Any additional comments?

No response

maopixin avatar May 22 '25 01:05 maopixin

selection可以使用这个方法,prevent后,手动设置边界为最大/最小值: 如果启用了cropper-shade,mask有拖影的问题还没解决(悲

if (!this.inSelection(selection, maxSelection)) { event.preventDefault();

// 计算约束后的位置 let constrainedX = selection.x; let constrainedY = selection.y; let constrainedWidth = selection.width; let constrainedHeight = selection.height;

// 约束X坐标 if (selection.x < maxSelection.x) { constrainedX = maxSelection.x; } else if (selection.x + selection.width > maxSelection.x + maxSelection.width) { constrainedX = maxSelection.x + maxSelection.width - selection.width; }

// 约束Y坐标 if (selection.y < maxSelection.y) { constrainedY = maxSelection.y; } else if (selection.y + selection.height > maxSelection.y + maxSelection.height) { constrainedY = maxSelection.y + maxSelection.height - selection.height; }

// 如果宽度超出,调整宽度 if (selection.width > maxSelection.width) { constrainedWidth = maxSelection.width; constrainedX = maxSelection.x; }

// 如果高度超出,调整高度 if (selection.height > maxSelection.height) { constrainedHeight = maxSelection.height; constrainedY = maxSelection.y; }

// 使用$change方法同时设置位置和大小 const cropperSelection = event.target; cropperSelection.$moveTo(constrainedX, constrainedY); }

devmc12 avatar May 28 '25 08:05 devmc12

已经改1.6.2版本了,2.0问题好多

devmc12 avatar May 29 '25 16:05 devmc12

这个问题应该在触发事件之前处理,而不是触发事件之后。所以单纯的从外部修改,效果不好。就会卡或者闪烁。

Tindtily avatar Jun 04 '25 09:06 Tindtily

I was having issues with having boundaries/limits where if my selection was hitting the corner or multiple edges my selection would freeze and no longer allow me to resize. It turned out that I was also setting aspect-ratio which causes the selection to move while resizing (replicable in the cropper.js playground). After setting precise on the cropper-selection it no longer was moving while resizing and would no longer freeze my selection on resize. I am not sure if this is the same issue but this is what helped me.

kaseyhinton avatar Jul 01 '25 20:07 kaseyhinton

v2 有什么好办法吗?

hopkinson avatar Oct 30 '25 04:10 hopkinson

希望官方能重视这个问题,毕竟边界限制是裁剪器的核心功能之一。

cvpv avatar Nov 10 '25 03:11 cvpv