Question

有任何方法可以使文字“纹理化” - 结果与此类似：http://www.entheosweb.com/fireworks/patterned_text.asp

在Flex中（所以使用AS3）？

我虽然这是一个简单的问题，但是我被困住了：我从几天开始搜索它并且无法找到方法或解决方法来做...

Answer 1

粗略的想法是：

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

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

使用代码进行编辑：

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

Answer 2

我使用ActionScript已经有一段时间了，但我可以提供一些想法。

我能想到的最简单的解决方案是，您可以在精灵中加载图像，然后使用另一个嵌入了文本的精灵来掩盖它。
其他选项，更难以通过手动将每个字母定义为点来将文本呈现为形状。然后你可以使用Papervision3D来纹理这些形状。我之前没有使用Papervision3D，但任何其他游戏引擎都允许纹理化这应该是可能的。

Answer 3

正如其他人所回答的那样，使用文本作为图像的掩码是如何在Flash或Flex中实现的。

divillysausages的答案很好，但是既然你在那里评论说你对这个例子中没有Flex标记感到困惑，这里是MXML标记中的一个最小例子：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application creationComplete="img.mask=txt" xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Canvas>
        <mx:Text id="txt" cacheAsBitmap="true" fontSize="48" fontWeight="bold" text="LOREM IPSUM" />
        <mx:Image id="img" cacheAsBitmap="true" autoLoad="true" source="http://farm3.static.flickr.com/2783/4092743591_3fb90fa599.jpg" />
    </mx:Canvas>
</mx:Application>

原理与其他答案相同，文本必须是一个位图，用作图像的掩码（此处由cacheAsBitmap =“true”实现）。

Actionscript中的纹理文本

3 个答案: