小程序由于画布需要缩小到30%，导致旋转角度出现问题，js不精通，请给看一下。

Question

由于画布需要缩小到30%，导致旋转角度出现问题，有高人给看看指点一下，多谢多谢。


<!--wxml -->
<view style="width:414px;height:500px;position: absolute;" bindtap="cancel">
    <view id="test" style="background-color:#1ea5c7;width: {{1080}}px;height: {{1080}}px;position: relative;transform: scale({{0.3}});transform-origin:center;left:50%;margin-left:-{{540}}px;top:50%;margin-top: -{{540}}px;" catchtap="">
        <view class='contentWarp'>
            <block wx:for="{{itemList}}" wx:key="index">
                <view class='touchWrap' style='transform: scale({{item.scale}});top:{{item.top}}px;left:{{item.left}}px; z-index:{{item.active?100:1}}'>
                    <view class='imgWrap {{item.active? "touchActive":""}}' style="transform: rotate({{item.angle}}deg); border: {{item.active?0*item.oScale:0}}rpx #fff dashed;">
                        <image src='{{item.image}}' data-id='{{item.id}}' style='width:{{item.width}}px;height:{{item.height}}px;' bindtouchstart='WraptouchStart' bindtouchmove='WraptouchMove' bindtouchend='WraptouchEnd'></image>
                        <image class='o' src='../../images/o.png' style='transform: scale({{item.oScale}});transform-origin:center;' data-id='{{item.id}}' bindtouchstart='oTouchStart' bindtouchmove='oTouchMove' bindtouchend='WraptouchEnd'></image>
                    </view>
                </view>
            </block>
        </view>
    </view>
</view>

let index = 0,
  items = [],
  flag = true,
  itemId = 1;

Page({
  data: {
    itemList: [],
  },

  onLoad: function (options) {
    items = this.data.itemList;
    this.setDropItem({
      url: '/images/2.png'
    });
  },

  // 初始化数据
  setDropItem(imgData) {
    let data = {}
    wx.getImageInfo({
      src: imgData.url,
      success: res => {
        data.width = res.width; //宽度
        data.height = res.height; //高度
        data.image = imgData.url; //地址
        data.id = ++itemId; //id
        data.top = 300; //top定位
        data.left =300; //left定位
        //圆心坐标
        // data.x=0;
        // data.y=0;
        data.x = data.left + data.width / 2;
        data.y = data.top + data.height / 2;
        data.scale = 1; //scale缩放
        data.oScale = 1; //方向缩放
        data.rotate = 0; //旋转角度
        data.active = true; //选中状态
        items[items.length] = data;
        this.setData({
          itemList: items
        })
      }
    })
  },

  // 放大旋转初始
  oTouchStart(e) {
    //找到点击的那个图片对象，并记录
    //获取作为移动前角度的坐标
    items[index].tx = e.touches[0].clientX;
    items[index].ty = e.touches[0].clientY;
    //移动前的角度
    items[index].anglePre = this.countDeg(items[index].x, items[index].y, items[index].tx, items[index].ty)
    //获取图片半径

  },

  // 放大旋转移动
  oTouchMove: function (e) {
    //记录移动后的位置
    items[index]._tx = e.touches[0].clientX;
    items[index]._ty = e.touches[0].clientY;

    //移动后位置的角度
    items[index].angleNext = this.countDeg(items[index].x, items[index].y, items[index]._tx, items[index]._ty)
    //角度差
    items[index].new_rotate = items[index].angleNext - items[index].anglePre;

    //叠加的角度差
    items[index].rotate += items[index].new_rotate;
    items[index].angle = items[index].rotate; //赋值

    //用过移动后的坐标赋值为移动前坐标
    items[index].tx = e.touches[0].clientX;
    items[index].ty = e.touches[0].clientY;
    items[index].anglePre = this.countDeg(items[index].x, items[index].y, items[index].tx, items[index].ty)
    console.log(items[index].anglePre)
    //赋值setData渲染
    this.setData({
      itemList: items
    })

  },

  /*
   *参数1和2为图片圆心坐标
   *参数3和4为手点击的坐标
   *返回值为手点击的坐标到圆心的角度
   */
  countDeg: function (cx, cy, pointer_x, pointer_y) {
    var ox = pointer_x - cx;
    var oy = pointer_y - cy;
    var to = Math.abs(ox / oy);
    var angle = Math.atan(to) / (2 * Math.PI) * 360;
    // console.log("ox.oy:", ox, oy)
    if (ox < 0 && oy < 0) //相对在左上角，第四象限，js中坐标系是从左上角开始的，这里的象限是正常坐标系  
    {
      angle = -angle;
    } else if (ox <= 0 && oy >= 0) //左下角,3象限  
    {
      angle = -(180 - angle)
    } else if (ox > 0 && oy < 0) //右上角，1象限  
    {
      angle = angle;
    } else if (ox > 0 && oy > 0) //右下角，2象限  
    {
      angle = 180 - angle;
    }
    return angle;
  }
})

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7493018
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：JS菜鸟问题 获取个位，十位，百位，千位，上的数值（注：分清%与/的区别）
• 除此之外, 这篇博客: 10个常用的JS工具库，80%的项目都在用中的 基本用法 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  import dayjs from 'dayjs'
  
  dayjs(d).format('YYYY-MM-DD HH:mm') // => 2022-01-03 16:06
  

  一个轻量的 url 参数转换的 JavaScript 库

  npm install qs

  import qs from 'qs'
  
  qs.parse('user=tom&age=22') // => { user: "tom", age: "22" }
  qs.stringify({ user: "tom", age: "22" }) // => user=tom&age=22

  一个简单的、轻量的处理 cookies 的 js API

  npm install js-cookie

  import Cookies from 'js-cookie'
  
  Cookies.set('name', 'value', { expires: 7 })
  Cookies.get('name') // => 'value'

  bilibili 开源的 html5 flash 视频播放器，使浏览器在不借助 flash 插件的情况下可以播放 flv，目前主流的直播、点播解决方案。

  npm install flv.js
  

  <video autoplay controls width="100%" height="500" id="myVideo"></video>
  
  import flvjs from 'flv.js'
  
  // 页面渲染完成后执行
  if (flvjs.isSupported()) {
    var myVideo = document.getElementById('myVideo')
    var flvPlayer = flvjs.createPlayer({
      type: 'flv',
      url: 'http://localhost:8080/test.flv' // 视频 url 地址
    })
    flvPlayer.attachMediaElement(myVideo)
    flvPlayer.load()
    flvPlayer.play()
  }
  

  一个轻量、可拓展、针对手机网页的前端开发者调试面板。如果你还苦于在手机上如何调试代码，用它就对了。

  npm install vconsole

  import VConsole from 'vconsole'
  
  const vConsole = new VConsole()
  console.log('Hello world')

  一个跨浏览器的 css3 动画库，内置了很多典型的 css3 动画，兼容性好，使用方便。

  npm install animate.css
  

  import 'animate.css';
  
  <h1 class="animate__animated animate__bounce">An animated element</h1>

  一款功能强大的 Javascript 动画库。可以与CSS3属性、SVG、DOM元素、JS对象一起工作，制作出各种高性能、平滑过渡的动画效果。

  npm install animejs
  

  <div class="ball" style="width: 50px; height: 50px; background: blue"></div>
  
  import anime from 'animejs/lib/anime.es.js'
  
  // 页面渲染完成之后执行
  anime({
    targets: '.ball',
    translateX: 250,
    rotate: '1turn',
    backgroundColor: '#F00',
    duration: 800
  })

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^