Как сохранить соотношение сторон при масштабировании изображения на холсте HTML5?

В моем проекте я использую HTML5 Canvas и FabricJS. У меня есть сценарий для поддержания соотношения сторон для объекта изображения, который я разместил в холсте. при настройке углов или масштабировании изображения я должен обновлять ширину или высоту, чтобы поддерживать соотношение сторон изображения. problem image Как сохранить соотношение сторон при масштабировании изображения на холсте HTML5?

Приведенное выше изображение ясно покажет мою проблему. Мне нужен алгоритм или формула для сохранения аспекта изображения.

Изображение должно соответствовать следующим,

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

, пожалуйста, дайте мне некоторое решение, спасибо.

источник

2014-11-12 Pravinkumar

К сожалению. Непонятный вопрос. Интересно, поможет ли это. https://stackoverflow.com/questions/7863653/algorithm-to-resize-image-and-maintain-aspect-ratio-to-fit-iphone?rq=1 – Charlie

-4

Как вы используете HTML5, вы можете просто применить трансформацию CSS3 к холсту с:

canvas { 
    -ff-transform: scale(2); 
    -ms-transform: scale(2); 
    -webkit-transform: scale(2); 
}

Использование CSS3 преобразования свойства с помощью метода масштаба должны изменить размер холста, и поддержание вы будете аспект соотношение. Это также

Возможно, вам придется обойти отдельные проблемы масштабирования, вызванные дисплеями сетчатки/высокого dpr.

Более подробная информации о CSS3 преобразование свойства можно найти здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

источник

2014-11-12 12:30:25 Charlie

ОП говорит о объектах холста, а не о холсте, поэтому Я не думаю, что это применимо здесь. – kangax

Здесь canvas - мой контейнер, и я добавляю новое изображение внутри холста, поэтому мне нужно настроить конкретную ширину и высоту изображения, а не весь холст. при настройке ширины или высоты изображения мне нужно настроить изображение на основе соотношения сторон и обрезать изображение в соответствии с шириной и высотой объекта изображения холста. – Pravinkumar

Чтобы гарантировать, что изменение размеров делается proportinatly, вы можете просто добавить следующие свойства к объекту изображения:

lockUniScaling: true

I как правило, хотят, чтобы изображение масштабировалось из центра и, следовательно, также установило это значение:

centeredScaling: true

Чтобы «обрезать» изображение, однако; это требует больших усилий, поскольку это не стандартная функциональность, предлагаемая Fabric JS. Я немного поработал над этим и еще не придумал пуленепробиваемое решение, которое работает для текста, изображений, прямоугольников, полигонов, кругов, углов поворота и т. Д.

Основой этого является для создания двух элементов - один из них - ваш образ, а второй - ваша обтравочная маска (форма, обычно такая, как прямоугольник, многоугольник и т. д.), чем тогда применяется как свойство clipTo для вашего элемента изображения. Это решение рассматривается в: Multiple clipping areas on Fabric.js canvas

Рекомендации - Fabric JS Documentation

источник

2014-11-15 05:12:37 PromInc

Как сохранить соотношение сторон при масштабировании изображения на холсте HTML5?

ответ

Смежные вопросы