Skip to content

拖拽对比

RUNNERUP edited this page Nov 3, 2021 · 3 revisions

设计目的

为了解决两张图片的某些区域可以近距离进行对比,但又不想把图片放的过大的目的。也参考其他的交互实现。开发了拖拽对比。

实现效果

先将两张图叠加在一起,然后用一条水平或竖直的线作为两张图的分界,线的两侧分别显示两张图片。用户可以通过拖动线,控制显示对比位置。当然用户也可以对图片进行拖动和缩放来调整对比位置。

工具栏说明

  • 设置拖拽线的方向:水平/竖直。
  • 设置是否显示分割线

Tips:

  • 如何切换对比图片:默认从用户已经选择的图片中,选择前两张图片。可先点击已选打开文件长廊,然后依次单击你想要对比的两张图

效果图

drag-compare