Haxe，OpenFL：在位图上循环绘制 TextField答案

【问题标题】：Haxe, OpenFL: draw TextField on Bitmap in a loopHaxe，OpenFL：在位图上循环绘制 TextField
【发布时间】：2014-05-20 15:57:11
【问题描述】：

所以，我正在使用 Haxe 和 OpenFL 为手机制作这个应用程序。我有一个很长的文本，我从一个文本文件中加载它，并将其放入一个非常高的TextField 中。但是，由于性能问题，我想将其转换为 Bitmap。

然而，从文本字段中绘制的非常高的Bitmap 再次显示为空白（可能是数据过多？），因此我决定将位图数据拆分为“页面”位图，用户可以在屏幕上滑动.

当我添加要显示的第一个“页面”时，它会显示。但其余的“页面”只是显示为空白图像。这是我的代码：

images = new Array();

var contentHeight:Float = 560;

field = new TextField();
var fieldFont = Assets.getFont("fonts/Kreon-Regular.ttf");
var format:TextFormat = new TextFormat(fieldFont.fontName, 26 /*currentZoom*/, 0xffffff);// 0x4F4F4F);

format.align = TextFormatAlign.LEFT;
field.defaultTextFormat = format;

var fieldWidth:Float = 410;

field.embedFonts = true;
field.text = fullText;
field.selectable = false;
field.wordWrap = true;
field.border = false;
field.autoSize = TextFieldAutoSize.LEFT;
field.width = fieldWidth;
//field.x = 0;
//addChild(field);

//loop through lines, if line within reach, increase clip height, else make new bd
var clipY:Float = 0;
var clipHeight:Float = 0;
trace(field.numLines);
var h_:Float = field.getLineMetrics(0).height;
var bd:BitmapData;
var mainBd:BitmapData = new BitmapData(Std.int(field.width), Std.int(field.height), true, 0x00000000);
mainBd.draw(field);

for (i in 0... field.numLines)
{
    try {
        h_ = field.getLineMetrics(i).height+0.2;
    } catch (e:Dynamic) {}

    if (clipHeight < contentHeight + h_)//line can be accomodated
    {
        clipHeight += h_;
    }
    else { //can't be accomodated, do clipping
        bd = new BitmapData(Std.int(field.width), Std.int(clipHeight + 5), true, 0x00000000);
        trace("clip:  clipY:" + clipY + " height:" + clipHeight);

        bd.copyPixels(mainBd, new Rectangle(0, clipY, field.width, clipHeight), new Point(0, clipY)); 
        //bd.draw(field, new Matrix(), new ColorTransform(), BlendMode.NORMAL, new Rectangle(0, clipY, field.width, clipHeight), true);

        images.push(new Bitmap(bd, PixelSnapping.AUTO, true));
        clipY += clipHeight;
        clipHeight = 0;
    }
}
addChild(images[1]);

【问题讨论】：

标签： mobile bitmap textfield haxe openfl

【解决方案1】：

您只需添加一张图片 (addChild(images[1]);) 即可查看。

另外，我建议你：

找出将其显示为单个 TextField 的确切问题，从打破它所需的确切文本数量开始。
检查您的文本中是否有一些奇怪的 Unicode 字符，例如它们可能会破坏渲染器布局（这应该算作渲染器中的错误，但修复它的方法仍然是删除它们）。
如果您无法解决该问题，请使用多个文本字段而不是位图，因为对于大文本，您很有可能会超出内存限制（您的一页文本目前占用大约 1Mb 的内存，这是很多.
目前您执行此操作的方式无论如何都行不通，因为您执行的渲染器通常会执行相同的操作。如果要将其渲染为部分位图（渲染大文本确实存在问题），则需要将文本分成几部分并单独渲染每个部分。（基本上与使用 cacheAsBitmap 的多个文本字段相同）。

注意：位图实际上不应该比 TextFields 快，除非您使用非常花哨的字体或大量过滤器。无论如何，cacheAsBitmap 属性应该自动执行您想要的操作，而无需编写所有这些代码。但我 99% 确定情况并非如此，而且您不需要那样做。

【讨论】：