Javascript（Jqueryなし）の比​​率でdivのサイズを変更

Question

私はJavascriptで編集ツールをコーディングしています（このプロジェクトではJqueryとHTML Canvasを使用できません）。したがって、目標はdivの端にマウスを使用し（例：四角）、divを比例してサイズ変更します（比率を使用します）。私のコードは、正方形のサイズを変更することはできますが、比例法は変更できません。純粋なjavascriptでこれを "https://jqueryui.com/resizable/#aspect-ratio"にしたいと思います。

マイコード：

var resizeHandle = document.getElementById('handle_bottom_right'); 
 
var box = document.getElementById('box'); 
 
resizeHandle.addEventListener('mousedown', initialiseResize, false); 
 
var scale = 1.1 
 

 

 
function initialiseResize(e) { 
 
\t window.addEventListener('mousemove', startResizing, false); 
 
    \t window.addEventListener('mouseup', stopResizing, false); 
 
} 
 

 
function startResizing(e) { 
 
    box.style.width = (e.clientX - box.offsetLeft) + 'px'; 
 
    box.style.height = (e.clientY - box.offsetTop) + 'px'; 
 
} 
 

 
function stopResizing(e) { 
 
    window.removeEventListener('mousemove', startResizing, false); 
 
    window.removeEventListener('mouseup', stopResizing, false); 
 
} 
 

 

 
function doubleClicked(element){ 
 
    setTimeout(function(){ 
 
    if(document.activeElement !== element){ 
 
     element.contentEditable = false; 
 
    } 
 
    }, 300); 
 
}

#box { 
 
    position: relative; 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: #2196F3; 
 
    color: white; 
 
    display:flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
    border-radius: 10px; 
 
} 
 

 
#handle_bottom_right { 
 
    background-color: #727272; 
 
    width: 10px; 
 
    height: 10px; 
 
    cursor: se-resize; 
 
    position:absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
}

<div id="box" onclick="showCoords(event);"> 
 
    <p onclick="this.contentEditable=true; doubleClicked(this);" onblur="this.contentEditable=false;" contenteditable="false">double click me to change me</p> 
 
    <div id="handle_bottom_right"></div> 
 
</div> 
 
<p id="demo"></p> 
 
<p id="demo1"></p>

は、これを解決する方法を任意のIDEESを持っている人はありますか？

Answer 1

var resizeHandle = document.getElementById('handle_bottom_right'); 
 
var box = document.getElementById('box'); 
 
resizeHandle.addEventListener('mousedown', initialiseResize, false); 
 
var scale = 1.1 
 

 

 
function initialiseResize(e) { 
 
\t window.addEventListener('mousemove', startResizing, false); 
 
    \t window.addEventListener('mouseup', stopResizing, false); 
 
} 
 

 
function startResizing(e) { 
 
    var w = (e.clientX - box.offsetLeft); 
 
    box.style.width = w + 'px'; 
 
    //box.style.height = (e.clientY - box.offsetTop) + 'px'; 
 
    box.style.height = Math.round(scale*w)+'px'; 
 
} 
 

 
function stopResizing(e) { 
 
    window.removeEventListener('mousemove', startResizing, false); 
 
    window.removeEventListener('mouseup', stopResizing, false); 
 
} 
 

 

 
function doubleClicked(element){ 
 
    setTimeout(function(){ 
 
    if(document.activeElement !== element){ 
 
     element.contentEditable = false; 
 
    } 
 
    }, 300); 
 
}

#box { 
 
    position: relative; 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: #2196F3; 
 
    color: white; 
 
    display:flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
    border-radius: 10px; 
 
} 
 

 
#handle_bottom_right { 
 
    background-color: #727272; 
 
    width: 10px; 
 
    height: 10px; 
 
    cursor: se-resize; 
 
    position:absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
}

<div id="box" onclick="showCoords(event);"> 
 
    <p onclick="this.contentEditable=true; doubleClicked(this);" onblur="this.contentEditable=false;" contenteditable="false">double click me to change me</p> 
 
    <div id="handle_bottom_right"></div> 
 
</div> 
 
<p id="demo"></p> 
 
<p id="demo1"></p>