javascript - 可通过旋转元素调整大小的 jQuery UI

Question

我有一个旋转元素以使其可调整大小。旋转由css transform:rotate绘制。

这里有个问题调整大小的方向无法正常工作。

例如，当您拖动左上角使其变小时，该元素会更大。它也发生在右上角。

看看:https://codepen.io/restard222/pen/JzpYxR

我想 jQuery UI resizable 库可以工作基于旋转前的位置、大小。

图书馆

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css

HTML

<div class="rotate-canvas">
  <div class="rectangle_rotate">
    <div class="handler _se se"></div>
    <div class="handler _sw sw"></div>
    <div class="handler _ne ne"></div>
    <div class="handler _nw nw"></div>
  </div>
</div>

SCSS

.rotate-canvas{
  position: relative;
  width: 600px;
  height: 400px;
  margin: 24px auto;
  border: 1px solid;
}
.rectangle_rotate{
  position: relative;
  width: 200px;
  height: 100px;
  background: blue;
  top: 100px;
  left: 100px;
  opacity: .5;
  transform: rotate(285deg);
  &:before{
    position: absolute;
    top: 0;
    left: 0;
    content: 'top';
  }
  &:after{
    position: absolute;
    bottom: 0;
    right: 0;
    content: 'bottom';
  }
}

.handler{
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border: 1px solid black;
  border-radius: 50%;
  &._se{
    bottom: -5px;
    right: -5px;
  }
  &._sw{
    bottom: -5px;
    left: -5px;
  }
  &._nw{
    top: -5px;
    left: -5px;
  }
  &._ne{
    top: -5px;
    right: -5px;
  }
}

JavaScript

var resizable_options = {
    handles    : {'se': '.se', 'sw': '.sw', 'ne': '.ne', 'nw': '.nw'}
  , aspectRatio: 200 / 100
}
$('.rectangle_rotate').resizable(resizable_options);

我知道用 canvas 代替 dom 和 css 会更好。但这次我需要解决它，保留原始来源。

帮助我!!!

Answer 1

根据 docs :

Note: When generating your own handles, each handle must have the ui-resizable-handle class, as well as the appropriate ui-resizable-{direction} class, .e.g., ui-resizable-s.

通过添加 <div class="ui-resizable-handle ui-resizable- 更新您的处理程序，比如:

<div class="ui-resizable-handle ui-resizable-se handler _se se"></div>
<div class="ui-resizable-handle ui-resizable-sw handler _sw sw"></div>
<div class="ui-resizable-handle ui-resizable-ne handler _ne ne"></div>
<div class="ui-resizable-handle ui-resizable-nw handler _nw nw"></div>

更新代码笔: https://codepen.io/anon/pen/MxGwGp