I am having 2 problems creating programmatic skin for Canvas.
First problem:
I would like to have background with rounded corners and I am using GraphicsUtil.drawRoundRectComplex in order to have round corners for only the upper two corners. The problem is that drawRoundRectComplex takes for each corner one single parameter - the corner radius. However my scaleX and scaleY factors are different and in fact the corners are not properly rounded because I either can set the radius using scaleX or scaleY.
Graphics.drawRoundRect is better because it takes two parameters for the corners - elipse width and height and then you could apply both scale factors but it doesn't allow me to specify different radius for different corners.
I am looking for an idea how to use GraphicsUtil.drawRoundRectComplex when scaleX and scaleY are different.
Second problem:
Even though I set my programmatic skin through style - <> the skin's updateDisplayList gets executed only once and after that somehow "backgroundImage" style gets "undefined" and my programmatic skin is not associated anymore to the Canvas instance. As a workaround I am setting on each resize event "backgroundImage" style again but this is ugly.
What could cause such "silent" resetting of the "backgroundImage" style to undefined?
Thanks!
isnt the backgroundImage supported by the RectangularBorder Class?
Rectabgular Border at Adobe AS3 Reference
Related
I want to introduce a canvas component by zooming from a height & width of 0.0 to 1.0. I want the component to be invisible until the zoom begins and then for it to be visible when it begins zooming.
However, if I bind the zoom effect to a showEffect trigger on the component and then make the component visible, it will first show the component at its regular size for a split second before it begins the zoom effect. If I combine the zoom effect and setting the component visible together in a parallel, it will also flash the component at its regular size for a split second before the zoom. If I make the component visible when the zoom effect starts through its effectStart event, it still does it. Does anyone know how to make it visible only when the zoom effect begins so that it doesn't flash the component at its regular size for a split second before the zoom effect?
It'd be easier to provide suggestions if you were giving us code.
That said, the reason the component "Flashes" at full size before the effect starts probably relates to the positioning and sizing of the component before the effect starts. So, before you start the effect just set the height and width of the component to the zoomHeightFrom and zoomWidthFrom of the effect.
These things can be tricky to debug, though. Especially without code.
Found an easy solution: Put the zoom effect and set property action, which sets the component to visible, in a Parallel together but add a nominal start delay of 50 ms to the set property action.
how can i get a title window with all rounded courners, so that i may make it whole round or circular shape ?
i want shape like circle..
set the property: cornerRadius
default is 4
A couple of possible approaches:
If you are using Flex 4 (spark TitleWindow as opposed to the halo TitleWindow) you can create your own skin and assign that skin in CSS. In your custom skin you can draw the background however you want, including an Ellipse set to the width and height of the TitleWindow.
If you don't want to create a skin, or you are using a halo TitleWindow, you can create a circular mask and set it as the mask property on the TitleWindow. The downside to this approach is that you will probably clip the title and the close button (if it is visible), not to mention the contents as well.
Hope that helps, let me know if you need more details on either of these approaches.
I'm working on an application where I'm drawing some rectangles on the screen, and then will need to manipulate the shapes (change their size, location). I tried to do something with .drawRect and clearing the shape each time I was manipulating it, but the RAM usage was spiking and then falling (presumeably because i keep reinitializing a new component and then removing it, and garbage collection was cleaning it out). This seems like its probably not the most efficient way to do it.
Is there a way for me to just create a shape once, and then move it around on a canvas (and change its width and height without all this RAM usage?
If all you're doing is changing it's offsets, and adjusting it's width and height without needing to fundamentally change the structure of the shape (such as rounding the corners of a rectangle of some such) you should be able to just maintain a reference to the Shape and adjust it's x, y, scaleX, scaleY properties to effect the changes.
You can try Degrafa to draw the rectangle.
To move the rectangle:
Changing the x and y or height and width property of the shape
Using the Flex Move Effect
One of my components looks like this:
<mx:Canvas id="grid" width="100%" height="100%"></mx:Canvas>
On creationComplete, I load some spirte that I want to scale and position based on the dimensions of the canvas to create a custom grid layout, but when I access the dimensions of 'grid' I get 0 and 0. Is there any way to get the dimensions without assigning absolute values?
I can't check this at the moment but can you access the measuredHeight and measuredWidth?
My understanding is that unless the Canvas contains one or more DisplayObject children, it will always report its width and height properties as 0, regardless of the percentage sizings you may have applied to it.
You could always add an empty dummy DisplayObject to the Canvas, but that wouldn't be very elegant. Depending on how you've planned to implement your custom grid, it's possible you'll have to rethink the design...
Is it possibly created but not yet displayed (e.g. visible)? Since final size and shape is derived, it doesn't happen until the thing actually needs to be drawn. Width and height are documented to be the values actually in use - there are even events for when they change.
Worst case, try trapping it out in the canvas Resize event.
have you tried binding the width and height of the Canvas to its parent? If it is 100%, than it will have the same size as its parent and you could either bind or size your Sprite (UIComponent) based on the parent container of the Canvas.
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.