FlashBuilder 4.5 :: 渲染文本，无需生命周期进行上采样

Question

我需要找到一种方法，将渲染的客户端生成的文本从 72dpi（屏幕）“上采样”到 300dpi（打印）。这是一个真正的所见即所得应用程序，我们预计会有大量流量，因此需要客户端渲染。我们的应用程序有多种字体、字体大小、颜色、对齐方式，用户可以在文本区域中修改。问题是如何将72dpi转换为300dpi。我们已经完成了编辑器，我们只需要制作 300dpi 版本的文本区域。

我的想法

1) 获取文本区域并将高度、宽度和字体大小增加 300/72。 （如果字体大小需要整数，我可能需要增加字体，然后向下采样到高度/宽度）

2）在文本区域上使用 BitmapUtil.getSnapshot 来获取文本的渲染版本

问题

如何在内部渲染文本没有组件生命周期的文本区域？想象：

var textArea:TextArea = new TextArea();
textArea.text = "This is a test";    
var bmd:BitmapData = textArea.render();

Answer 1

正如 Flextras 所说，宽度/高度与 DPI 无关，除非您实际上将应用程序放大 4.16 倍。如果您的应用程序都具有基于矢量的图形，那么这应该不是问题。另外，在您尝试保存/打印位图之前，DPI 的概念在任何 Web 应用程序中都会丢失。

这绝对是可能的，但你必须自己想办法。

Answer 2

要以另一种方式提出问题，可以在以下位置创建一个 TextArea
我可以使用 BitmapUtil.getSnapshot() 函数来获取内存
生成 BitmapData 对象

从技术上讲，所有组件都位于内存中。我相信，您想要做的是渲染组件而不将其添加到容器中。

我们对 Flextras 组件上的水印正是这样做的。从概念上讲，我们创建了一个渲染实例的方法；像这样：

public function render(argInheritingStyles : Object):void{
 this.createChildren();
 this.childrenCreated();
 this.initializationComplete();
 this.inheritingStyles = argInheritingStyles;
 this.commitProperties();
 this.measure(); 
 this.height = this.measuredHeight;
 this.width = this.measuredWidth;
 this.updateDisplayList(this.unscaledWidth,this.unscaledHeight);
}

必须显式调用该方法。然后您可以使用“标准”过程将组件转换为位图。我认为我们使用标签；但同样的方法应该适用于任何给定的组件。

Answer 3

这是我用来解决创建 Spark TextArea 组件的文本和样式的可打印版本问题的最终方法。我最终将自定义组件 TextAreaRenderer（见下文）放置在 MXML 中并将可见性设置为 false。然后使用对此组件的引用来处理任何文本字段 (renderObject) 并获取 BitmapData 对象。

public class TextAreaRenderer extends TextArea implements IAssetRenderer
{

    public function render(renderObject:Object, dpi:int = 300):BitmapData{

        // CAST THE OBJECT
        //.................
        var userTextArea:TextArea = TextArea(renderObject);

        // SCALE IS THE DIVISION OF THE NEW DPI OVER THE SCREEN DPI 72
        //............................................................
        var scale:Number = dpi / 72;

        // COPY THE USER'S TEXT AREA INTO THE OFFSCREEN TEXT AREA
        //.......................................................
        this.text = userTextArea.text;                          // the actual text
        this.height = Math.floor(userTextArea.height * scale);  // scaled height
        this.width = Math.floor(userTextArea.width * scale);    // scaled width


        // GET THE LAYOUT FORMATS AND COPY TO OFFSCREEN
        // - the user's format =  userTextAreaLayoutFormat
        // - the hidden format = thisLayoutFormat
        //...............................................
        var editableLayoutProperties:Array = ['fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'textAlign', 'textDecoration', 'color']
        userTextArea.selectAll();
        var userTextAreaLayoutFormat:TextLayoutFormat = userTextArea.getFormatOfRange();
        this.selectAll();
        var thisLayoutFormat:TextLayoutFormat = this.getFormatOfRange();
        for each(var prop:String in editableLayoutProperties){
            thisLayoutFormat[prop] = userTextAreaLayoutFormat[prop];
        }

        // SCALE THE FONT SIZE
        //....................
        thisLayoutFormat.fontSize = thisLayoutFormat.fontSize * scale;

        // SET THE FORMAT BACK IN THE TEXT BOX
        //...................................
        this.setFormatOfRange(thisLayoutFormat);

        // REDRAW THE OFFSCREEN
        // RETURN THE BITMAP DATA
        //.......................
        this.validateNow();
        return BitmapUtil.getSnapshot(this);
    }
}

然后在文本区域更改后调用 TextAreaRenderer 以获得放大的位图。

// COPY THE DATA INTO THE OFFSCREEN COMPONENT
//............................................
var renderableComponent:IAssetRenderer = view.offScreenTextArea;
return renderableComponent.render(userTextArea, 300);

感谢 www.Flextras.com 提供的建议与我一起解决了该问题。