I have a canvas in my Flex project. It has one child element.
I made the element's y property to 500 and a scrrollbar appeared on the canvas.
I dragged the scrollbar to bottom to see my element.
I moveed element to y = 200
After that the scrollbar is still on the same place. How can I update the scrollbar and move it to the top?
Thanks
Please, provide the code you're trying to use.
The following code behaves correctly (scrollbar disappears after clicking the label):
<mx:Canvas height="300" width="300">
<mx:Label id="tl" text="Moved label" y="500" click="tl.y=200;" />
</mx:Canvas>
Related
a .fla is 500 x 300. Inside, content moves OUT of the 500 x 300 stage so that it appears like it hides or moves off of the screen.
.fla complied... loaded into Flex via SWFLoader:
<mx:Conainer width="500" height="300">
<mx:SWFLoader width="100%" height="100%" />
</mx:Conainer>
Loaded .swf file shows outside of the 500 x 300 Container in Flex.
How can i get it so that only what is INSIDE of the Container is visible?
Ok, i figured it out.
<mx:Canvas id="swfHolder" mask="{maskCanvas}">
<mx:SWFLoader id="swffer" scaleContent="true" />
</mx:Canvas>
<mx:Canvas id="maskCanvas" backgroundColor="#000000"/>
The trick is to use the "mask" property. Note the object doing the "masking" must have a backgroundColor property set. I found this article helpful: link text
please use scaleContent="true" in SWFLoader tag.
<mx:Conainer width="500" height="300" clipContent="true">
<mx:SWFLoader width="100%" height="100%" />
</mx:Conainer>
Use "clipContent" property
Flex help for Canvas:
clipContent:Boolean [read-write]
Whether to apply a clip mask if the positions and/or sizes of this container's children extend outside the borders of this container. If false, the children of this container remain visible when they are moved or sized outside the borders of this container. If true, the children of this container are clipped.
If clipContent is false, then scrolling is disabled for this container and scrollbars will not appear. If clipContent is true, then scrollbars will usually appear when the container's children extend outside the border of the container. For additional control over the appearance of scrollbars, see horizontalScrollPolicy and verticalScrollPolicy.
I have the following code in my flex project.
<mx:Canvas id="scroller" styleName="myCanvas" width="635" horizontalScrollPolicy="off" y="60" height="370" >
<mx:Canvas id="thumbContent" width="635" verticalScrollPolicy="off"
horizontalScrollPolicy="off" y="0" backgroundColor="#00ff00"
backgroundAlpha="0" height="370"/>
</mx:Canvas>
</mx:Canvas>
I want to dynamically add different items to thumbContent canvas and use scroller canvas to scroll. I see than the height of thumbContent bigger than 7977 it truncate from scrolling.
So - I see the scroller canvas with empty space on top. Then I scroll to bottom - I see the content of thumbContent and at bottom scrolling I see empty space too.
It looks like thumbContent is under hidden mask, is this correct?
Looks like you want thumbContent to expand dynamically as you add content. In this case, you need to remove the height attribute from thumbContent, otherwise it will want to cram more content into it than it can hold, especially if the H and V scroll bars are off.
Keep the height attribute for scroller, though, because that's what you want to use to scroll (fixed dimensions).
Also, use percentages in your application. make thumbContent width="100%" if you want it to fill up the entire width of scroller.
I have a canvas wich is a drawing area. This canvas can be scrolled horizontally and vertically.
I am trying to make a screenshot of the whole canvas, this include visible and scrolled parts.
var bmd:BitmapData = new BitmapData(board.width, board.height, false, 0xffffff);
bmd.draw(board);
This would only show me the visible part of the canvas and its scrolling bars :/
How would you solve such a problem ?
Using board.width + board.horizontalScrollPosition wont help in this case.
Thanks a lot.
I think your best bet is to nest canvases. One canvas is a fixed size which contains the smaller scrollable area and the other is the full canvas. Something like
<mx:Canvas id="boardContainer" width="800" height="600">
<mx:Canvas id="board" width="800" height="1200" />
</mx:Canvas>
That way you have a reference to a canvas that isn't masked and you should be able to take a bitmapData of the entire area.
Here's my problem - I have some code like this:
<mx:Canvas width="300" height="300">
<mx:Button x="800" />
</mx:Canvas>
So the problem is that the Button inside the canvas has an x property way in excess of the Canvas's width - since it's a child of the Canvas, the Canvas masks it and creates some scrollbars for me to scroll over to the button.
What I'd like is to display the button - 800 pixels to the left of the Canvas without the scrollbars while still leaving the button as a child of the Canvas. How do I do that?
I figured it out - apparently the Container has a property called clipContent - here's the description from Adobe:
Whether to apply a clip mask if the positions and/or sizes of this container's children extend outside the borders of this container. If false, the children of this container remain visible when they are moved or sized outside the borders of this container. If true, the children of this container are clipped.
If clipContent is false, then scrolling is disabled for this container and scrollbars will not appear. If clipContent is true, then scrollbars will usually appear when the container's children extend outside the border of the container. For additional control over the appearance of scrollbars, see horizontalScrollPolicy and verticalScrollPolicy.
The default value is true.
So basically - to show the button outside of the bounds of the container I need to do the following:
<mx:Canvas width="300" height="300" clipContent="false" >
<mx:Button x="800" />
</mx:Canvas>
That was easier than I thought it was going to be. :)
Here's the official doc...
You should be able to use the includeInLayout property also, which would allow you to apply it to each child component independently.
Here's a problem I keep running into:
I have a lot of situations where I need to display some text with a styled container like so:
<mx:Canvas>
<mx:Text text="{text}" left="5" verticalCenter="0" right="5" />
</mx:Canvas>
As you can see - the text in constrained by the left and right margins of the canvas and I have not specified a height for the text control because I want it to grow vertically when I add text to it. Reason being - if there is one line of text I want it to display in the center of the canvas but if there are two or three lines of text I want the text control to show those two or three lines of text.
What keeps happening however, is that it will only display one line of text - no matter how many times I call invalidateSize() on it or the container. What do I do?
CAVEAT: The canvas height and width is set by the component that instantiates it (this is all wrapped up in a custom component) so I can't explicitly set the width or height of the text control...
NOTE: Ok, maybe it's an easy fix because as I was typing this question I figured it out - but, here's a chance to answer an easy question!?
The Text component needs a width if you want it to automatically wrap for you. If you used a string with newlines in it it will work grow as you expected without a width. For you, use:
Edit: Ok, you want it centered in a canvas of varying size. Then you can:
<mx:HBox
width="500"
paddingLeft="5"
paddingRight="5">
<mx:Spacer width="100%" />
<mx:Text
width="100%"
text="{text}" />
<mx:Spacer width="100%" />
</mx:HBox>
Take a look at the TextArea component.