时间戳

首页 > 解决方案 > 旋转后如何调整div的大小（是否可以根据旋转修改鼠标事件坐标？）

javascript - 旋转后如何调整div的大小（是否可以根据旋转修改鼠标事件坐标？）

问题描述

一个 div 周围有 8 个节点，可以在 8 个方向上调整 div 的大小，当 div 不旋转时，它们可以正确调整大小。但是，当 div 旋转时，例如顺时针旋转 90 度，则行为很奇怪，因为鼠标事件与旋转的 div 不同。

我检查了这些但没有帮助：

我在这里做了一个演示：https ://output.jsbin.com/nobasavaza

有任何想法吗？

```

 <!DOCTYPE html>
    <html>
    
    <head>
      <title></title>
      <style>
        #cut {
          opacity: 0.6;
          height: 150px;
          width: 150px;
          position: absolute;
          top: 150px;
          left: 150px;
          cursor: pointer;
          border: 1px dotted red;
    
        }
    
        .box-resize {
          border: 1px solid black;
          width: 4px;
          height: 4px;
          position: absolute;
        }
    
        .box-top-left {
          top: -3px;
          left: -3px;
          cursor: nw-resize;
        }
    
        .box-top-right {
          top: -3px;
          right: -3px;
          cursor: ne-resize;
        }
    
        .box-left-center {
          top: 50%;
          left: -3px;
          cursor: w-resize;
        }
    
        .box-right-center {
          top: 50%;
          right: -3px;
          cursor: e-resize;
        }
    
        .box-bottom-left {
          left: -3px;
          bottom: -3px;
          cursor: sw-resize;
        }
    
        .box-bottom-right {
          right: -3px;
          bottom: -3px;
          cursor: se-resize;
        }
    
        .box-top-center {
          left: 50%;
          top: -3px;
          cursor: n-resize;
        }
    
        .box-bottom-center {
          left: 50%;
          bottom: -3px;
          cursor: s-resize;
        }
      </style>
    </head>
    
    <body>
      <input type="text" id="rotate_degree" placeholder="degree in closewise">
      <button id="rotate_submit">rorate</button>
      <div id="cut">
        hello
        <div class="box-resize box-top-left"></div>
        <div class="box-resize box-top-right"></div>
        <div class="box-resize box-left-center"></div>
        <div class="box-resize box-right-center"></div>
        <div class="box-resize box-bottom-left"></div>
        <div class="box-resize box-bottom-right"></div>
        <div class="box-resize box-top-center"></div>
        <div class="box-resize box-bottom-center"></div>
      </div>
      <script> 
        window.onload = function () {
          var resize = document.getElementsByClassName("box-resize");
          var cut = document.getElementById("cut");
          var cutWidth = 0;
          var cutHeight = 0;
          var startX = 0;
          var startY = 0;
          var top = 0;
          var left = 0;
          var dir = "";
          for (var i = 0; i < resize.length; i++) {
            resize[i].onmousedown = function (e) {
              startX = e.clientX;
              startY = e.clientY;
              cutWidth = cut.offsetWidth;
              cutHeight = cut.offsetHeight;
              top = cut.offsetTop;
              left = cut.offsetLeft;
              var className = this.className;
              if (className.indexOf("box-right-center") > -1) {
                dir = "E";
              }
              else if (className.indexOf("box-top-left") > -1) {
                dir = "NW";
              }
              else if (className.indexOf("box-top-right") > -1) {
                dir = "NE";
              }
              else if (className.indexOf("box-left-center") > -1) {
                dir = "W";
              }
              else if (className.indexOf("box-bottom-left") > -1) {
                dir = "SW";
              }
              else if (className.indexOf("box-bottom-right") > -1) {
                dir = "SE";
              }
              else if (className.indexOf("box-bottom-center") > -1) {
                dir = "S";
              }
              else if (className.indexOf("box-top-center") > -1) {
                dir = "N";
              }
              document.addEventListener('mousemove', test);
    
              e.preventDefault();
    
            }
          }
    
    
          document.onmouseup = function (e) {
            dir = "";
            document.removeEventListener('mousemove', test);
    
            e.preventDefault();
    
          }
    
          function test(e) {
            var width = e.clientX - startX;
            var height = e.clientY - startY;
    
            if (dir == "E") {
              cut.style.width = cutWidth + width + "px";
            }
            else if (dir == "S") {
              cut.style.height = cutHeight + height + "px";
            }
            else if (dir == "N") {
              if (height < cutHeight) {
                cut.style.height = cutHeight - height + "px";
                cut.style.top = top + height + "px";
              }
            }
            else if (dir == "W") {
              if (width < cutWidth) {
                cut.style.width = cutWidth - width + "px";
                cut.style.left = left + width + "px";
              }
            }
            else if (dir == "NW") {
              if (width < cutWidth && height < cutHeight) {
                cut.style.width = cutWidth - width + "px";
                cut.style.height = cutHeight - height + "px";
                cut.style.top = top + height + "px";
                cut.style.left = left + width + "px";
              }
            }
            else if (dir == "NE") {
              if (height < cutHeight) {
                cut.style.width = cutWidth + width + "px";
                cut.style.height = cutHeight - height + "px";
                cut.style.top = top + height + "px";
              }
            }
            else if (dir == "SW") {
              if (width < cutWidth) {
                cut.style.width = cutWidth - width + "px";
                cut.style.height = cutHeight + height + "px";
                cut.style.left = left + width + "px";
              }
            }
            else if (dir == "SE") {
              if (width < cutWidth) {
                cut.style.width = cutWidth + width + "px";
                cut.style.height = cutHeight + height + "px";
              }
            }
          }
        }
    
    
        document.getElementById('rotate_submit').addEventListener('click', function () {
          const degree = document.getElementById('rotate_degree');
          document.getElementById("cut").style.transform = 'rotate(' + degree.value + 'deg)';
        })
    
      </script>
    </body>
    
    </html>

```

标签： javascripthtmlcss

解决方案

推荐阅读