Что такое блочная модель для прямоугольников Flash?

Question

В CSS у нас есть блочная модель , чтобы определить, как границы, поля, отступы и заливка влияют на общую ширину и высоту прямоугольника. Я портирую некоторые из моих HTML / CSS-дизайнов во Flash и не могу понять, что такое блочная модель Flash. Во Flash я создал прямоугольник с градиентной заливкой и немасштабирующим штрихом в 1 пиксель. Я пытаюсь получить идеальное для пикселей позиционирование и размеры, но опыт оказался непредсказуемым. Я не вижу закономерности в следующих вопросах. Ответ действительно меняется в зависимости от конкретных обстоятельств.

1. Когда вы устанавливаете x и y оба равными 0, где находится граница? Это с экрана? Это сокращается пополам по происхождению? Или это полностью видно?
2. Если для ширины задано значение 100, ширина заливки 98 или ширина 100?
3. Что происходит с границей толщиной 1 пиксель, если прямоугольник не расположен по координатам целых чисел?

Пример:

var sh:Shape = new Shape();
sh.graphics.lineStyle(1.0, 0x00FF00, 1.0, false, LineScaleMode.NONE);
sh.graphics.beginFill(0xFF0000, 1.0);
sh.graphics.drawRect(0, 0, 100, 100);
sh.graphics.endFill();
addChild(sh);
sh.x = 10;
sh.y = 10;

Я пытался создать квадрат 100x100 в x: 10, y: 10. Когда я измерил общую ширину и высоту в Фотошопе, она оказалась 101х101. Странный! Можно было бы ожидать, что конечные размеры будут 100x100 (граница внутри) или 102x102 (граница снаружи).

Answer 1

Штрихи в отображаемых объектах Flash лежат по краям заливок.Это так, что половина хода лежит вне заливки;другая половина лежит внутри заливки.Это отличается от границ в CSS, которые полностью находятся за пределами области содержимого.

Это лучше всего иллюстрируется объектом, расположенным напротив сцены, который имеет сплошную заливку и полупрозрачный штрих.На рисунке ниже прямоугольник размером 200 на 200 пикселей с 10-пиксельным штрихом.Заливка #00FFFF при 100% альфа и обводка #FF0000 при 50% альфа.Обратите внимание, как область толщиной 5 пикселей вне обводки смешивается с цветом сцены, а область внутри толщиной 5 пикселей смешивается с цветом заливки.Таким образом, общая ширина каждой стороны, измеренная в Photoshop, составляет 210 пикселей (5 + 200 + 5).

Итак, чтобы ответить на ваши вопросы ...

1. Когда вы устанавливаете для x и y оба значения 0, где находится граница?Это с экрана?Это сокращается пополам по происхождению?Или он полностью виден?

   Половина верхнего и левого штрихов будет видна внутри объекта.Другая половина будет обрезана по краям сцены.

2. Когда вы устанавливаете ширину на 100, будет ли заливка шириной 98 или шириной 100?

   Ширина заливки 100 пикселей.В то время как половина ширины прямоугольника на каждой стороне занята штрихом, штрих фактически не занимает места или обрезает заливку;Вы просто не видите область заливки, которая находится за обводкой (см. рисунок выше).

3. Что происходит с толщиной в 1 пиксель, когда прямоугольник не расположен вкоординаты целого числа?

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

Answer 2

Поля и отступы отсутствуют во флэш-памяти. Вы можете имитировать их, это правда, но это не сделает их более осязаемыми.

Единственная особенность возникает при измерении штриха.

В противном случае, это не фигня.

См. Разницу

• DisplayObject.getRect (): http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html?filter_flex=4.1&filter_flashplayer=10.2&filter_air=2.6#getRect%28%29
• DisplayObject.getBounds (): http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html?filter_flex=4.1&filter_flashplayer=10.2&filter_air=2.6#getBounds%28%29

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

Угадай, какой самый простой способ нарисовать круг? Вот вы:

graphics.lineStyle(40); 
graphics.moveTo(100, 100);
graphics.lineTo(100, 101);

Штрих во вспышке имеет стиль колпачка, метод соединения и толщину, но при этом не занимает много места.