Jump to content
Search Community

Adding scaled images to FlexTransformManager

Guest odg
Moderator Tag

Recommended Posts

Guest odg

Hi all,

 

I am quite new to flex so this might be an easy question:

 

I am making an application where the user can upload images to a folder and position the images on a canvas.

 

I add this images to the manager this way:

 

		var element:Object = new Object;
	for each(element in imageCollection){
		var image:Image = new Image;
		image.id = element.id;
		image.source = "http://localhost/data/"+element.src;
		image.autoLoad = true;			
		myManager.addItem(image);			
	}

 

Now when they are loaded they appear in the manager but they are fully sized. Once clicked on them they get resized automatically so fit the manager by default managerbehaviour (i did not code this)

 

Is there a way to make the images fit the manager automatically when added to the manager?

 

When i add image.width = 120 to the above code the image looks ok but the handlebars are still on the old values wich create whitespace.

 

Any help would be appreciated.

Link to comment
Share on other sites

The problem is that when you add the items to TransformManager, it has no idea what the size or aspect ratio is because your images haven't loaded yet. So you should add an event listener to your Image objects so that when they finish loading the content, they call update() on the associated TransformItem and do a simple scale() to force the constraints to kick in. Like:

 

function onImageLoad(event:Event):void {
   var item:TransformItem = myManager.getItem(event.target);
   item.update(); //calibrates internally, setting the aspect ratio, etc.
   item.scale(1, 1); //just forces the restraints to kick in
}

Link to comment
Share on other sites

Thank you for the reply, yet i can't seem to get it to work.

 

I kept getting an error so i changed it to:

 

	var element:Object = new Object;
	for each(element in imageCollection){
		var image:Image = new Image;
		image.id = element.id;
		image.source = "http://localhost/Ark-beeldenbank/data/"+element.src;
		image.autoLoad = true;		
		image.addEventListener(Event.COMPLETE,onImageLoad);
		myManager.addItem(image);
	}

	function onImageLoad(event:Event):void {
		var image:Image = event.target as Image;
		var item:TransformItem = myManager.getItem(image);
		item.update(); //calibrates internally, setting the aspect ratio, etc.
		item.scale(1, 1); //just forces the restraints to kick in

	}

 

It does not rescale the image to fit the manager yet. Am i missing something?

Link to comment
Share on other sites

I just made it easier for you - I updated TransformItem and added a new fitInsideBounds() method. It should be as easy as:

 

function onImageLoad(event:Event):void {
        myManager.getItem(event.target).fitInsideBounds();
}

 

Just log into your GreenSock account and download the latest version. https://www.greensock.com/account/. Please let me know if that works well for you.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...