uni-app中 movable-view 的 @scale 问题

在裁剪图片中使用movable-view组件,实现拖拽缩放

但是在使用过程中发现:

movable-view 的 缩放监听@scale事件 在双指缩放的时候返回的数据x,y坐标始终为初始值
不能根据缩放实时返回x,y坐标值,但是scale值是正确的
所以这篇文章是给 @scale事件 添加计算x,y坐标的方法的

完整代码

onScale(e) {
  const {x,y,scale} = e.detail;
  /**
  * initialWidth:初始宽度   initialHeight:初始高度  
  * this.scale 是上次缩放记录的缩放倍数 
  * scale是当前的缩放倍数   
  **/   
  //偏移量
  let offsetX = ((initialWidth*scale)-(initialWidth*this.scale))/2;
  let offsetY = ((initialHeight*scale)-(initialHeight*this.scale))/2;
  //上次的xy坐标+偏移量
  let leftX = -offsetX + this.x;
  let leftY = -offsetY + this.y;
  this.x = Math.round(leftX * 100) / 100;
  this.y = Math.round(leftY * 100) / 100;
  //记录缩放倍数
  this.scale = scale;
}

缩放是根据movable-view的中心开始缩放的 ,所以每次移动 图片位置之后 中心点就会改变
但是缩放的偏移量 就是(最新的宽高 - 上一次缩放过的宽高)/ 2

//偏移量
 let offsetX = ((initialWidth*scale)-(initialWidth*this.scale))/2;
 let offsetY = ((initialHeight*scale)-(initialHeight*this.scale))/2;

初始的x,y坐标 + 偏移量 就是最新的 x,y坐标

let leftX = -offsetX + this.x;
let leftY = -offsetY + this.y;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容