如何在我们旋转元素时更改 JQuery 重新调整大小处理轴？

Question

. Answers to this question are eligible for a +50 reputation bounty. Bounty grace period ends in 15 hours . Harry K wants to to this question.

I'm trying to add JQuery resize with handles to an element and it works fine, Except when I rotate it transform: rotate(90deg) or any other angle, the handles axis remains the same and causes issues.

I'm trying to rotate the resize handlers axis as per the elements' angle (if that's possible).

Here's the sample code I made for this:

<div class="main">
  <img src="https://tinypng.com/images/social/website.jpg" />
</div>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<style>
.main {
  width: 400px;
  height: 400px;
  /* transform:rotate(90deg); */
  & img {
    width:100%;
    width:100%;
  }
}
</style>

<script>
function dragger() {
  $(".main").draggable({
      cursor: "move"
    });

    $(".main").resizable({
      handles: "n, e, s, w, se, ne",
     });
}

dragger();
</script>

Here, the resize along with draggable works perfectly fine, except as I add transform: rotate(90deg) to the `main element, the resize handles axis remains the same.

Here's a JSFiddle for the same to play around.

Any help is greatly appreciated.

Answer 1

It is possible to rotate the resize handles along with the element by using the jQuery UI's resize event , and updating the position of the handles based on the element's rotation angle.

Here you go -

 function dragger() { $(".main").draggable({ cursor: "move" }); $(".main").resizable({ handles: "n, e, s, w, se, ne", resize: function(event, ui) { var angle = $(this).data('angle') || 0; var newAngle = angle; var n = $(this).find('.ui-resizable-n'); var e = $(this).find('.ui-resizable-e'); var s = $(this).find('.ui-resizable-s'); var w = $(this).find('.ui-resizable-w'); var se = $(this).find('.ui-resizable-se'); var ne = $(this).find('.ui-resizable-ne'); n.css('top', Math.sin(newAngle) * n.width() + 'px'); n.css('left', Math.cos(newAngle) * n.height() + 'px'); e.css('top', Math.sin(newAngle) * e.width() + 'px'); e.css('left', Math.cos(newAngle) * e.height() + 'px'); s.css('top', Math.sin(newAngle) * s.width() + 'px'); s.css('left', Math.cos(newAngle) * s.height() + 'px'); w.css('top', Math.sin(newAngle) * w.width() + 'px'); w.css('left', Math.cos(newAngle) * w.height() + 'px'); se.css('top', Math.sin(newAngle) * se.width() + 'px'); se.css('left', Math.cos(newAngle) * se.height() + 'px'); ne.css('top', Math.sin(newAngle) * ne.width() + 'px'); ne.css('left', Math.cos(newAngle) * ne.height() + 'px'); } }); } dragger();

 .main { width: 400px; height: 400px; transform:rotate(90deg); & img { width:100%; width:100%; } }

 <div class="main"> <img src="https://tinypng.com/images/social/website.jpg" /> </div> <script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

Answer 2

You can wrap the element in a container and apply the transform to the container, not to the element itself. Then, add the following CSS to rotate the handles:

.ui-resizable-handle {
  transform: rotate(45deg);
}

This should rotate the handles so that they align with the rotated element.

Answer 3

You can calculate the new position of the handles based on the rotation angle and the original position of the handle. You can do this using JavaScript and the CSS transform properties.

Here's a sample code that you can use:

<div class="main">
  <img src="https://tinypng.com/images/social/website.jpg" />
</div>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
.main {
  width: 400px;
  height: 400px;
  transform: rotate(90deg);
  & img {
    width:100%;
    width:100%;
  }
}
</style>
<script>
function dragger() {
  $(".main").draggable({
      cursor: "move"
    });

  $(".main").resizable({
    handles: "n, e, s, w, se, ne",
    start: function(event, ui) {
      // Store the original position of the handles
      var handles = $(this).resizable("option", "handles");
      $(handles).each(function() {
        var handle = $(this);
        var pos = handle.position();
        handle.data("origin", {
          top: pos.top,
          left: pos.left
        });
      });
    },
    resize: function(event, ui) {
      // Calculate the new position of the handles based on the rotation angle
      var rotation = $(this).css("transform");
      rotation = rotation.split("(")[1];
      rotation = rotation.split("deg")[0];
      rotation = parseInt(rotation);
      var handles = $(this).resizable("option", "handles");
      $(handles).each(function() {
        var handle = $(this);
        var origin = handle.data("origin");
        var newTop = origin.top - ui.originalPosition.top + ui.position.top;
        var newLeft = origin.left - ui.originalPosition.left + ui.position.left;
        var newPos = rotate(newTop, newLeft, rotation);
        handle.css("top", newPos.top);
        handle.css("left", newPos.left);
      });
    }
  });
}

function rotate(top, left, angle) {
  // Calculate the new position of the handle based on the rotation angle
  var rad = angle * Math.PI / 180;
  var cos = Math.cos(rad);
  var sin = Math.sin(rad);
  var newTop = left * sin + top * cos;
  var newLeft = left * cos - top * sin;
  return {
    top: newTop,
    left: newLeft
  };
}

dragger();
</script>