javascript - 使用 Javascript 中的比例调整 div 的大小(没有 Jquery)

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) {
	window.addEventListener('mousemove', startResizing, false);
   	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>

有没有人知道如何解决这个问题？

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) {
	window.addEventListener('mousemove', startResizing, false);
   	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>