缩放边界和非边界的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测试项目可以找到在BitBucket上的git存储库中。

Flash编辑器声称，这些符号都有相同的尺寸: 13.10px乘以13.10px，尽管从视觉上看，这似乎排除了边框的外半部：

但是，当我使用ActionScript检查这些图形的实例时，它会报告边框图形更大，为14.10px乘14.10px。

为什么这些图形的大小会以这种奇怪的方式受到边框的影响？我如何才能使这个图形的边缘版本和非边界版本被缩放到相同的维度？

Answer 1

对于缩放问题，您可以看看getRect()的DisplayObject方法。

来自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);

这将使正方形在相同的目标大小上很好地对齐：