如何在旋转后调整DIV元素大小时保持固定角 [英] How to maintain fixed corner while resize a DIV element after rotate

问题描述

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

Working in HTML div to rotate and resize with Javascript.

示例图片

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

I can't able to make a corner remains fixed while resize after rotate.

可能重复的是：

如何在旋转后调整大小时计算平移x和y值？？

调整逻辑以在javascript中旋转后维持固定的角落

如何调整机智大小旋转后固定角落？

上述链接对我没用。

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

I need a similar functionality like this one, but its svg. I need this with div elements, not for svg.

我检查了更多像这个，仅用于查找旋转后的角位置，但是在找到这个如何在调整大小时固定角落的时候..

I checked too more links like this one, those are only used to find corner positions after rotate, but after finding this how to set corner fixed while resize..?

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

What is the step by step procedure to maintain opposite corners fixed when resize after rotate..?

我使用了一个示例代码供参考，需要了解，但我在旋转后实现了基于中心的调整大小，我无法添加所有代码。我可以用 0度和 360度固定角落来调整大小，但是我需要修复角落以及所有其他角度。

I used one sample code for reference to understand by need, but i achieved center based resize after rotate, i can't add all the codes. I can resize with corner fixed with 0 deg and 360 deg, but i need fixed corner with all others angles.

注意：旋转后保持固定角落 Canva 和 Powtoon 在中进行了一些调整（x，y） => by Canva和左， top => by Powtoon 。

Note: To maintain fixed corner after rotate Canva and Powtoon made some adjustments in translate(x,y) => by Canva and left,top => by Powtoon.

推荐答案

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

Could it be a start? (not the 100% solution, but a way to approach it, improvable):

$(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}）更改鼠标移动时保持框角度的宽度和高度。

After that, you can play with <jQuerySet>.css({:width, :height}) to change the width and the height when mouse moves keeping the box angle.

这篇关于如何在旋转后调整DIV元素大小时保持固定角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！