1***@qq.com
1***@qq.com
  • 发布:2024-04-12 15:01
  • 更新:2024-04-12 15:01
  • 阅读:84

使用BindingX 拖动图片 会重置图片的transform.scale

分类:uni-app

安卓上没问题,ios就有问题

效果的录屏http://101.35.155.192:8080/video/33711b1694ffd49a5f74328939f7872b.mp4
http://101.35.155.192:8080/video/33711b1694ffd49a5f74328939f7872b.mp4

<template>  
        <view   
                class="cover-face-image"   
                ref="moveImage"    
                @touchstart="handleTouchStart",  
                :style="{  
                    height: imgHeight + 'px',   
                    width: imgWidth + 'px',  
                    opacity:opacity/10,  
                    top:scaleObj.top  
                }"  
            >  
                <image  
                    @load="imgLoad"   
                    :src="imgSrc"  
                    :style="{  
                        height: imgHeight + 'px',   
                        width: imgWidth + 'px'  
                    }"  
                >  
                </image>  
            </view>  
</template>  
<script>  
const BindingX = uni.requireNativePlugin('bindingx');  
export default {  
data() {  
  return {  
     scaleObj:{  
              top:0,  
              x: 0,  
              y: 0,  
              zoom:1,  
              rotateY:0  
            },  
     zoom:10,  
  }  
},  
methods: {  
getEl(el) {  
            if (typeof el === 'string' || typeof el === 'number') return el;  
            if (WXEnvironment) {  
                return el.ref;  
            } else {  
                return el instanceof HTMLElement ? el : el.$el;  
            }  
        },  
        handleTouchStart(event) {  
            const move = this.getEl(this.$refs.moveImage);  
            const $this = this;  
            const oBindingX = BindingX.bind({  
                anchor: move,  
                eventType: 'pan',  
                props:[{  
                    element: move,  
                    property: 'transform.translateX',  
                    expression: `x+${this.scaleObj.x}`  
                },{  
                    element: move,  
                    property: 'transform.translateY',  
                    expression: `y+${this.scaleObj.y}`  
                }]  
            },function(e){  
                    if (e.state === 'end') {  
                        if ($this.timer) {  
                            //移动时间特别短暂 视为点击事件  
                            clearTimeout($this.timer);  
                            // 点击事件处理  
                        }  
                        BindingX.unbind({  
                          token: oBindingX.token,  
                          eventType: 'pan'  
                        })  
                        //记录位置  
                        $this.scaleObj.y += e.deltaY;  
                        $this.scaleObj.x +=  e.deltaX;  
                    }else{  
                        // 判断点击事件还是拖动事件  
                        $this.timer = setTimeout(() => {  
                            $this.timer = null;  
                        }, 50)  
                    }  
            })  
        }  

}  

}  
</script>
2024-04-12 15:01 负责人:无 分享
已邀请:

要回复问题请先登录注册