在裁剪图片中使用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;