質感文字的Actionscript

Question

有什麼辦法，使「紋理」一文 - 與類似這樣的結果：http://www.entheosweb.com/fireworks/patterned_text.asp

在Flex（因此使用AS3）？

我雖然是一個簡單的問題，但我堅持：我是從天Google上搜尋它，卻不能找到AA辦法或變通方法來做到這一點...

Answer 1

它已經因爲同時我使用了ActionScript，但我可以提供一些想法。

• 簡單的解決方案，我能想到的是，你可以在精靈加載圖像，然後使用已嵌入文本另一個精靈面膜吧。

• 其他選項，更困難的是通過手動將每個字母定義爲點來將文本呈現爲形狀。然後你可以使用Papervision3D來構造這些形狀。我之前沒有使用Papervision3D，但是因爲任何其他遊戲引擎都允許紋理化，所以應該可以。

Answer 2

粗糙的想法是這樣的：

• 創建你所需要的任何字體的文本字段，並寫出你在那裏想要的任何文字。
• 創建一個新的BitmapData對象和draw() TextField，以便獲得它的位圖表示。
• 讓您的紋理BitmapData對象（如果你在一個JPG加載，這將是在位圖，你得到它的加載後）
• 創建一個新的BitmapData對象，並使用copyPixels()繪製你的紋理，同時使用第一個BitmapData對象（blitting 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，但它也將在柔性工作

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」實現）。