Question

我有一个旋转的元素以使其可调整大小。旋转是通过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);

我知道最好使用canvas而不是使用CSS的dom。但这一次我需要解决它，仍然保留原始来源。

帮助我！

Answer 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

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

1 个答案: