旋轉后調整DIV元素的大小時如何保持固定的角

Question

在HTML div中使用Javascript進行旋轉和調整大小 。

樣本圖片：

旋轉后調整大小時，我無法使拐角保持固定 。

可能的重復項是：

旋轉后調整大小時如何計算x和y轉換值？

在javascript中旋轉后調整邏輯大小以保持固定的角

旋轉后如何用固定的角調整大小？

從上面的鏈接對我沒有用。

我需要一個像類似的功能這一個，但它的SVG。 我需要div元素 ，而不是svg。

我查過更像鏈接這一個，那些只是用來尋找旋轉后的角落位置，但找到這個如何設置角落固定的，而調整后的..？

旋轉后調整大小時，如何保持對角固定不變的逐步步驟？

我使用了一個示例代碼作為參考，以根據需要進行理解，但是旋轉后我實現了基於中心的調整大小，因此無法添加所有代碼。 我可以使用固定為0 deg和360 deg角來調整大小，但是我需要固定所有其他角度的角。

注：為了保持固定的角落旋轉后Canva和Powtoon做出一些調整translate(x,y)由Canva =>和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})來更改鼠標移動時保持框角的寬度和高度。