Как настроить холст в родительском div?
У меня есть холст внутри div:
<div class = "preview"><canvas id = "cropped" width = "2480" height = "2003"></canvas></div>
Блок Div меньше, чем сторона холста. Как автоматически подогнать холст в двух случаях:
- Автоподбор ширины холста пропорционален родительской ширине div
- Автоподгонка высоты холста пропорциональна родительской высоте div
Я пробовал так:
public autofit = (orientation: RegistryOrientation) => {
let previews = document.getElementsByClassName('preview');
if (previews.length > 0) {
let preview = previews[0];
let width = preview.clientWidth;
let height = preview.clientHeight;
if (orientation === RegistryOrientation.album) {
this.imgCanvas.style.width = width + 'px';
this.imgCanvas.style.height = 'auto';
} else if (orientation === RegistryOrientation.book) {
this.imgCanvas.style.height = height + 'px';
this.imgCanvas.style.width = 'auto';
}
}
};
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете просто использовать символ «%», чтобы обозначить пропорциональную высоту родителя. Например (в вашем CSS):
#cropped {
width: 100%;
height: 80%;
}
Я хочу разместить весь холст пропорциональным. Так что я не понял, почему вы установили 80% для высоты и 100 для ширины
Это были просто примеры процентов, чтобы показать, что вы можете сделать их пропорциональными (а не только 100%). Если я сейчас, в своем локальном тестовом файле, установлю размеры div на 50vw и 50vh (чтобы сделать их равными 50% размеров экрана), холст автоматически заполнит 100% ширины и 80% высоты. Я думаю, вы должны иметь возможность использовать проценты вместо пикселей, чтобы решить вашу проблему :)
просто убедитесь, что холст считает свою ширину и высоту входными данными
Уверен, это то, что вы хотите:
div {
border: 1px solid red;
width: 200px;
height: 200px;
resize: both;
overflow: hidden;
}
canvas {
border: 1px solid blue;
aspect-ratio: 1 / 1;
box-sizing: border-box;
max-width: 100%;
max-height: 100%;
margin: auto;
}<div><canvas width = "1000" height = "1000"></canvas></div>У меня соотношение 3/4, или ширина 4, или высота 4. зависит от случая
Должно работать, пока вы меняете aspect-ratio и ширину и высоту холста.
Конечно, вместо использования файла CSS или тега стиля вы также можете просто вызвать
cropped.style.widthиcropped.style.height.