FabricJS Шкала/Масштаб Холст подходит для контейнера

Question

У меня есть мой мой FabricJS холст внутри контейнера с фиксированной высотой/шириной в пикселях. На стороне у меня есть выпадающий список, чтобы изменить размер холста на различные пресеты. То, что я хотел бы сделать, автоматически уменьшает масштаб, когда я выбираю размер, который является более высоким и/или более широким, чем контейнер. Например, если мой контейнер div равен 800x600, и я выбираю размер холста 1024x768, я хочу уменьшить масштаб, чтобы весь холст все еще был виден. И наоборот, я хотел бы увеличить до 100%, если я выберу меньший размер (например, 200x200).

Я нашел this пример масштабирования, но независимо от того, насколько вы уменьшаете масштаб, размер холста остается неизменным. Смотрите скриншот:

Как я могу это сделать?

Как вы можете видеть здесь, область с тонкой красной границы холста контейнер. Белым ящиком является холст.

Answer 1

Для этого вы можете использовать функцию canvas.setDimensions. Вы передаете ему два аргумента; первый - это объект, определяющий высоту и ширину для изменения холста, а второй указывает, следует ли изменять css, фактический размер холста или и то, и другое.

Например, canvas.setDimensions({width: 750, height: 750}, {backstoreOnly: true} установит фактический размер холста 750x750 независимо от отображения.

canvas.setDimensions({width: '750px', height: '750px'}, {cssOnly: true}) установит размер экрана холста 750x750 независимо от фактического размера.

Я не уверен на 100%, если ширина или высота требуют px после этого для css или для backstore, но это довольно простая вещь для проверки. Кроме того, если аргумент не передан для второго параметра, он изменит оба параметра.