Какова потребность в соотношении сторон?

Question

Я экспериментирую с движками JavaScript html5 и Cordova. Часто я встречаю ключевые слова, такие как соотношение сторон и масштабирование. Так как игры html5 имеют дело с холстом, а игровые изображения передаются через drawImage(), я не понимаю необходимость соотношения сторон при построении игр с Кордовой. Есть ли хороший пример для понимания соотношения сторон или масштабирования?

Answer 1

Формат

Соотношение сторон является то, что вы получаете, когда вы разделите ширину изображение путем высоты. Он может быть записан как одно число (2), либо как дробь (2/1), либо с двоеточием 2: 1.

Идеальный квадрат имеет аспекс 1 или 1: 1, его высота такая же, как и его ширина. Если у вас широкоэкранный монитор, он будет иметь аспект 16:10 или 1,6, ваш iphone 3: 2 или 1,5, а старый телевизор - 4: 3 или 1,3. Чем ближе число попадает к 1 квадрат изображения/экрана/вещи.

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

Если у вас есть аспект, тогда вам нужна только одна сторона, и вы можете определить длину другого размера. Так что, если бы у вас было соотношение сторон экрана 16: 9 или 1,7, и он был таким же высоким, как и вы, то вы также знаете, что он будет в 1,7 раза шире, чем вы, если вы уложитесь рядом с ним.

При изменении размера изображения вы должны знать его соотношение сторон или вы будете сквоивать или растягивать изображение. Например, если вы снимаете широкоэкранный фильм (16: 9 или 1.7) и устанавливаете его на старый телевизор (4: 3 или 1,3), потому что аспект изменился, все будет раздавлено и выглядеть тощим.

Соотношение сторон в коде.

В javascript изображение имеет свойство width и height, выраженное в пикселях. Для работы с нами соотношение сторон легко

var aspect = image.width/image.height; 

Если вы хотите, чтобы это изображение соответствовало области с высотой 1000 пикселей. Вы знаете, что ширина будет равна высоте раз в аспект.

ctx.drawImage(image, 0, 0, 1000 * aspect, 1000); 

Если вы хотите установить ширину 1000 пикселей, вы разделите ширину на аспект, чтобы получить высоту.

ctx.drawImage(image, 0, 0, 1000, 1000/aspect); 

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

Значительное соотношение сторон - золотое соотношение 1,618 или 16:10. Говорят, что это наиболее приятно смотреть. Многие знаменитые картины имеют этот аспект с пути назад, а также здания, скульптуры, пейзажи и многое другое.

Другим хорошо известным и очень удобным соотношением сторон является квадратный корень из 2: 1. Это соотношение сторон бумаги A0, A1, A2 .. и обладает свойством, не имеющим другого соотношения сторон. Если вы возьмете лист бумаги A0 и сложите его пополам, поверните его на бок, а аспект сложенного листа по-прежнему остается квадратным корнем из 2: 1. Его размер теперь равен A1, снова свернуть, чтобы получить A2, затем A3 .. Нет, матер, как часто вы складываете его, аспект остается прежним. Это единственное соотношение сторон, которое обладает этим свойством.

Надежда, что помогает объяснить, какие аспекты соотношения, что они используются для, и как использовать их ..