Improving Image Cropping Interaction on the Result Page

This article describes the experience problems of the "Paizhi Tao" result page’s cropping feature since its launch and presents a series of solutions.

Problems identified: users cannot easily locate or manipulate the cropping frame, the frame sometimes disappears, and small objects are not searchable.

Interaction redesign: the page now displays the full original image above the result panel, allowing users to slide the image. New touch‑handling logic separates concerns into distinct interfaces (judge, onTouchRelease, onTouchEvent) to improve maintainability.

Key code changes (Kotlin):

fun judge(fingerArray: SparseArray
, selectedObjectRegion: RegionPart, totalObjects: List
, selfDefinedObject: RegionPart): Boolean { ... }
fun onTouchRelease(selectedObjectRegion: RegionPart, totalObjects: List
, selfDefinedObject: RegionPart) { ... }
override fun onTouchEvent(fingerArray: SparseArray
, selectedObjectRegion: RegionPart, totalObjects: List
, selfDefinedObject: RegionPart): Boolean { /* scaling and moving logic */ }

New capabilities added: proportional image scaling, image move, and full‑screen zoom that mimics iOS Photos behavior. The scaling keeps the midpoint pixel stable during pinch gestures, and rotation maintains the same center pixel.

Workflow updates: after user adjustments, the original (unscaled) image region is cropped and re‑uploaded for product recall, improving query accuracy for small objects.

Results: the optimized flow significantly increases relevance of search results, as demonstrated by before‑and‑after GIFs.

Conclusion: legacy code should be refactored proactively; the changes have been released in version 10.15.0 with A/B testing to verify performance gains.