Is there any way to draw text in a DisplayObject or Shape using only ActionScript? The only way I can find on the web is by creating a TextField, but I can't add a TF to a DisplayObject or Shape.
Edit:
Solved thanks to viatropos.
For anyone that's interested:
DisplayObject implements IBitmapDrawable which can be passed as an argument to the draw function of a BitmapData object, which then can be drawn using graphics.beginBitmapFill.
var textfield:TextField = new TextField;
textfield.text = "text";
var bitmapdata:BitmapData = new BitmapData(theWidth, theHeight, true, 0x00000000);
bitmapdata.draw(textfield);
graphics.beginBitmapFill(bitmapdata);
graphics.drawRect(0, 0, theWidth, theHeight);
graphics.endFill();
Good question. This is beyond anything I've ever needed to do, but I think I know how to do it.
Shape extends DisplayObject, but not DisplayObjectContainer, so you can't add anything to it. But it does have the graphics property, so you can draw things into it. The best way I can think of is to take a Bitmap snapshot of the TextField, and draw that into the Shape. I know this is what Degrafa does for their RasterText (check out the source, it's really helpful).
If you changed your Shape to a Sprite instead, it's a lot easier. Sprite extends DisplayObjectContainer, so you could add your TextField there.
Hope that helps,
Lance
Related
In Qt, whenever a widget is set to hide, I want to perform the action in smooth way.
Is there any standard function for that?
Heres example for show and hide button:
void MainWindow::hideButton(){
QGraphicsOpacityEffect* fade_effect = new QGraphicsOpacityEffect(this);
ui->pushButton->setGraphicsEffect(fade_effect);
QPropertyAnimation *animation = new QPropertyAnimation(fade_effect, "opacity");
animation->setEasingCurve(QEasingCurve::InOutQuad);
animation->setDuration(5000);
animation->setStartValue(1);
animation->setEndValue(0.01);
animation->start(QPropertyAnimation::DeleteWhenStopped);
}
void MainWindow::showButton(){
QGraphicsOpacityEffect* fade_effect = new QGraphicsOpacityEffect(this);
ui->pushButton->setGraphicsEffect(fade_effect);
QPropertyAnimation *animation = new QPropertyAnimation(fade_effect, "opacity");
animation->setEasingCurve(QEasingCurve::InOutQuad);
animation->setDuration(5000);
animation->setStartValue(0.01);
animation->setEndValue(1.0);
animation->start(QPropertyAnimation::DeleteWhenStopped);
}
Use the animation framework and set the geometry to 0,0 for the height and width, when you restore it just set it back to the previous height and width value. There's various easing effects in there for you to use as you do it, and a few code examples.
Well, the problem may be a simple one but I can't figure it out. I have an image loaded into BitmapData. now I want to take text from a textinput and put it on the BitmapData. Basically it's drawing a text on the BitmapData and get the result as another BitmapData that will consist of the original BitmapData with the text drawn over it on a specified position. What's the best way to achieve this in flex?
To put the text inside a bitmap you can do:
var channelName:TextField = new TextField();
channelName.textColor=0x000000;
channelName.antiAliasType = AntiAliasType.NORMAL;
channelName.alpha=1.0;
var txtFormat:TextFormat = new TextFormat("SansSerif",14,0x000000,true);
channelName.setTextFormat(txtFormat);
var bitmapdata:BitmapData = new BitmapData(
channelName.width, channelName.height, true, 0x000000);
bitmapdata.draw(channelName);
You can't draw over bitmapdata per say, but you could compose it from the data. Since you have BitmapData, it's easy enough to change it to a bitmap (var bitmap:Bitmap = new Bitmap(bitmapData);) and then add it as source for an image.
Now that you have an actual image on the stage, you can now add text above that using what you like (text, label, textarea, etc) and then you can do a Bitmap.draw over the dimensions of the image to get the pixel information back into a BitmapData (under Bitmap.bitmapData).
i want to add UIComponent inside a spite. here is the code:
private function make() : void {
var circle : Sprite = new Sprite();
circle.graphics.beginFill(0xFF0000, 0.2);
circle.graphics.drawCircle(0, 0, 20);
var button : Button = new Button();
button.label = "testing...";
var wrapper : UIComponent = new UIComponent();
circle.addChild( button );
wrapper.addChild( circle );
addChild( wrapper );
}
the problem is that button is added, but is not displayed. if i do reversed - add sprite to uicomponent - everything works fine, but this way it doesn't work. i tried to use invalidate functions for button etc... even tried making "circle" as UIMovieClip, but no luck - button is still invisible. also if i simply do "addChild( button );" - it is shown, what the... please help, what i am doing wrong? how can i add a button inside a sprite?
Short answer, you can't. What you CAN do is instead of using Sprite, you use UIComponent for your circle.
The reason for this is that UIComponent has A LOT of code that changes how it behaves, including how to add and layout children. You could essentially take the same code to a Sprite since UIComponent does extend it, however that would be VERY redundant. This works great for me:
private function make() : void {
var circle : UIComponent= new UIComponent();
circle.graphics.beginFill(0xFF0000, 0.2);
circle.graphics.drawCircle(0, 0, 20);
var button : Button = new Button();
button.label = "testing...";
var wrapper : UIComponent = new UIComponent();
circle.addChild( button );
wrapper.addChild( circle );
addChild( wrapper );
}
Unfortunately, in order to use Sprite the way you are trying to do it, you would have to extend Sprite and implement IUIComponent.
Taken from the Flex 3 Language Reference:
Note: While the child argument to the
method is specified as of type
DisplayObject, the argument must
implement the IUIComponent interface
to be added as a child of a container.
All Flex components implement this
interface.
Sprite does not implement IUIComponent, so you are experiencing a pretty typical issue. UIComponent's don't typically have speed issues when compared to Sprites, so I would recommend just drawing on your UIComponent.
As stated before, you /could/ extend Sprite to implement IUIComponent, but it's a pain.
Hope this helps!
I have a question that might seem "basic" but I just cannot figure out how to do it...
I have a box and I'd like to change the borderColor. Till there, nothing special. Just a box.bordercolor = xxxxxx...
BUT, I'd like to have the top and bottom border with one color, and the left and right border with another color... And that's the part where I'm stuck.
Any tips? Suggestions?
Thanks for your help and time! ;)
Regards,
BS_C3
#Senz
Hi!
Unfortunately, I won't be able to share the code without making it "incomprehensible"...
But this is the idea... We have 2 main components: ArrowButton and Navigator.
ArrowButton is a hbox containing a label and an image (this image is the arrow tip and it changes depeding on the state of the ArrowButton).
Navigator is a hbox containing a series of ArrowButton. An ArrowButton overlaps the arrowButton on its right in order to create the pointed end of the button.
And then you just create a whole bunch of functionnalities around these components.
I hope this helps... Do not hesitate if you have some more questions =)
Regards.
I noticed you are asking about the Flex 3 SDK. Skins are a good approach. They have changed somewhat in Flex 4(for the better IMHO). If you are wanting to use the Flex Drawing API, then just extend the Box class into a custom class that would look something like this:
public class MultiColorBorderBox extends Box
{
// You could add getters/setters or constructor parameters to be able to change these values.
private var topColor:uint = 0xFF0000;
private var rightColor:uint = 0x00FF00;
private var bottomColor:uint = 0x0000FF;
private var leftColor:uint = 0xFF00FF;
private var borderWidth:Number = 20;
public function MultiColorBorderBox()
{
super();
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
// This just ensures you dont have content under your border
this.setStyle("paddingLeft", borderWidth);
this.setStyle("paddingRight", borderWidth);
this.setStyle("paddingTop", borderWidth);
this.setStyle("paddingBottom", borderWidth);
var g:Graphics = this.graphics; // This creates a new Graphics object and sets it to the MultiColorBorderBox graphics object. Since Box (superclass) descends from a Sprite object, it has a graphics object automatically.
g.clear();
g.moveTo(0,0); // Moves the position to the top left corner
g.lineStyle(borderWidth, topColor); // Sets the line style with the width and color
g.lineTo(unscaledWidth, 0); // Draws the top border from top left to top right corners
g.lineStyle(borderWidth, rightColor); // Changes the line style
g.lineTo(unscaledWidth, unscaledHeight); // Draws the line from top right to bottom right
g.lineStyle(borderWidth, bottomColor); //Changes the bottom border style
g.lineTo(0, unscaledHeight); // Draws the line from bottom right to bottom left
g.lineStyle(borderWidth, leftColor); // Changes the border color
g.lineTo(0,0); // Closes the box by drawing from bottom left to top left
}
I'm pretty sure you're going to have to create a borderSkin to accomplish this. I believe these are created in an external program, such as Flash Professional; but more info is in the docs.
I don't think that Flex makes any distinction between top/bottom borders and left/right borders. Creating a skin would certainly be the nifty-slick way to do it. A programmatic way might be to use box.graphics to draw your border by hand. I'd start by trying to override the updateDisplayList() function to draw your border...
I finally did a pretty simple thing.
I guess I wasn't detailed enough regarding the specifications.
The actual aim was to create a navigator with arrow shaped buttons.
Each button had to be highlighted when it was selected. And this http://www.freeimagehosting.net/uploads/bcd0d762d7.jpg is how the navigator looked like.
Each button is actually an HBox containing a Box (with a label) and an Image (for the arrow tip), with a horizontalGap = 0.
I didn't think about adding a glowfilter to the button. So I was trying to just change the colors of the top and bottom part of the Box...
So, the glowfilter in the button worked pretty well.
Sorry for the lack of explanations about the context >_< And thanks for your answers!!
Regards.
I'm trying to calculate how WIDE to make my button, based on the text that it will contain, and when I try to google for how to calcuate something as simplistic as the WIDTH OF SOME TEXT, I go cross-eyed just trying to wade through apparently nonsensical esoteric counter-intuitive voodoo. Can anyone out there help simplify for me how I would write a function like this:
public function HowWideWouldThisTextBeIfItWereInThisButton(Text:String,Container:Button):int {
...
}
Thanks in advance.
So long as you're in a UIComponent, you can use the measureText function.
public function howWideWouldThisTextBeIfItWereInThisButton(text:String,container:Button):int {
var lineMetrics:TextLineMetrics = container.measureText(text);
return lineMetrics.width;
}
That being said, the flex button component should automatically size to the width of the text, if you don't set a width on it. That way if you need the text width, you can just call use the textWidth property.
This works any format, size, font type. Don't forget properties "autoSize" and "wordWrap"!
var tf:TextField = new TextField();
addChild(tf);
tf.autoSize = TextFieldAutoSize.LEFT;
tf.wordWrap = false;
tf.text = "Whatever here";
tf.width = tf.textWidth + 4; // add 2 pixels-gutters left & right
Your button will need to be "tf.width" wide...
Here's how you do it in Spark:
I've modified - simplified - his example a bit here:
var textMetrics:TextLineMetrics = label.measureText( label.text );
var textWidth:int = textMetrics.width;
Here's a way that works also:
var tempText:Text = new Text();
tempText.regenerateStyleCache(false);
var textWidth:int = tempText.measureText(*yourstring*).width;
as I think, textField.textWidth construction works fine... until you change the font size.
It seems it calculates width based on 12px font.
So, if you have embedded font and global styling you can try fast solution:
var realWidth = myLabel.textField.textWidth * (fontSize / 12);
I've tried this on long and short strings and the result is correct.
Joshua, it really helps to be clear. Are you talking TextField, MX Label, Spark Label, RichText, etc? Different text components use different text engines, such as FTE and TLF and may have different solutions. I certainly wish Adobe had a good set of utilities or sample code which could predict what the size of font rendered onto the controls would be, before you actually do it. But, the good news is that in certain cases - like, a good old fashioned TextField, you can predict this pretty well. You just make a TextField, set it's textFormat field, auto size method and the text. You should be able to get it's size before adding it anywhere. I don't remember what the order was, but, I remember the order you set those properties matters. If you can't figure out how to do it, I can provide a code example. Now, for the new, "improved", components such as Spark Labels - I'll be buggered if I can find a damn way... spent a number of hours on this and haven't found a way.. or someone who knows a way :P.
Following up my comment on quoo's answer, here's the code for same purpose, but just grabbing the width out of a TextField, using TextLineMetrics as well:
public function mtxtWidth(container:TextField):int {
var lineMetrics:TextLineMetrics = container.getLineMetrics(0);
return lineMetrics.width;
}
Sounds like you could use textWidth