如何在旋转后调整 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 在 Canva 和 left 和 left,top => 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>

调整大小

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