How do I use a pre-defined CSS style for a programmatically drawn TextField?


Tags: css,flex

Problem :

I have a graphical application that renders text to BitmapData - right now it's hardcoded to use a specific font, and that's fine for testing, but for production I really need it to be style-able.

The rest of the application uses specific fonts, and I want to be able to just use a stylename (the style of the font) to create a TextFormat object to pass to the text sprites embedded TextField object..

So here's the sequence now, roughly:

        var format:TextFormat = new TextFormat();
        format.font = "Arial";
        format.color = 0xFF0000;
        format.size = 12;
        // tf is a previously instantiated TextField()
        tf.defaultTextFormat = format;
        tf.autoSize = TextFieldAutoSize.LEFT;

        tf.text = _text;

Then later, it's simply drawn with:

        bmpData.fillRect(srcRect,0x00000000);
        bmpData.draw(tf);

Now this is nasty, so how do I get a StyleSheet or TextFormat from my apps css definitions? I've looked in the StyleManager, the CSSStyleDeclaration, nothing seems to quite fit. What's the sequence here, anyone?



Solution :

You could try something like the following

If you set something in your CSS file called TextFormat.

var css:CSSStyleDeclaration = StyleManager.getStyleDeclaration("TextFormat")
yourComponent.setStyle("textAlign", getStyle("headerTextAlign"));
yourComponent.setStyle("fontFamily", getStyle("fontFamily"));

This should do what you’re looking for.


    CSS Howto..

    How to remove the default active tab color when another tab is active using jquery

    How to add Jquery Mobile effects to dynamically added elements?

    How can I resize images that are loaded onto a page?

    How do I center a menu option under it's heading option in a drop down menu?

    jQuery or CSS - How do you make a link in a table row appear underlined even when the cursor is in a neighbouring cell?

    how to code different type of border in css?

    How to check css in unit test

    Use ::after selector to show line number but also display a element next to it when hovering over the containing table td cell

    How can I make 2 elements share the same rollover state in CSS?

    How to deal with image references in CSS in a Rails 3.1 app

    CSS: how to style a div so that it has no effect

    Inline blocks somehow don't get displayed in a straight line [duplicate]

    I have an text input inside a div, how do I get the background of the div to change when the input has focus?

    How to create multiline ListBox in GWT?

    How to change button CSS attributes

    Why my asp.net page is not showing styles I set

    How do I align an item to the right inside a flex container?

    How to set a div over a div using css?

    How to write css for each page in rails 3

    How to remove captcha image and it's textbox using css?

    How To Get Color of WebElement From Complicated css case using Webdriver?

    How to assign CSS background image properties mixing classes and ids

    How to import css file for into Component .jsx file

    CSS triangle how to remove white space on the right

    How can a transformed Image transition back to it's original shape when hovered?

    How best to use jQuery: with HTML or CSS for formatting

    How to keep a floating div centered on window resize (jQuery/CSS)

    How to use CSS to square the corner on a submit button

    How can I show a loading screen while a really large image is loading?

    CSS, knockout.js : how to dynamically assign id to checkbox with foreach data-bind