小程序自定义拖拽及裁剪

 背景需求

 当时做小程序时 遇到一个场景 用户拍摄照片=>智能解析题目=>页面回显框选

回显后,可能不是用户想要的某一区域或某一题,此时就需要用户手动编辑裁剪。先看下图片效果及视频演示

小程序自定义拖拽及裁剪_第1张图片

查看视频演示

看完后 我们来分析一下 

做的时候 我的第一反应就是canvas和movable-area的组合 但是怎么尝试都没有成功。然后去百度查看,各种杂七乱八的,都没有达到自己想要实现的效果。然后我就请教之前有做过的大佬,他给的答案是vanvas结合movable-area组合

先聊一下框选回显的问题吧 

误区

动态获取放图片盒子的大小 然后比上手机屏幕的大小得到比例 根据返回的坐标点*比例 画出所有框选位置

纠正

动态获取盒子的高度(目的是后续裁剪使用)把对放图片盒子的操作 给Image操作 

看下页面使用代码

    
      
        
          
          图片处理中
        

        
          
            
              
                
                  
                
              
            
          
        
         {{ vdata.current }}/{{ vdata.imgUrl.length }} 
      
    
    
      
    

然后看下 welCropper 有两个版本 一个vue的版本 一个react的版本 

就以vue版本为例吧

遇到的坑及注意事项

1.封装组件时 外围盒子要定位

2.移动时,移动点位有偏差 (这里是100%等比例缩放的 如果自定义navbar需要减去所有以外的padding,margin,height)

3.一个页面反反复复使用 会遇到报错(canvas id已经使用了 不能再次使用) 动态设置cancasId

4.框选回显,坐标点位有偏差(始终保持图片大小等比例缩放 回显坐标不能使用px 最好使用%)

5.通过createSelectorQuery获取高度时,没有获取到 设置setTimerOut获取

这是welCropper所有的template代码 可以尝试根据代码去反推逻辑,有兴趣的小伙伴可以私信我或加wx:Darren_jm  备注csdn 获取全部代码

你可能感兴趣的:(前端,微信小程序)