flash - 相邻 Sprite 上的矩阵变换导致子像素间隙

Question

我有三个 Sprite ，彼此堆叠在一起。

我修改了他们的 transform.matrix 以给出他们一致增长的外观。

但是，根据比例因子，瓷砖之间有时会出现小裂缝。

cracks between sprites http://img21.imageshack.us/img21/7518/cracks.png

我想知道如何解决这个问题。

我知道text objects in AS3 have options for sub-pixel rendering .也许所有 AS3 都存在类似的设置？其他想法？

无效的策略:cacheAsBitmap。

package
{

import flash.display.Sprite;
import flash.geom.Matrix;
import flash.geom.Point;

import mx.core.UIComponent;

public class tmpa extends UIComponent
{

    private var _scale:Number;

    private var _s1:Sprite;
    private var _s2:Sprite;
    private var _s3:Sprite;

    private var _s1Pt:Point;
    private var _s2Pt:Point;
    private var _s3Pt:Point;

    private var _tileDim:int;


    public function tmpa( ):void
    {
        _scale = 1;
        _tileDim = 100;

        _s1 = new Sprite();
        _s2 = new Sprite();
        _s3 = new Sprite();

        paintSprite( _s1, _tileDim );
        paintSprite( _s2, _tileDim );
        paintSprite( _s3, _tileDim );

        _s1Pt = new Point( 100, _tileDim );
        _s1.x = _s1Pt.x;
        _s1.y = _s1Pt.y;
        _s2Pt = new Point( 100, _tileDim*2 );
        _s2.x = _s2Pt.x;
        _s2.y = _s2Pt.y;
        _s3Pt = new Point( 100, _tileDim*3 );
        _s3.x = _s3Pt.x;
        _s3.y = _s3Pt.y;

        addChild( _s1 );
        addChild( _s2 );
        addChild( _s3 );

        scale = 1.0394; //cracks
        //scale = 1.0306; // nocracks
    }

    private function paintSprite( s:Sprite, dim:int, color:int=0xFF0000 ):void
    {   s.graphics.beginFill( color, .5 );
        s.graphics.drawRect( 0, 0, dim, dim );
        s.graphics.endFill( );
    }


    public function set scale( s:Number ):void
    {   _scale = s;

        var scaleFromPt:Point = new Point( 20, 20 );
        updateSpriteMatrix( _s1, _s1.globalToLocal(scaleFromPt), _s1Pt );
        updateSpriteMatrix( _s2, _s2.globalToLocal(scaleFromPt), _s2Pt );
        updateSpriteMatrix( _s3, _s3.globalToLocal(scaleFromPt), _s3Pt );
    }

    public function get scale( ):Number
    {   return _scale;
    }

    private function updateSpriteMatrix( t:Sprite, ctrPt:Point, regPt:Point ):void
    {   var mx:Matrix = t.transform.matrix;
        mx.identity();
        mx.scale( _scale, _scale );
        mx.translate( ctrPt.x*(1-_scale), ctrPt.y*(1-_scale));
        mx.translate( regPt.x, regPt.y );
        t.transform.matrix = mx;
    }

}
}

和 mxml:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            xmlns:a="*"
            width="100%" height="100%"
            paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0"
            backgroundColor="0x000000"
            backgroundGradientAlphas="undefined">
    <a:tmpa id="t" width="100%" height="100%" x="0" y="0" left="0" top="0"/>
</mx:Application>

Answer 1

存在差距的原因是由于舍入错误。 Flash 只能将元素定位到像素的二十分之一(缇)。您将 y 位置设置为

3.152000000000008

7.092000000000018

11.032000000000028

分别。显然，这比二十分之一精确得多，因此发生四舍五入。一旦发生舍入，您很容易出错。

在我看来，您应该将所有项目放入其他容器中，然后缩放容器。您只执行一次转换但获得相同结果的方式。

但是我知道在某些情况下可能需要这种方法。解决这个问题的方法是首先执行所有的比例变换。然后执行相对于前一个 Sprite 的翻译。这样它总是会基于之前的圆形药水。这是一个从你的类(class)中被黑掉的快速例子。显然，有很多方法可以组织它，但为了简单起见，我试图坚持你的工作方式。

package
{

import flash.display.Sprite;
import flash.geom.Matrix;
import flash.geom.Point;

import mx.core.UIComponent;

public class tmpa extends UIComponent
{

        private var _scale:Number;

        private var _s1:Sprite;
        private var _s2:Sprite;
        private var _s3:Sprite;

        private var _s1Pt:Point;
        private var _s2Pt:Point;
        private var _s3Pt:Point;

        private var _tileDim:int;


        public function tmpa( ):void
        {
                _scale = 1;
                _tileDim = 100;

                _s1 = new Sprite();
                _s2 = new Sprite();
                _s3 = new Sprite();

                paintSprite( _s1, _tileDim );
                paintSprite( _s2, _tileDim );
                paintSprite( _s3, _tileDim );

                _s1Pt = new Point( 100, _tileDim );
                _s1.x = _s1Pt.x;
                _s1.y = _s1Pt.y;
                _s2Pt = new Point( 100, _tileDim*2 );
                _s2.x = _s2Pt.x;
                _s2.y = _s2Pt.y;
                _s3Pt = new Point( 100, _tileDim*3 );
                _s3.x = _s3Pt.x;
                _s3.y = _s3Pt.y;

                _s1.transform.matrix = new Matrix();
                _s2.transform.matrix = new Matrix();
                _s3.transform.matrix = new Matrix();

                addChild( _s1 );
                addChild( _s2 );
                addChild( _s3 );

                scale = 1.0394; //cracks
                //scale = 1.0306; // nocracks
        }

        private function paintSprite( s:Sprite, dim:int, color:int=0xFF0000 ):void
        {       s.graphics.beginFill( color, .5 );
                s.graphics.drawRect( 0, 0, dim, dim );
                s.graphics.endFill( );
        }

        public function set scale( s:Number ):void
        {       _scale = s;

                scaleSpriteMatrix( _s1 );
                scaleSpriteMatrix( _s2 );
                scaleSpriteMatrix( _s3 );

                translateSprite(_s2, _s1);
                translateSprite(_s3, _s2);
        }

        public function get scale( ):Number
        {       return _scale;
        }

        private function scaleSpriteMatrix( targetSprite:Sprite):void
        {       var mx:Matrix = targetSprite.transform.matrix;
                mx.scale( _scale, _scale );
                targetSprite.transform.matrix = mx;
        }

        private function translateSprite( targetSprite:Sprite, basedOnSprite:Sprite):void
        {       var mx:Matrix = targetSprite.transform.matrix;
                mx.translate( basedOnSprite.x, basedOnSprite.y + basedOnSprite.height);
                targetSprite.transform.matrix = mx;
        }

}
}

希望有帮助

詹姆士