js css3 固定点拖拽旋转

一、直接上效果图：

然后是代码：

一共两种实现方式：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

  <style>

    .box {

      width: 200px;

      height:100px;

      background: #cccccc;

      position: absolute;

      top: 30%;

      left: 40%;

      transform-origin: 50% 50% 0;

    }

  </style>

</head>

<body>

  <div id="box" class="box"></div>

  <script>

    // 第一种

    var isMove = false;

    $('#box').mousedown(function (event) {

      const element = event.target;

      const rect = element.getBoundingClientRect();

      element.dataset.centerX = rect.left + rect.width / 2;

      element.dataset.centerY = rect.top + rect.height / 2;

      element.dataset.angle = getDragAngle(event);

      isMove = true;

    });

    $('#box').mousemove(function (event) {

      if (isMove) {

        var angle = getDragAngle(event);

        event.target.style.transform = 'rotate(' + angle + 'rad)';

      }

    });

    $('#box').mouseup(function (event) {

      isMove = false;

      event.target.dataset.angle = getDragAngle(event);

    });

    function getDragAngle(event) {

      var element = event.target;

      var startAngle = parseFloat(element.dataset.angle) || 0;

      var center = {

        x: parseFloat(element.dataset.centerX) || 0,

        y: parseFloat(element.dataset.centerY) || 0,

      };

      var angle = Math.atan2(center.y - event.clientY, center.x - event.clientX);

      return angle - startAngle;

    }

//     第二种

//     $(document).on('mousemove',function(e){

//       var x = e.clientX;

//       var y = e.clientY;

//       var origin = {x:950,y:190} // 先手动指定当前中心点，也可以根据当前元素的left+width/2 的到x  top+height/2 得到y值

//       // 计算出当前鼠标相对于元素中心点的坐标

//       x = x - origin.x; // 因为x大于origin.x 是在y轴右边，直接减就行了

//       y = origin.y - y;// 但是y如果要在x轴上方，它是比origin.y要小的，所以这里就需要反过来

//        // 然后计算就可以了

//       var ele = document.getElementById('box')

//       var deg = Math.atan2(y, x) / Math.PI * 180;

//       ele.style.transform = 'rotate('+ -deg +'deg)'

// });

    </script>

</body>

</html>

二、固定4个顶点

代码：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

  <style>

    * {

      user-select: none;

    }

    .box {

      width: 200px;

      height:100px;

      background: #cccccc;

      position: relative;

      top: 30%;

      left: 40%;

      transform-origin: 50% 50% 0;

      margin-top: 15%;

    }

    .dot {

      position: absolute;

      width: 20px;

      height: 20px;

      background-color: #f60;

    }

    .dot1 {

      top: -10px;

      left: -10px;

    }

    .dot2 {

      top: -10px;

      right: -10px;

    }

    .dot3 {

      bottom: -10px;

      right: -10px;

    }

    .dot4 {

      bottom: -10px;

      left: -10px;

    }

  </style>

</head>

<body>

  <div id="box" class="box">

    <div class="dot dot1"></div>

    <div class="dot dot2"></div>

    <div class="dot dot3"></div>

    <div class="dot dot4"></div>

  </div>

  <script>

    // 第一种

    var isMove = false;

    $('.dot').mousedown(function (event) {

      const element = $('#box')[0]

      const rect = element.getBoundingClientRect();

      element.dataset.centerX = rect.left + rect.width / 2;

      element.dataset.centerY = rect.top + rect.height / 2;

      element.dataset.angle = getDragAngle(event);

      isMove = true;

    });

    $(document).mousemove(function (event) {

      if (isMove) {

        var angle = getDragAngle(event);

        $('#box')[0].style.transform = 'rotate(' + angle + 'rad)';

      }

    });

    $(document).mouseup(function (event) {
　　　 if (isMove) {

      　　isMove = false;

      　　$('#box')[0].dataset.angle = getDragAngle(event);
  　　 }

    });

    function getDragAngle(event) {

      var element = $('#box')[0];

      var startAngle = parseFloat(element.dataset.angle) || 0;

      var center = {

        x: parseFloat(element.dataset.centerX) || 0,

        y: parseFloat(element.dataset.centerY) || 0,

      };

      var angle = Math.atan2(center.y - event.clientY, center.x - event.clientX);

      return angle - startAngle;

    }

    </script>

</body>

</html>

巴特西

js css3 固定点拖拽旋转

最新文章

热门文章