在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)?

不过，我觉得这是一个简单的问题，但我坚持：我是天使用Google，没能找到AA方式或替代方法做...

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...

推荐答案

课文大意是这样的：

• 创建与任何字体，你需要一个文本字段，并写任何文字你想在那里。
• 创建一个新的BitmapData对象和画（）的文本字段，让你得到它的位图重新presentation。
• 让您的纹理BitmapData对象（如果你在一个JPG加载，这将是在位图它的加载后，你得到）
• 创建一个新的BitmapData对象，并使用 copyPixels（）来绘制质感，同时采用了第一的BitmapData对象（图混合文本字段）的alpha掩码：<一href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#copyPixels" rel="nofollow">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.

让我知道如果你需要一些code，但它应该是pretty的直观

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

修改与code：

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，但它还会在工作弯曲

• 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屋！