Question

我需要找到一种方法来“上采样”从72dpi（屏幕）到300dpi（打印）的文本，以呈现客户端生成的文本。这是一个真正的WYSIWYG应用程序，我们期待大量的流量，因此客户端渲染是必需的。我们的应用程序有几种字体，字体大小，颜色，用户可以在textarea中修改的对齐方式。问题是如何将72dpi转换为300dpi。我们有完整的编辑，我们只需要制作300dpi版本的textarea。

我的想法

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

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

问题

如何在没有组件生命周期的情况下在textarea中呈现文本？想象：

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

Answer 1

就像Flextras所说，宽度/高度与DPI无关，除非您通过4.16X实际缩放到应用程序中。如果你的应用程序都有基于矢量的图形，那应该不是问题。此外，在您尝试保存/打印位图之前，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的建议，我可以解决这个问题。

Flash Builder 4.5 ::渲染文本，没有生命周期进行上采样

我的想法

问题

3 个答案: