AS3: grouping sprites - apache-flex

I have a handful of sprites that I am attempting to group together via addChild().
Here is some pseudo-code demonstrating what I would like to accomplish:
import nav.text.TextSprite;
spr1:Sprite = new Sprite();
spr1.graphics.clear();
spr1.graphics.beginFill(0x000000);
spr1.graphics.drawRect(0,0,100,100);
txt1:TextSprite = new TextSprite;
txt1.text = "hello";
spr1.addChild(txt1);
//this is what isn't working: the sprite is hidden but not the text
spr1.alpha = 0.0;
For some reason I cannot seem to get the TextSprite to draw correctly... All it is is a Sprite with a TextField added to it. I think everything is working there, but I might have something wrong w/r/t making sure all of TextSprites children are grouped correctly.
I should mention that it does position correctly; but the alpha property won't respond in the way I would expect it to. I.E., the sprite that the TextField is attached to will allow it's alpha to be set but the text remains visible.
Any thoughts?

Most likely you just need to embed the font in your textfield. Try changing the x, y of spr1 and see if txt1 moves along with it. If it truly is a child then it will respond to the new position.

You need to embed the font using textfield.embedFonts = true. If your text is disappearing when you do this, how are you going about embedding the font (using the Flex embed meta tag or using the Flash IDE?), check that you are not changing the font weight (setting the text to bold when you have only embedded the normal weight font) and if you are using a text format, be sure to apply the text format AFTER you set the textfield.text property. You can get around this by using textfield.defaultTextFormat.

Related

wxWidgets: wxButton with both bitmap and text

I want my wxButton to have a black background and white text for it's label. I tried this sample code only I also tried it with wxButton and SetBitmapLabel.
All I could manage was to get the bitmap to display, however I also want the button's text (label) to be displayed over the bitmap at the same time. How could I do this?
It's not clear what do you want to use a bitmap at all if just want to display the text. What's wrong with just doing
wxButton* b = new wxButton(...); // possibly use wxBORDER_NONE style
b->SetBackgroundColour(*wxBLACK);
b->SetForegroundColour(*wxWHITE);
?
Also notice that since wxWidgets 3.0 the functionality of wxBitmapButton is available in wxButton itself, i.e. you can set a bitmap for any button and it will be displayed in addition to the text.

Determine CSS-styled Text size in JavaFX / force styling?

I have a problem determining the width of a rendered text node in JavaFX 2. When using the standard style, everything works fine:
Text testText = new Text("test");
double width = testText.getLayoutBounds().getWidth();
But if I apply custom CSS styling which sets a different font size like this
.text-class {
-fx-font: 20px "Tahoma Bold";
}
and apply the CSS class to my example above:
Text testText = new Text("test");
testText.getStyleClass().add("text-class");
double width = testText.getLayoutBounds().getWidth();
I will get the same result as in the first case, so obviously styling is delayed to some later point in time.
How do I determine the width of a CSS-styled text in JavaFX 2? Is it possible to somehow force immediate CSS styling?
CSS application is not done immidiately, so, the way to solve the issue, is do your actions, when size of text actually changes.
testText.layoutBoundsProperty()
Is the property, which responds to bounds, and it stores an immutable object. There are also other properties, telling you about size and position. What you can do - is to attach a change listener on this property, and apply changes, when a modification is done.
CSS-Styles are applied on the next so called pulse beside that the layoutBounds are influence by the parent container your put it into.

Dynamically resize/space text to fit div

I have a div with a fixed width, but the text inside (someones name) will vary. Is there a way of dynamically resizing/letter-spacing the text to fit perfectly in the div?
However, I cannot use javascript as this script will be used in a HTML-PDF converter, which does not read javascript
text-align:justify won't work as if the text is too long for the div, it won't resize it. I find text-align:justify only works for paragraphs etc.
The name cannot go onto two lines
You need to use either:
Graphics graphics = this.CreateGraphics();
SizeF textSize = graphics.MeasureString("How long am I?", this.Font);
or
Size textSize = TextRenderer.MeasureText("How long am I?", font);
TextRenderer is less accurate, but Graphics requires you to use a windows form - in your case you could have a form with a single textbox into which you place the text to be measured and then read it back, but TextRenderer is simpler.
Using the above you could write a function that adjusted the font-size until the desired length was reached.
It would then be a case of setting the style on the text sent to the browser to reflect this font-size.

A real drawText call in Flex?

I am now developing a Flex application in which I need to control each pixel of my control of Flex. I want to calculate that how width and how height of some text used in my control and do some layout stuff.After some searching I find that the only way to draw text in Flex is to use something like TextField. So, I use TextField to display text and try to get the width and height of the text through:
textfiled.getLineMetrics(0).width/.height;
But the real textfield is much more bigger than this, so I do:
textfield.width = textfiled.getLineMetrics(0).width;
textfield.height = textfiled.getLineMetrics(0).height;
But, the textfield get part not displayed, and I am surprised by this effect. I know there should be a 2-pixel gutter around the text, but what the remain space? Why nearly 20% part of the text height/width are not displayed?
And how can I get a real drawText call in Flex, I mean something like Windows's drawText method...
Thanks!
you can try this : getCharBoundaries () i've used it and seems accurate hoever it is for char and not a whole text so you will need to iterate through the text
also see this :
Is there a way to get the actual bounding box of a glyph in ActionScript?
Please try:
textfield.width = textfield.textWidth + 4;
textfield.height = textfield.textHeight + 4;
I'm not familiar with Windows's drawText method so I cannot help you there, but perhaps you want to have a look at the stellar text layout functionality in Flex 4.

Generate a flex image from a hidden component

I'm trying to put an image, generated from some text, in a RichEditableText. Since it's a styled text, I thought about putting it another RichEditableText, style it, then print it to a Bitmap to use as source for InlineGraphicsElement.
I use the following code to do that
var txt:RichEditableText = new RichEditableText();
txt.text = name;
// Appliy given styles to the text flow of input rich editable text
createApplyNamedStyle(name, styles).call(null, txt.textFlow);
var bitmapData:BitmapData = new BitmapData(txt.width, txt.height);
bitmapData.draw(txt);
var bitmap:Bitmap = new Bitmap(bitmapData);
Unfortunatly, when called, it displays an error stack
ArgumentError: Error #2015: BitmapData non valide.
at flash.display::BitmapData()
at RichTextEditor/getTagImage()[E:\FlexWorkspace\Test\src\RichTextEditor.mxml:74]
at RichTextEditor/insertTag()[E:\FlexWorkspace\Test\src\RichTextEditor.mxml:154]
I suspect it is due to the fact that my RichEditableText, not being in visible component, is not laid out.
How can I ensure it is properly laid out ?
And am i doing the right thing to transform my text into an image ?
You're right; since the text is not on the display list, it is never validated and hence has 0 height and width.
A typical workaround is to add the item to the display list and then remove it immediatley. A little more discussion in this SO question.
You should trace txt.width and txt.height. They must be at least greater or equal to one. It does not matter if a DisplayObject is visible or not.

Resources