Question

我正在尝试在flex中制作瓷砖壁纸。我确实拉伸或正常使用backgroundSize为100％和“auto”。但我不知道如何创建瓷砖。

有人可以帮我提供源，指令或最好的源代码。

此致 Zeeshan

Answer 1

通过使用CSS样式或属性样式，无法在Flex 3中创建平铺背景。

但是，只需为组件分配一个自定义编程外观，即使用原始位图数据处理平铺图像的绘制。

让我用一些代码进一步说明我的观点

<mx:Canvas borderSkin="{TiledBackgroundSkin}"
    width="100%" height="100%">
</mx:Canvas>

这是应用程序化边框外观的组件。

现在，您只需通过扩展RectangularBorder类来创建该边框外观。如：

public class TiledBackgroundSkin extends RectangularBorder
{
    [Bindable]      
    [Embed(source='tile.jpg')]
    private var tileImageClass  :Class;
    private var tileBitmapData  :BitmapData;

    public function TiledBackgroundSkin()
    {
        super(); 
        createBitmap()
    }

    /** A private method that handles the drawing of the bitmap **/
    private function createBitmap():void
    {
        var backgroundImage:Bitmap = new tileImageClass();
        tileBitmapData = new BitmapData(backgroundImage.width,backgroundImage.height);
        tileBitmapData.draw( backgroundImage );
    }

    /** Override updateDisplayList to draw the Tiled Background **/
    override protected function updateDisplayList(  unscaledWidth:Number,unscaledHeight:Number ):void 
    {
        super.updateDisplayList(unscaledWidth,unscaledHeight );
        graphics.clear();
        graphics.beginBitmapFill( tileBitmapData );
        graphics.drawRect(0,0,unscaledWidth,unscaledHeight);
        graphics.endFill();
    }       
}

构造函数为平铺创建位图图像。

然后updateDisplayList方法（在初始创建后调用，随后调整组件大小）用平铺背景填充整个组件。

如果您想调整平铺图像的偏移定位，可以在updateDisplayList方法中进行调整

如何在flex中创建tile壁纸？

1 个答案: