AS3 圆角文本框

Question

有人知道如何在AS3中创建带有可见边框和圆角的动态文本框吗？

我认为我可能需要创建一个圆角的movieclip，在文本框后调整大小和放置。

我尝试过这样做，但是我没有看到任何变化。

var styleRound:StyleSheet = new StyleSheet();
styleRound.parseCSS("h4{cornerRadius:10;borderStyle: solid; borderThickness: 1;}");
tf.htmlText = "<h4>" + hotspotData.caption + "</h4>";
tf.styleSheet = styleRound;

- Bryan

---

使用标签 actionscript-3，可以获得更多的浏览量。 :D - Gordon Gustafson

Answer 1

这是一个ActionScript 3中可用的TextField样式列表。很抱歉，没有边角半径。

您可以在TextField对象的border属性中打开文本框的边框。但是没有可用于圆角处理的属性。

我建议您创建一个新组件，在TextField下方作为Sprite添加边框。例如：

package
{

import flash.display.Graphics;
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;

public class TextBorder extends Sprite
{
    private static const CORNER_RADIUS:int = 5;
    // display objects
    private var background:Sprite;
    private var field:TextField;

    // properties
    private var _text:String;

    public function TextBorder()
    {
        background = new Sprite;
        field = new TextField;
        field.autoSize = TextFieldAutoSize.LEFT;

        addChild(background);
        addChild(field);

        // TESTING:
        text = "Hello World";
    }

    public function set text(newText:String):void
    {
        _text = newText;
        display();
    }

    public function get text():String
    {
        return _text;
    }

    private function display():void
    {
        field.text = _text;

        var g:Graphics = background.graphics;
        g.clear();
        g.lineStyle(0, 0x0);
        g.beginFill(0xFFFFFF);
        g.drawRoundRect(0, 0, field.width, field.height, CORNER_RADIUS);
    }
}

}

- James Fassett

---

谢谢您的提示 - 我只测试了一次。我已经使用您的修正更新了代码片段。顺便说一句：这不是生产就绪代码 ;) - James Fassett

Answer 2

你不能直接更改文本字段，因为截至2014年，Flash不允许这样做。

你可以删除背景和边框，使文本字段完全透明， 然后在文本字段的后面添加一个图像（矩形工具是最简单的方法）， 以便文本字段位于图像的顶部（z轴方向）

这可能不是你想到的方法，但它确实有效！

//你正在删除背景和边框 //并用图像替换它们 textbox.background=false; textbox.border=false;

- mrOak

Answer 3

最终我在Flash中创建了一个圆角矩形，并将其导出为自己的类 - hotspotBG。

var hotspotBackground:hotspotBG = new hotspotBG();
hotspotBackground.width = textField.width + 10;
caption.addChild(hotspotBackground);

- Bryan

Answer 4

你能否只使用CSS样式呢？类似这样：

TextInput { 
  borderStyle: solid; 
  borderThickness: 1; 
  cornerRadius: 2; 
}

我没有测试过这个，但是应该可以给你一个圆角。

- jean

---

谢谢。我已经编辑了问题并包含了我所更改的内容，但它仍然无法工作。 - Bryan

这些属性不是AS3的有效CSS。以下是可用属性列表：http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/StyleSheet.html - James Fassett