cropperjs
cropperjs copied to clipboard
image或者selection的限制边界在接近边界时卡顿,在达到边界时,斜向拖动会变现为无法拖动或者卡顿
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
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); }
已经改1.6.2版本了,2.0问题好多
这个问题应该在触发事件之前处理,而不是触发事件之后。所以单纯的从外部修改,效果不好。就会卡或者闪烁。
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.
v2 有什么好办法吗?
希望官方能重视这个问题,毕竟边界限制是裁剪器的核心功能之一。