我能在flex图形对象上设置文本吗？

Question

有没有办法有效地在Flex Graphics对象上调用setText的等效方法？

具体来说，我正在使用自定义单元格渲染器在数据网格中显示数据。渲染器使用Graphics对象根据底层数据设置单元格的背景颜色，仅限于单元格的一部分（例如左半部分）。我想能够在具有背景颜色的单元格部分上只有文本（例如在左半部分内居中）。

我知道所有宽度（包括单元格本身和图形对象的宽度），但我不知道如何在图形对象上设置文本（居中）。

有人有任何想法吗？谢谢！

- AlexC

Answer 1

这里有一个解决方案，避免了添加UI组件：

    private function WriteText(text:String, rect:Rectangle):void
    {
        var uit:UITextField = new UITextField();
        uit.text = text;
        uit.width = rect.width;
        var textBitmapData:BitmapData = ImageSnapshot.captureBitmapData(uit);
        var matrix:Matrix = new Matrix();
        var x:int = rect.x;
        var y:int = rect.y;
        matrix.tx = x;
        matrix.ty = y;
        graphics.beginBitmapFill(textBitmapData,matrix,false);
        graphics.drawRect(x,y,uit.measuredWidth,uit.measuredHeight);
        graphics.endFill();
    }

这个想法是使用UITextField创建位图，然后使用图形对象来填充矩形。

这基于Adobe Developer Connection上Olga Korokhina的博客文章。

- David Pond

---

这是一个不错的技巧，但是你会失去字体抗锯齿。 - splash

Answer 2

简短的回答是，您无法使用 Graphics 对象以编程方式绘制文本。您需要做的是创建一个类似于文本的类（例如 Label、Text 等），并在单元格渲染器中适当地定位它。

假设您正在 updateDisplayList 中进行自定义绘画，则应执行以下操作：

override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void
{
    super.updateDisplayList( unscaledWidth, unscaledHeight );

    // perform all your custom painting

    var label:Label = new Label();
    label.text = "Some text";

    label.width = widthOfCustomPainting;
    // can also set x- and y-coordinates of label too

    label.setStyle( "textAlign", "center" );

    this.addChild( label );
}

这需要根据您的项渲染器如何设置进行一些微调，但它应该基本上是您所需的。

请注意，我上面的代码并没有使用自定义项渲染器的最佳实践。查看这篇优秀的博客文章将非常值得，该文章描述了如何正确创建项渲染器。

- Dan

---

另外，如果你想要疯狂一点，UITextField是更本地的文本元素（或TextField）。这两个都可以设置背景颜色，因此它们也可以作为这个问题的阴影部分。 - Glenn

很好的观点，Glenn！您可以使用指定宽度和背景颜色的文本字段，甚至无需担心自定义绘制。 - Dan

太棒了 - 非常感谢，它已经起作用了。也许这不是最优雅的解决方案，但目前对我来说已经足够了。实际上，我不得不给我的标签命名，并检查是否已添加该名称的子项到'this'中...所以....if (this.getChildByName(tmpLabel.name) == null){ this.addChild(tmpLabel); }我认为这是因为渲染过程（也许就是你博客中所说的内容，我会去读一下！）。再次感谢。 - AlexC

很高兴听到一切都运作正常！但我一定会推荐这篇博客文章的。它是由 Adobe Flex 团队中的一位成员撰写的，所以他真正了解 Flex 的内部机制。 - Dan

Answer 3

Polygonal labs提供了一种解决方案，将字体转换为矢量曲线，以便您可以将文本绘制为图形。 在这里查看。该代码尚未发布，但您可以在评论中看到一些类似的项目。

但是，您需要使用AS而不是MXML来完成它，或者编写自己的类来实现。

- Andy Li

Answer 4

使用textformat来设置uit的defaulttextformat是解决我的问题的方法...

- Circass