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

Question

Working in HTML div to rotate and resize with Javascript .

Sample image:

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

Possible duplicates are:

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?

No use for me from the above link.

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..?

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.

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

Answer 1

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> 

RESIZE

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