Математические расчеты для адаптивного масштабирования элемента с предками на JS?

Question

[thehighhomie]

Пишу приложене, которое должно уметь масштабировать элементы как к примеру в фотошопе: есть контейнер, в не определенное количество элементов, которые при уменьшении/увеличении контейнера должны вместе с ним адаптированно уменьшаться/увеличиваться, к примеру как на сервисе canva.com, когда презентацию уменьшаешь или увеличиваешь то элементы должны подстраиваться.

Так как все это должно работать на js, адаптиваная верстка не катит)

Из размышлений я пришел к следующему:
Элементы должны менять только размеры (ширину, высоту с учетом соотношения сторон).
Смещения никакого тоже не нужно (top, left, translateX/Y)
Написал код изменения размера элемента (только для уменьшения):

let width = this.container.clientWidth;
let scalePercent = (this.maxWidth - width) * 100 / this.maxWidth; // this.maxWidth - это изначальная ширина контейнера, самая большая.
let elemWidth = this.container.clientWidth - (scalePercent * 100 / this.container.clientWidth);
let height = (width * this.aspectRatio / 100);
elemstyle.height = height + 'px';
elem.style.width = width + 'px';

В общем я высчитываю процент из ширины контейнера - текущая ширина контейнера, потом из этого процента получаю нужную ширину для элемента. Ну и высоту ставлю пропорционально ширине.

И это не работает правильно. Элементы уменьшаются очень быстро, до точек...

Подскажите рабочий способ пожалуйста.

Answer 1

[Griboks]

Написал код изменения размера элемента

Не понимаю, откуда это взялось. Поэтому предлагаю свой алгоритм:

let scale = newContainerWidth/oldContainerWidth;
element.width*=scale;
element.containerRelativePosition.x*=scale;

Comments

[thehighhomie]

о) круто) попробую ночью и отпишу)

[thehighhomie]

Все работает отлично))) спасибо огромное! вы крут!)

[thehighhomie]

я только вместо containerRelativePosition выставлял top/left

[thehighhomie]

Добрый вечер) вы сможете еще помочь с одними расчетами?) не могу разные пропорции подстроить при кроп-ресайзе) то что я делаю не найти в интернете, такого стака просто нет. Я выложу код куда-нибудь на codepen или jsfiddle и создам новый вопрос) поможете?

[Griboks]

thehighhomie, создавайте вопрос. Тут много людей на них отвечают. И я в том числе, но не подписан на js из-за кучи мусора в этой ветке.

[thehighhomie]

Griboks, я не видел не разу таких вопросов) тут математика нужна, не могу правильно блоки подстроить при ресайзе, с разными пропорциями. я залью код на jsfiddle, упрощу его, чтобы было удобнее разобраться, создам вопрос и напишу ссылку сюда вам. хорошо?)

Тут много людей на них отвечают.

В этом вопросе еще Виталий ответил, вот такие Виталии постоянно отвечают на вопросы, а такие как вы очень редко. Вы сразу поняли вопрос и дали на него точный ответ. А на такие вопросы я думаю что тут единицы могут ответить по существу.

[thehighhomie]

Griboks, Здравствуйте!) я создал вопрос, постарался более понятно описать его. снял видео и добавил код. В коде нужно посмотреть только колбек ресайза, я его тоже прокомментировал, чтобы максимально понятнее было для вас. вот ссылка на вопрос Математические расчеты при кроп-ресайзе элементов с разными пропорциями? Очень вас жду)))

[thehighhomie]

Griboks, про что я и говорил, единицы такое могут решить. 50 просмотров и ни кто не отписал даже( вы посмотрите?

Answer 2

[Виталий]

Так как все это должно работать на js, адаптиваная верстка не катит)

что значит на JS ? JS вы можете логику написать, но отображаться то оно будет всеравно в html

Comments

[thehighhomie]

если бы катила то я бы не писал сюда) все элементы имеют position: absolute, и перемещаются в контейнере DragAndDrop'ом)))

[Виталий]

thehighhomie, в примере висит событие resize окна и по нему каждый раз перестраивается через transform в консоли, собственно , всё видно

[thehighhomie]

Виталий, ну и? а формула? мне формула нужна