如何在旋转后调整DIV元素大小时保持固定角

Question

使用HTML div工作使用Javascript旋转和调整大小。

示例图片

旋转后调整大小时，我无法使角保持固定。

可能的重复是：

How to calculate translate x and y value when resize after rotate..?

Resize logic to maintain a fixed corner after rotate in javascript

How to resize with fixed corner after rotate?

上述链接对我没用。

我需要类似this之类的功能，但是它的svg。我需要这个div元素，而不是svg。

我检查了更多的链接，例如this一个，这些仅用于在旋转后查找角落位置，但是在找到这个如何设置角落固定时调整大小...？

旋转后调整大小时，保持对角固定的一步一步程序是什么？？

我使用一个sample code作为参考来理解需要，但我在旋转后实现了基于中心的调整大小，我无法添加所有代码。我可以使用0 deg和360 deg修复角点来调整大小，但我需要修复角落以及所有其他角度。

注意：要在轮换Canva之后保持固定角落，Powtoon在translate(x,y) =＆gt;中进行了一些调整由Canva和left，top =＆gt;由Powtoon。

Answer 1

这可能是一个开始吗？ （不是100％的解决方案，而是一种接近它的方法，可以改进）：

$(document).ready(function(){
  
  /** 
    * The rotation method
    *
    * @param domElement  The element to rotate
    * @param origin      The origin of the rotate
    * @param degree      The degrees amount for the angle
    */
  function rotate(domElement, origin, degree) {
      $(domElement)
        .css({ WebkitTransform: 'rotate(' + degree + 'deg)'})
        .css({ '-moz-transform': 'rotate(' + degree + 'deg)'})
        .css({'transform-origin': origin || 'bottom right'})
        ;                   
      // To avoid to 'too much' recursion, we use a timeout
      let timer = setTimeout(function() {
        rotate(++degree);
        clearTimeout(timer);
      },5);
  }
  
  let Cadre       = $('div#cadre')
    , curHandler  = undefined
    , startPosX   = 0
    , startPosY   = 0
    ;
  
  /**
    * When user click down on a handler
    * => curHandler is defined => we work
    */
  $('.handler').mousedown(function(ev){
    startPosX = ev.pageX ;
    startPosY = ev.pageY ;
    $(this).addClass('clicked');
    curHandler = $(this);
  })
  /**
    * When user click up on a handler
    * => curHandler is undefined => stop work
    */
  $('.handler').mouseup(function(ev){
    $(this).removeClass('clicked');
    curHandler = undefined ;
  })
  
  /**
    * When user move the mouse
    * We only work when an handler (curHandler) is defined
    * Otherwise, we do nothing
    */
  $('body').mousemove(function(ev){
    if (curHandler)
    {
      // <= A handler is defined (click down)
      // => we rotate when mouse mouve
      angle = startPosX - ev.pageX ;
      // The rotation origin is set in the HTML Handler, but
      // we could get it from a JS constant or anything
      rotate(Cadre, curHandler.attr('data-origin'), angle);     }
  })
})

div#cadre { 
    width: 200px;
    height: 100px;
    background-color: darkblue;
    top: 50px;
    left: 100px;
    position: fixed;
    clear:both;
  }
  div.handler {position:absolute; width:5%;height:10px;background-color:red;}
  div.handler.clicked{background-color:green!important;}
  div.tl-handler {top:0; left:0;}
  div.tr-handler {top:0; right:0;}
  div.bl-handler {bottom:0; left:0;}
  div.br-handler {bottom:0; right:0;}
  div.mt-handler {top:0;left:47.5%;}
  div.mb-handler {bottom:0;left:47.5%;}
  
  div#explain {font-size:9.2pt;font-style:italic;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="explain">Click on the green handler to stop rotation (if any)</div>
<div id="cadre">
  <div class="handler tl-handler" data-origin="top left"></div>
  <div class="handler tr-handler" data-origin="top right"></div>
  <div class="handler bl-handler" data-origin="bottom left"></div>
  <div class="handler br-handler" data-origin="bottom right"></div>
  <div class="handler mt-handler" data-origin="50% top"></div>
  <div class="handler mb-handler" data-origin="50% bottom"></div>
</div>

RESIZE

之后，您可以使用<jQuerySet>.css({:width, :height})来更改鼠标移动时保持框角度的宽度和高度。