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.
Related
I need help with Flex.
I want to learn how you can change the registration point for the Canvas.
I want to make a zoom of this component, but the point registration in the upper left corner! How do I move to the center?
There are two solutions:
Place your Canvas in a container object and center it.
Leave the registration point as it is and when zooming, change the x and y coordinates to the left/top.
There might be a "proper" solution though.
Hope it helps,
Rob
I'm not sure how it's going to help to 'center' the registration point, but whatever. This is how you do it:
Flex 3
<mx:Canvas clipContent="false">
<mx:Box width="400" height="400" x="-200" y="-200" backgroundColor="#000000" />
</mx:Canvas>
Flex 4
<s:Group clipAndEnableScrolling="false">
<s:BorderContainer width="400" height="400" x="-200" y="-200" backgroundColor="#000000" />
</s:Group>
But however, there are other problems, like if I want to center the canvas/group, it won't work properly if you use vertical/horizontalCenter because the content within it is off. Personally, I think this workaround is idiotic if you just want to zoom in. It's a fairly simple operation. If you need it to be centered while it's zooming in, you can always change the x/y position of whatever you're zooming into. The calculation is fairly simple to find the center of your components:
var center:Point = new Point(component.x + component.width/2, component.y + component.height/2);
I'm using a custom itemrenderer to display a list of photos and need to know how to control the width. At the moment it does this:
(source: tdwright.co.uk)
Which, as I'm sure you'll agree, is eye-bleedingly ugly.
The list is created like this:
<mx:Panel width="100%" height="100%" layout="absolute" title="Photos">
<mx:List x="0" y="0" width="100%" height="100%" id="photoList" dataProvider="{photos}" itemRenderer="thumbnails" rowHeight="100"/>
</mx:Panel>
And the itemrenderer component looks like this:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Image source="{data.src}" id="image" scaleContent="true" toolTip="{data.caption}" height="100%" horizontalAlign="center"/>
</mx:VBox>
I've tried placing width="100%" in a whole bunch of places, but without success. If anyone knows how I can control this I'd be very grateful.
If you set these properties inside the itemrenderer verticalScrollPolicy="off" horizontalScrollPolicy="off" the bars are disappeared
I don't know why they choose for the terrible "off" instead of False
A couple of observations here, based on a miasma of similar painful experiences. (Caveat: I have not built a test app to confirm everything here for this specific case)
Assuming that what you want is for the list to size its width based on the size of the itemRenderer elements it contains, those itemRenderer elements need to provide width information. Using a VBox in this fashion with scroll bars permitted means the VBox will attempt to "arbitrate" between the size of the content (Image) and the size of the parent. So yes, first thing to do is turn off the scrollbars on the VBox, assuming you can't just get rid of the VBox altogether. (I'm guessing you want the VBox so that you can put a title or something under the image as a next step)
The List as you have it specified is sized to 100% of its parent, the Panel, which is itself sized to 100% of its parent. Rather than size these elements "top down", consider letting their width be unspecified so that Flex will compute their required width bottom-up. Use maxWidth on the List or the Panel constrain their size if you need to for laying them out relative to their peers.
Another important thing to know about is the "minHeight=0" trick. Turns out, the sizing algorithm used by Flex behaves quite differently when minHeight or minWidth is set to something other than the default NaN. Setting it to 0 is extremely useful in many of these cases. Try minWidth=0 on the VBox and/or the List.
In addition to turning off the scrolling policy, set left and right to 0. That should anchor the width to the width of the parent.
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 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>
I have a canvas in Flex that shall be able only to be scrolled in vertical direction, so I set the attributes of the canvas as follows:
verticalScrollPolicy="auto" horizontalScrollPolicy="off"
The problem here is that the vertical scrollbar covers the content when it appears - altough there is enough horizontal room left. I would have expected that the content size would have been automatically adjusted.
When setting the vertical scroll policy to "on", no content is covered also.
In case I set both scroll policies to 'auto' I also get a horizontal scroll bar just for scrolling to the area that is covered by the vertical scroll bar.
Is there a workaround how I can relayout the content of the canvas when the vertical scroll bar is shown so that it does not cover any content?
It's a bug. See Flex verticalScrollPolicy bug for a workaround.
Just a side note regarding this issue: it's actually not a bug, but known (and intended?) behaviour:
"Flex considers scroll bars in its sizing calculations only if you
explicitly set the scroll policy to
ScrollPolicy.ON. So, if you use an
auto scroll policy (the default), the
scroll bar overlaps the buttons. To
prevent this behavior, you can set the
height property for the HBox container
or allow the HBox container to resize
by setting a percentage-based width.
Remember that changing the height of
the HBox container causes other
components in your application to move
and resize according to their own
sizing rules."
-- From Sizing Components in the Flex 3 help, under "Using Scroll bars"
I had to find this workaround Flex ScrollPolicy.AUTO Not Good Enough which solved this issue, because Flex verticalScrollPolicy bug workaround did not work for me.
on vbox or another component based on Container, i solved that problem like that.
Wrong:
<mx:VBox width="100%" height="100%"
verticalScrollPolicy="auto" horizontalScrollPolicy="off">
<mx:Repeater dataProvider="{hede}">
<custom:RenderItem ........../>
</mx:Repeater>
</mx:VBox>
there is no scroll bar
Working version:
<mx:VBox width="100%" height="100%"
**minHeight="1"** horizontalScrollPolicy="off">
<mx:Repeater dataProvider="{hede}">
<custom:RenderItem ........../>
</mx:Repeater>
</mx:VBox>
I'm, too. I usually have some problems with the verticalScrollBar in Flex, so I prefer to use the browser's scrollbar for scrolling the complete application. You can found a workaround here: How to Resize the Flex Stage and Use the Browser Scrollbar.
The code I use:
In Flex:
ExternalInterface.call("setInitialFlashHeight", this.height);
In my HTML (JavaScript):
function setInitialFlashHeight(newHeight) {
document.getElementById('my_flash').style.height = newHeight + 'px';
}
And if you want to add (or remove) some height:
function addFlashHeight(height) {
var divHeight;
var obj = document.getElementById('my_flash');
if (obj.offsetHeight) {
divHeight = obj.offsetHeight;
} else if (obj.style.pixelHeight){
divHeight = obj.style.pixelHeight;
}
var newHeight = divHeight + height;
document.getElementById('my_flash').style.height = newHeight + 'px';
}
To remove, you use "-" instead of "+".