My basic requirement is to draw a circle inside a BorderContainer with the layout set to BasicLayout
I run this method in the CREATION_COMPLETE event of the BorderContainer object.
this.graphics.beginFill(0xff0000);
this.graphics.lineStyle(1, 0x00ff00);
this.graphics.drawCircle(0, 0, 50);
this.graphics.endFill();
Sorry to be blunt, but why don't I see anything? I know I must be missing something VERY basic here. Can I just draw like this OR should I draw in some other event?
P.S: I know that I can create a Ellipse object and easily add it to the border container but I would like to know how I can do this using the graphics object.
Back in the olden days you would override updateDisplayList and do this sort of drawing there. I'm guessing things are getting refreshed at some point AFTER creation complete. Since you are drawing rather than adding an object to the stage, your circle isn't really part of any kind of lifecycle and will get wiped clean whenever the display list is dirtied/redrawn. Hope that helps.
I see two possible problems.
you forget to add BorderContainer
object to the stage
this is no reference of your
BorderContainer object. Try to trace
this in your event listner, or
change it to target or currenTarget
var _shape:Shape=new Shape();
addchild(_shape);
_shape.graphics.lineStyle(1, 0x000000, 1);
_shape.graphics.drawRect(10,5,100,100);
Using the above code will show a rectangle on your screen.
Related
If I skin a button and use the AS3 graphice.clear() and graphics.lineTo and beginFill to create a shape, the button overlaps other items in the container.
When I use the and mxml to create the same shape, the button is neatly positioned inside the container.
Why is that?
This is probably happening because Flex is unable to calculate the size of your dynamically drawn button, while the MXML version allows the size to be calculated prior to being displayed. You may need to override the measure method to calculate the width/height. If that's not the issue, then post some code so we can take a closer look. Hope that helps.
Because the Line Object is doing a bunch of checks and extra work you aren't doing when you use the Graphics object. Look at the code for spark.primitives.Line to see what its doing that you aren't.
I am creating a component that will be a large plus or a large minus. I don't want to use a bitmap because even I can draw this using the Graphics class, but the component must be clickable (the Shape class is not).
It will be part of an item renderer, so I want it to be as light-weight as possible. UIComponent does not seem to sent CLICK messages.
Thanks for any ideas
I would suggest creating a Sprite object and drawing the minus and plus arrows to its graphics object. You'll then have to addEventListener(MouseEvent.CLICK, someFunction); in its constructor or wherever else you'll need it.
You may also want to set cacheAsBitmap to true at that point, so that it's not redrawn every frame.
EDIT: Per #jeremynealbrown you have to use the SpriteAsset class if you are working in Flex, apparently. Very similar, but another 2 levels of abstraction are added.
If you look here:
UIComponent Docs
You will see that UIComponent has InteractiveObject in its inheritance path. InteractiveObject is the class that adds mouse event functionality.
UIComponent will actually dispatch click events. However, if there is no content drawn to the graphics, the UIComponent will have no area that can be clicked. If the plus or minus icon you draw is too small to reliably catch mouse activities, then draw a fully-transparent rectangle to increase the hit area.
I was just going through one code used to draw one chart. This code is written in the updateDisplayList function of the ItemRenderer of ColumnChart. I am not good at the graphics part of Flex. Can anybody please explain me what this code is doing? I can see the final output, but am not sure how is this achieved.
var rc:Rectangle = new Rectangle(0, 0, width , height);
var g:Graphics = graphics;
g.clear();
g.moveTo(rc.left,rc.top);
g.beginFill(fill);
g.lineTo(rc.right,rc.top);
g.lineTo(rc.right,rc.bottom);
g.lineTo(rc.left,rc.bottom);
g.lineTo(rc.left,rc.top);
g.endFill();
Regards, PK
That code is drawing a rectangle, albeit in a bit of a roundabout way.
The drawing api in flash uses a "draw head". I can't see any reason for using g instead of graphics other than to save some typing. g.clear() erases anything that has been drawn before.
g.moveTo(rc.left, rc.top) moves that into position, in this case the top left corner of the rectangle (0,0). g.beginFill(fill) starts a fill, nothing surprising there.
The g.lineTo(x, y) calls move the draw head around to the the four corners of the rectangle and finally g.endFill() completes the fill.
You can get the same result doing this:
graphics.clear();
graphics.beginFill(fill);
graphics.drawRect(0, 0, width , height);
// this last call is only needed if you're going to draw even more,
// if not you can omit that too
graphics.endFill();
It basically draws a rectangle.
//clear any existing drawings
g.clear();
Set the current drawing position to the top-left corner of the rectangle, which is 0, 0
g.moveTo(rc.left,rc.top);
//start filling with the color specified by `fill`
g.beginFill(fill);
Draw a line to top-right corner of the rectangle from the current location (which is top-left corner). The lineTo method updates the current location so that subsequent drawings start from the new point.
g.lineTo(rc.right,rc.top);
Draw the remaining sides of the rectangle:
g.lineTo(rc.right,rc.bottom);
g.lineTo(rc.left,rc.bottom);
g.lineTo(rc.left,rc.top);
//end the fill.
g.endFill();
Check out the livedocs page for Graphics class for more info.
All the visual components in Flex inherit directly/indirectly from the UIComponent class. The updateDisplayList method of UIComponent draws the object and/or sizes and positions its children. This is an advanced method that you might override when creating a subclass of UIComponent. When you override it in your child class, you should call super.updateDisplayList with the correct parameters to make sure that the base class components are properly updated.
Degrafa makes this kind of thing much easier.
If I have an object in a layout in Flex what is a good way to 'break it out' of that layout to be able to animate it.
For instance I have an image and a caption arranged at an angle. I want to make the image 'zoom out' slightly when the mouse rolls over it. Since its in a layout container is active if I were to resize it then obviously it would move around everything else.
I dont think I can achieve what I want by just setting includeinlayout=false.
Any experience with best practices on this?
My best idea I'm wondering about is making the image invisible and creating another image at the same location by using the screen coordinate conversion functions. This jsut semes clumsy
Wrap your object in a fixed size Canvas so that the layout upstream will remain the same. Then position the object manually within that container and then set its includeInLayout to false. At that point, you could do whatever you wanted with the interior object. Oh, also set clipContent to false. This should work whether you want it to grow or shrink.
If this is an itemrenderer or something that you've wrapped into a class, you could handle all of this in the class definition and make it transparent to consumers of the object. You'd also be able to write a mouseOver function that did what you wanted with the interior object that should zoom.
What is the best way to change/set a registration point on a Flex 3 display object? I know this isn't really built in to easily change, but does anyone have any suggestions on how I could extend UIComponent to achieve this?
For some reason, the Flash Player API doesn't expose the registration point of DisplayObjects (and the Flash IDE makes them a pain to modify once an object is created). The best solution, as David pointed out, is to add your component as a child of another component (UIComponent would be fine). So, for example, if I had a Button and I wanted its registration point at its center, I'd add it as a child of a UIComponent (not Canvas) and offset the child by setting its position to (-button.width/2, -button.height/2).
Put your DisplayObject inside a sprite and set the DisplayObject's x & y positions to the negitive of your target registration point. Apply all transforms to the Sprite container.
Put it inside a Canvas container, with its clipContent attribute set to false. Within the canvas, you can put your object wherever you like.