8***@qq.com
8***@qq.com
  • 发布:2021-07-17 18:15
  • 更新:2022-08-03 12:08
  • 阅读:1244

moveable-view 在触发 scale 事件时,如何获得准确的 x,y 值?

分类:uni-app

moveable-view 是基于中心为原点去 scale 的,而 x,y 是以左上角为原点的 x,y。
当通过设置 scale-value 触发 scale 事件后,从 event.detail 中获取的 x,y 仍然是缩放前的 x,y。
正确的情况应该是:如果为放大,x,y 应在原 x,y 的左上角;如果缩小,则应该在右下角。
如何获取正确的 x,y?

2021-07-17 18:15 负责人:无 分享
已邀请:
8***@qq.com

8***@qq.com (作者)

我现在的实现方式如下,强制触发一次位移刷新,希望给遇到同样问题的人提供一点帮助。

moveView(event, position) {  
    position.x = event.detail.x  
    position.y = event.detail.y  
    if (event.detail.scale) {  
        position.scale = event.detail.scale  
        // 增加以下代码,强制触发 change 事件  
        this.$nextTick(function(){  
            position.x += 0.1  
        })  
    }  
},
  • 7***@qq.com

    试了下这个方法,在靠近边缘的地方放大和缩小位置不太准确,我用这种会稍微好些,

    this.zoomLeft = (this.scaleValue - 1) this.imgWidth / 2 / 2 // 计算缩放后左移间距 /2是因为预览单位是rpx

    this.zoomTop = (this.scaleValue - 1)
    this.imgHeight / 2 / 2


                        this.moveImgPosition.x -= this.zoomLeft;  
    this.moveImgPosition.y -= this.zoomTop;

    2022-08-03 15:32

7***@qq.com

7***@qq.com

我这两天也被这个问题困扰很久, 真是帮了大忙了

该问题目前已经被锁定, 无法添加新回复