Как реализовать масштабирование как в Paint на js

Question

Хочется сделать эффект на JS, чтобы при удерживании LMB на .changer и при перетаскивании его из стороны в сторону менялась ширина .block, как в Paint или Photoshop, есть идея сделать это через событие mousemove, но не знаю как реализовать синюю пунктирную рамку как в самом Paint.
Помогите пожалуйста!)

.block {
  width: 500px;
  height: 500px;
  background: lightgreen;
}

.changer {
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid black;
  background-color: #fff;
  left: 500px;
  top: 250px;
}

<div class="block">
  <div class="changer"></div>
</div>

Answer 1

Об этом идёт речь?

body {
  height: 100vh;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
}

.resize {
  display: block;
  min-width: 10px;
  width: 100px;
  max-width: 100%;
  min-height: 10px;
  height: 100px;
  max-height: 100%;
  border: 1px solid blue;
  overflow: hidden;
  box-sizing: border-box;
  resize: both;
}

<div class="resize"></div>

БЛОГ НА HUSL

Как реализовать масштабирование как в Paint на js

Ответы (1 шт):