图片360度无死角自由旋转

前言

 
图片360度任意旋转,
 

一、设计思路

1.确定中心和起始点：当鼠标点击旋转图标时，中心点为左边图片中心，起始点为旋转图标中心；

2.确定结束点：当鼠标移动时，鼠标的每一次变换都会更新结束点的坐标；

3.通过坐标点计算出该三角形三条边的长度(勾股定理)，再通过余弦函数算出弧度制，反余弦函数将弧度 制转换为角度制(思路详解中会详细介绍)；

4.ie下通过滤镜，其它浏览器通过rotate实现最终效果；

 

二、思路详解

1.html部分

<div class="rotateImg">
  <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.tukexw.com%2Fimg%2F1d3d6d3bc7578c21.jpg&refer=http%3A%2F%2Fimg.tukexw.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621488806&t=9afe6c19464c4570f7ad05fc1d8f2daa">
  <div  @mousedown="rotate" class="rotate-char" >
    
  </div>
</div>
<style>
  .rotateImg{
    position:fixed;
    top:64px;
    left:256px;
    z-index:99999;
    background:#ccc;
  }
  .rotate-char{
    cursor:pointer;
    width:16px;
    height:16px;
    position:absolute;
    bottom:50%;
    margin-bottom:-8px;
    right:-36px;
    background:url('https://www.easyicon.net/api/resizeApi.php?id=1223185&size=16')
  }
</style>

2.旋转的方法

function rotate(){
	
      let rotate = document.querySelector(".rotate-char");
      let move = rotate.parentNode;
      let sum = 0;
      // 坐标定义,中心点，起始点，终点鼠标移动时，实时更新
      let centercoord = [move.offsetLeft+move.clientWidth/2,move.clientHeight/2+move.offsetTop],
          firstcoord = [centercoord[0]+rotate.offsetLeft+rotate.clientWidth/2-move.clientWidth/2,centercoord[1]],
          lastcoord = [];
      //鼠标按下后移动事件
      let moveFunc = () => {
        let deg = 0;
        let e = event || window.event,x = e.clientX,y=e.clientY;
        // 中心点 开始点 结束点
        lastcoord = [x,y];
        //结束点坐标随时更新
        deg = getAngle(centercoord,firstcoord,lastcoord);
        move.setAttribute("style","transform:rotate("+deg+"deg)")
      }
      //移动事件绑定
      window.document.addEventListener("mousemove",moveFunc);
      //鼠标抬起解绑移动事件
      let cancel = () => {
        window.document.removeEventListener("mousemove",moveFunc)
      };
      window.document.addEventListener("mouseup",cancel);
}

3.获取角度的方法

getAngle(cen,first,last){

      let c_f_x = first[0] - cen[0],
          c_f_y = first[1] - cen[1],
          l_c_x = last[0] - cen[0],
          l_c_y = last[1] - cen[1];
          
      //求导出逆时针还是顺时针旋转
      let dir = c_f_x * l_c_y - c_f_y * l_c_x;
      //算出三角形三条边的长度,pow可以将数据进行乘方运算
      let len_cf = Math.sqrt(Math.pow(cen[0] - first[0],2) + Math.pow(cen[1] - first[1],2)),
          len_cl = Math.sqrt(Math.pow(cen[0] - last[0],2) + Math.pow(cen[1] - last[1],2)),
          len_fl = Math.sqrt(Math.pow(first[0] - last[0],2) + Math.pow(first[1] - last[1],2));
      
      //算出三条边后通过余弦定理求出旋转角
      let cosA = (Math.pow(len_cf,2)+Math.pow(len_cl,2) - Math.pow(len_fl,2))/(len_cf*len_cl*2);
      //弧度制转为角度制
      let angle = Math.round(Math.acos(cosA) * 180 / Math.PI);
      
      // 判断逆时针，顺时针方向旋转
      if(dir < 0){
        //逆时针
        angle = -angle
      }
      return angle;
    },

  

ps：余弦定理，忘记的看这