jQuery UI 可通过旋转元素调整大小答案

【问题标题】：jQuery UI resizable with rotated elementjQuery UI 可通过旋转元素调整大小
【发布时间】：2019-03-14 09:53:20
【问题描述】：

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

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

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

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

我猜想 jQuery UI 可调整大小的库有效基于位置，旋转前的大小。

图书馆

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);

我知道在 css 中使用 canvas 而不是 dom 会更好。但这一次我需要在保留原始来源的情况下解决它。

帮帮我！！！

【问题讨论】：

标签： javascript jquery css rotation resizable

【解决方案1】：

根据docs：

注意：生成自己的句柄时，每个句柄都必须具有 ui-resizable-handle 类，以及相应的 ui-resizable-{direction} 类，例如 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

【讨论】：