Изменение размера jQuery UI с повернутым элементом - PullRequest
Новая
       22

Изменение размера jQuery UI с повернутым элементом

0 голосов
/ 14 марта 2019

У меня есть повернутый элемент, чтобы изменить его размер.Вращение отрисовывается с помощью css transform: rotate.

Здесь у меня проблема с направлением изменения размера.

Например, когда вы перетаскиваете левый и верхний угол, чтобы сделать егоменьше, элемент будет больше.Это также происходит в правом и верхнем углу.

Взгляните: https://codepen.io/restard222/pen/JzpYxR

Я предполагаю, что библиотека изменяемого размера пользовательского интерфейса jQuery работает на основе позиции, размера до поворота.

Библиотеки 

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.Но на этот раз мне нужно решить ее, сохранив исходные источники.

HELP MEEEEE !!!

1 Ответ

0 голосов
/ 16 марта 2019

По документам :

Примечание. При создании собственных дескрипторов у каждого дескриптора должен быть класс ui-resizable-handle, а также соответствующий ui-resizable.- {direction} class, .eg, 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

...