Actionscript 中的纹理文本 [英] Textured text in Actionscript

问题描述

有任何方法可以使文本有纹理" - 结果类似于:http://www.entheosweb.com/fireworks/patterned_text.asp

There is any way to make a text "textured" - with a result similar to this: http://www.entheosweb.com/fireworks/patterned_text.asp

在 Flex 中(所以使用 AS3)?

In Flex (so using AS3)?

我虽然这是一个简单的问题，但我被困住了:我几天来一直在谷歌上搜索它并且无法找到一种方法或解决方法来做到这一点......

I though it was a simple issue, but I'm stuck: i'm googling it from days and was not able to find aa way or workaround to do it...

推荐答案

大致思路是这样的:

• 使用您需要的任何字体创建一个 TextField，并在其中写入您想要的任何文本.
• 创建一个新的 BitmapData 对象和 draw() TextField，以便获得它的位图表示.
• 将您的纹理作为 BitmapData 对象获取(如果您以 jpg 格式加载，它将在您加载后获得的位图中)
• 创建一个新的 BitmapData 对象并使用 copyPixels() 绘制纹理，同时使用第一个 BitmapData 对象(位图文本字段)作为 alpha 遮罩:http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#copyPixels()
• 瞧，带纹理的文字.

• Create a TextField with whatever font you need, and write whatever text you want in there.
• Create a new BitmapData object and draw() the TextField so that you get a bitmap representation of it.
• Get your texture as a BitmapData object (if you load in a jpg, it'll be in the Bitmap that you get after it's loaded)
• Create a new BitmapData object and use copyPixels() to draw your texture, while using the first BitmapData object (the blitted TextField) as an alpha mask: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#copyPixels()
• Voila, textured text.

如果您需要一些代码，请告诉我，但它应该非常简单

Let me know if you need some code, but it should be pretty straightforward

使用代码

package  
{
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.Sprite;
    import flash.geom.Point;
    import flash.geom.Rectangle;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFormat;

    public class TestTexturedText extends Sprite
    {
        private var m_text:TextField        = null;         // the TextField that we use to write our text
        private var m_texture:BitmapData    = null;         // the texture that we're going to texture our TextField with
        private var m_textBMD:BitmapData    = null;         // the BitmapData that we use to draw our TextField
        private var m_drawPoint:Point       = new Point;    // Point used in drawing the final BitmapData
        private var m_drawRect:Rectangle    = new Rectangle;// the Rectangle we use to determine which part of the texture to take

        // the texture we're using
        [Embed(source="texture.jpg")]
        private var m_textureImage:Class;

        public function TestTexturedText() 
        {
            this._createText( "Trebuchet Ms", 50.0 );   // create our textfield
            this._getTexture();                         // get our texture

            // create textured text 1
            var bmd:BitmapData = this.getTexturedText( "hello world" );
            var b:Bitmap = new Bitmap( bmd );
            b.x = 250.0;
            b.y = 50.0;
            this.addChild( b );

            // create textured text 2
            bmd = this.getTexturedText( "testing" );
            b = new Bitmap( bmd );
            b.x = 250.0;
            b.y = 100.0;
            this.addChild( b );
        }

        /**
         * Get a BitmapData of the text we want, textured
         * @param text The text we're looking at
         * @param randomPos Should we take a random position from our text, or just start at (0,0)?
         * @return A BitmapData object containing our textured text
         */
        public function getTexturedText( text:String, randomPos:Boolean = true ):BitmapData
        {
            // set the text
            this.m_text.text    = text;
            var tw:int          = int( this.m_text.width + 0.5 ); // quick conver to int without clipping
            var th:int          = int( this.m_text.height + 0.5 );

            // reuse our previous BitmapData if we can, rather than always creating a new one
            if ( this.m_textBMD == null || this.m_textBMD.width < tw || this.m_textBMD.height < th )
                this.m_textBMD = new BitmapData( tw, th, true, 0x00000000 );
            else
                this.m_textBMD.fillRect( this.m_textBMD.rect, 0x00000000 ); // clear the bitmapdata of the old rendering

            // draw our text
            this.m_textBMD.draw( this.m_text, null, null, null, null, true );

            // set our draw rect position
            this.m_drawRect.x       = ( randomPos ) ? Math.random() * ( this.m_texture.width - tw ) : 0.0;
            this.m_drawRect.y       = ( randomPos ) ? Math.random() * ( this.m_texture.height - tw ) : 0.0;
            this.m_drawRect.width   = tw;
            this.m_drawRect.height  = th;

            // get a new bitmap data (that we'll return) and copy our pixels, using the first bmd as an alpha mask
            var ret:BitmapData = new BitmapData( tw, th, true, 0x00000000 );
            ret.copyPixels( this.m_texture, this.m_drawRect, this.m_drawPoint, this.m_textBMD, this.m_drawPoint );
            return ret;
        }

        // creates the TextField that we'll use to write our text
        private function _createText( font:String, size:Number ):void
        {
            var tf:TextFormat               = new TextFormat( font, size );
            this.m_text                     = new TextField;
            this.m_text.defaultTextFormat   = tf;
            this.m_text.autoSize            = TextFieldAutoSize.LEFT;

            // debug add it to the stage
            this.m_text.x = 250.0;
            this.addChild( this.m_text );
        }

        // gets the texture that we'll use to create our text
        private function _getTexture():void
        {
            this.m_texture = ( ( new this.m_textureImage ) as Bitmap ).bitmapData;

            // debug add it to the stage
            var debug:Bitmap = new Bitmap( this.m_texture );
            debug.scaleX = debug.scaleY = 0.2;
            this.addChild( debug );
        }

    }

}

几点:

• 将它变成一个类需要一些工作 - 这是一个主类(因为我用它来运行应用程序)
• 编辑 m_textureImage 嵌入以指向您要使用的纹理，或者加载一个.
• 只需调用函数 getTexturedText() 即可获取包含所需文本的 BitmapData
• 您可以删除我向舞台添加不同项目(纹理、文本字段、结果)的位置.这只是为了告诉你发生了什么
• 这是纯 AS3，但它也适用于 flex

• It'll take a minor bit of work to turn it into a class - this is a main class (as in I use it to run the application)
• Edit the m_textureImage embed to point to the texture you want to use, or alternatively, load one in.
• Just call the function getTexturedText() to get a BitmapData with the text that you want
• You can remove where I add the different items (texture, textfield, result) to the stage. That's just to show you what's going on
• This is pure AS3, but it'll also work in flex

这篇关于Actionscript 中的纹理文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！