Блог

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

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

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

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

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

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

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

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