请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

互动交流 scaleX(-1)引起的bug,路过的大佬给看看啥问题

3
回复
287
查看
[复制链接]

5

主题

10

帖子

75

积分

 楼主| 2023-8-9 18:33:34 显示全部楼层 |阅读模式

需求:图片实现镜像翻转和拖拽

遇到的问题:模拟器能够实现,但是在真机运行,点击翻转后坐标值就不正确了

代码如下:

<template>

  <div class="wrapper">

  <div class="imgBox" style="top:{{topC+'px'}};left:{{leftC+'px'}};">

      <image src="http://test-cdn.dtymxf.com/361/image_template/14/dadihuichun-liebiao.png" class="img" style="transform:scaleX({{scaleX}})" @touchmove="move" ></image>

      <image src="https://cdn.dtymxf.com/361/image/d1.png" class="turn" @click="overturn"></image>

    </div>

  </div>

</template>

<script>

export default {

  data: {

    scaleX: 1,

    topC:100,

    leftC:100

  },

  onInit() { },

  overturn() {

    if (this.scaleX == 1) {

        this.scaleX = -1

    } else {

        this.scaleX = 1

    }

  },

  move(event){

    event.stopPropagation()

    let touch = event.touches[0];

    console.log(event)

    this.topC = touch.clientY - 200

    this.leftC = touch.clientX - 150

  },

}

</script>

<style>

.wrapper {

  flex-direction: column;

  justify-content: center;

  align-items: center;

  position: relative;

}

.imgBox{

  position: absolute;

  top: 100px;

  left: 100px;

  width: 300px;

  height: 400px;

}

.turn{

  position: absolute;

  bottom: 10px;

  left: 10px;

  width: 100px;

  height: 100px;

}

.img{

  width: 300px;

  height: 400px;

}

</style>

回复

使用道具 举报

2023-8-10 14:36:35 显示全部楼层
我这边使用示例使用真机预览看了下效果跟IDE预览面板效果是一致呢,这个差异点表现在哪里呢?
回复

使用道具 举报

5

主题

10

帖子

75

积分

 楼主| 2023-8-10 16:07:20 显示全部楼层
vivo官方技术团队 发表于 2023-8-10 14:36 我这边使用示例使用真机预览看了下效果跟IDE预览面板效果是一致呢,这个差异点表现在哪里呢? ...
手机上按住图片坐标就不对了,x轴
回复

使用道具 举报

2023-8-14 11:47:12 显示全部楼层
嗯,关于这块问题我这边确认一下,尽快给您答复。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册