Yeah the other reply makes sense and what you want to do is avoid
scaling the image and setting scaleContent. Instead, think of the map
as having a constant size and doing all of your layout in a single
fixed size canvas.
So it'll be something like this:
<Application>
<ViewStack>
<Canvas resize="setScale()" width="100%" height="100%"
id="sizeDeterminer">
<!-- treat the two canvases below as one component... in fact, roll
them into a separate mxml file -->
<Canvas
id="scalableCanvas"
scaleX="{myMeasuredScaleX}"
scaleY="{myMeasuredScaleY}">
<Canvas
id="mapCanvas">
width="400"
height="300"
<Map/>
<Lines/>
<Button/>
</Canvas>
</Canvas>
<!-- end the map component -->
</Canvas>
then
<mx:Script>
[Bindable]
public var myMeasuredScaleX:Number;
[Bindable]
public var myMeasuredScaleY:Number;
private function setScale():void
{
//figure out how big the area you have to work in is, then make
//a scale factor out of it by comparing it to the natural size
//of your map component (400x300 in this case) - this is all
//hardcoded and nasty but it should get you started. Don't rely on
//asking mapCanvas for its width and height, because it will give
//you the value post-scale. you want a constant value so you can
//build the scale factor yourself.
var factor:Number = sizeDeterminer.width/400;
myMeasuredScaleX = myMeasuredScaleY = factor;
}
</mx:Script>
Now I haven't run this and there are likely typos - but it shows how
you can do this. Again, the idea is that your map part and all its sub
parts are laid out absolutely in a fixed size canvas. Then there's a
canvas above that which we scale. Then above that is the canvas that
is the actual child of the ViewStack. If anyone sees errors (and I'm
sure they are there) please point them out.
Cheers,
-b
--- In flexcoders@yahoogroups.com, "stldvd" <[EMAIL PROTECTED]> wrote:
>
> Hi Ben --
>
> Here's what I have:
> Application
> BaseContainer, which extends VBox and contains a viewstack
> (each of the maps is a canvas in the viewstack)
>
> So then for each map itself I've got this:
>
> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml";>
>
> <mx:Image
> width="100%"
> height="100%"
> source="com/alandalus/assets/images/wideMap.jpg"
> scaleContent="true"
> maintainAspectRatio="true"/>
>
> <mx:Image
> id="line"
> source="com/alandalus/assets/images/5line100percent.png"
> alpha=".5"/>
>
> <mx:Button icon="@Embed
> (source='com/alandalus/assets/images/history.jpg')"
> x="255"
> y="373"
> width="42"
> useHandCursor="true"
> buttonMode="true"
> mouseOver="line.alpha=1"
> mouseOut="line.alpha=.5"
> click="playMP3()" toolTip="Click to Play Audio"/>
> </mx:Canvas>
>
> Thanks,
>
> David
>
> --- In flexcoders@yahoogroups.com, "Ben Throop" <ben@> wrote:
> >
> > Hey David...
> >
> > How are things currently laid out and in what container? If I knew
> > that I could make a more accurate suggestion... but what I will say
> is
> > that if you treat the entire map as a single component, then having
> > the entire thing scale may be more effective than what appears to be
> > there, which is the map image, and then the icons on top of it, all
> in
> > a container at the same level. So if you have something like this
> >
> > Application
> > |
> > Canvas
> > ||
> > | Map Image
> > Map Icons
> >
> > What you'd rather have is
> > Application
> > |
> > Canvas
> > |
> > Map Component (this is what you'd scale)
> > ||
> > |Map Image
> > Map Icons
> >
> > So how is it set up now?
> > -b
> >
> > --- In flexcoders@yahoogroups.com, "stldvd" <stldvd@> wrote:
> > >
> > > I forgot to say that I've tried scaleContent="true" for the child
> > > images. That doesn't seem to work either.
> > >
> > > Anyone?
> > >
> > > --- In flexcoders@yahoogroups.com, "stldvd" <stldvd@> wrote:
> > > >
> > > > Hi All,
> > > >
> > > > I'm working on some interactive maps (just one so far) at
> > > > http://www.brighttext.com/afropop/alandalus.html
> > > >
> > > > I need to be able to position precisely some icons and arrows,
> so
> > > I've
> > > > got the parent container as a canvas -- I can use absolute
> layout
> > > and
> > > > position the child images using x and y properties.
> > > >
> > > > The problem is that the child images won't scale with the
> parent.
> > > If
> > > > you resize the browser you'll see what I mean.
> > > >
> > > > How does one precisely position images in such a way that they
> will
> > > > scale with their parent container?
> > > >
> > > > Thanks,
> > > >
> > > > David
> > > >
> > >
> >
>
