Масштабирование граничной и безграничной графики Flash равно

Question

У меня есть файл SWF, содержащий два символа, которые были «экспортированы для ActionScript». Это и простые квадраты, заполнение которых равно по размеру, но у одного есть граница, а у другого нет.

Я хотел бы, чтобы отобразить эти графические бок о бок в моем Flash-приложения, и я хотел бы, чтобы они оба масштабироваться (увеличение) до тех же размеров. Я написал некоторые довольно простой код, чтобы загрузить эти символы из SWF и их отображения (см ниже), но граничила элемент не размер, как и ожидалось:

Граница вызывает график уменьшен в размере больше, чем граница увеличивает его.

---

Для выполнения вышеуказанного теста я использовал следующий код.

<?xml version='1.0'?> 
<s:Application 
    xmlns:fx='http://ns.adobe.com/mxml/2009' 
    xmlns:s='library://ns.adobe.com/flex/spark' 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    initialize='init(drawArea)' 
> 
<mx:UIComponent id='drawArea' left='0' top='0' width='250' height='250'></mx:UIComponent> 
<fx:Script><![CDATA[ 
import mx.controls.SWFLoader; 

static function init(drawArea:UIComponent):void { 
    var loader:SWFLoader = new SWFLoader(); 
    loader.addEventListener(Event.COMPLETE, onSwfLoaded); 
    loader.load('./borderings.swf'); 

    function onSwfLoaded(e:Event):void { 
     var getDefinition:Function = e.target.loaderContext.applicationDomain.getDefinition; 

     var Bordered:Class = getDefinition('bordered'); 
     var bordered:MovieClip = new Bordered; 

     bordered.x = 100; 
     bordered.y = 100; 
     bordered.width = 100; 
     bordered.height = 100; 

     var borderedContents:DisplayObject = bordered.getChildAt(0); 
     assert(bordered.numChildren === 1); 

     assert(borderedContents.x == 0); 
     assert(borderedContents.y == 0); 
     assert(borderedContents.width == 14.1); 
     assert(borderedContents.height == 14.1); 

     drawArea.addChild(bordered); 


     var Borderless:Class = getDefinition('borderless'); 
     var borderless:MovieClip = new Borderless; 

     borderless.x = 250; 
     borderless.y = 100; 
     borderless.width = 100; 
     borderless.height = 100; 

     var borderlessContents:DisplayObject = borderless.getChildAt(0); 
     assert(borderless.numChildren === 1); 

     assert(borderlessContents.x == 0); 
     assert(borderlessContents.y == 0); 
     assert(borderlessContents.width == 13.1); 
     assert(borderlessContents.height == 13.1); 

     drawArea.addChild(borderless); 

     drawArea.graphics.lineStyle(1.0, 0xFF0000, 1.0); 
     drawArea.graphics.moveTo(25, 50); 
     drawArea.graphics.lineTo(325, 50); 
     drawArea.graphics.moveTo(25, 150); 
     drawArea.graphics.lineTo(325, 150); 
    } 
} 

static function assert(pass:Boolean, msg:String=null):void { 
    if (!pass) throw new Error(msg || 'assertion failed'); 
} 
]]></fx:Script> 
</s:Application> 

Полный тестовый проект IntelliJ может быть найден in this git repository on BitBucket.

---

Редактор Флэш утверждает, что символы оба имеют одинаковые размеры: 13.10px по 13.10px, хотя визуально это, как представляется, за исключением внешней половины границы:

Однако, когда я проверяю экземпляры этих графиков с помощью ActionScript, он сообщает, что граничная графика больше, при 14.10px на 14.10px.

---

Почему размер этой графики зависит от границы в этом странном виде? Как заставить масштабируемую и незамкнутую версию этой графики масштабироваться до тех же размеров?

Answer 1

Для решения проблемы масштабирования вы можете ознакомиться с методом getRect() от DisplayObject.

От AS3 Reference for getRect():

Возвращает прямоугольник, определяющий границу объекта отображения по системе координат, определенной параметром targetCoordinateSpace, за исключением линий фигур. Значения, возвращаемые методом getRect(), совпадают или меньше значений, возвращаемых методом getBounds().

Для приведенного выше примера, это может быть использовано, чтобы непосредственно выяснить масштабные коэффициенты, необходимые для установки элемента с конкретными размерами, игнорируя при этом штрихи, вместо того чтобы использовать настройки шкалы через width и height свойствами.Функция, как это будет работать:

static function setDimensionsExcludingStrokes(
    subject:DisplayObject, width:int=-1, height:int=-1 
):void { 
    var innerDimensions:Rectangle = subject.getRect(subject); 

    if (width >= 0) { 
     subject.scaleX = width/innerDimensions.width; 
    } 

    if (height >= 0) { 
     subject.scaleY = height/innerDimensions.height; 
    } 
} 

Вместо установки bordered.width = 100 и bordered.height = 100, мы бы назвали:

setDimensionsExcludingStrokes(bordered, 100, 100); 

Это приводит к квадратам будучи хорошо выровненных по одной и той же целевой размер: