使用Javascript中的比例调整div的大小（不含jquery）

问题描述：

我使用Javascript编写了一个编辑工具（我无法在此项目中使用Jquery和HTML Canvas）。所以我们的目标是在div的边缘使用鼠标（例如：方形），并按比例调整div的大小（使用比例）。我的代码现在可以调整广场的大小，但不是比例。我想在纯javascript中制作这个“https://jqueryui.com/resizable/#aspect-ratio”。使用Javascript中的比例调整div的大小（不含jquery）

我的代码：

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如何解决这个问题？

'box.style.height = box.style.width * 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) { 
 
    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>

使用Javascript中的比例调整div的大小（不含jquery）

相关推荐