B4i Library Zoomable ImageView

Hi All,

Please find attached a new Class which will allow to have Zoomable Images like in popular apps.

Please see the attached exemple.

If MinScale and MaxScale are not set the default values are Minscale to fit the View size and MaxScale is 1.

Please ask if you have any questions.

As the Upload limitations are not so high I can not upload an image with the example so you have to put your own.

Narek

 

[mcGeorge]

5 minutes and it works, great!
Thanks narek.

 

[Luiz Fernando Orlandini]

Hi All,

Please find attached a new Class which will allow to have Zoomable Images like in popular apps.

Please see the attached exemple.

If MinScale and MaxScale are not set the default values are Minscale to fit the View size and MaxScale is 1.

Please ask if you have any questions.

As the Upload limitations are not so high I can not upload an image with the example so you have to put your own.

Narek

Great job Narek.

I just found an issue that I'm trying to solve without success yet. When I use ZoomedImage Sub and set the image in another ImageView I get the image rotated.

Any idea?

 

[Luiz Fernando Orlandini]

Hi All,

Please find attached a new Class which will allow to have Zoomable Images like in popular apps.

Narek

Hi Narek,

this class works really well for landscape images, although when I pick a portrait image and use ZoomedImage method, I got the image rotated.

Can you help me with?

Looking for the code, something suggests that the problem is with the code below:

-(UIImage*)ImageInRect: (UIImage*)image :(CGRect)rect
{


UIImage * LandscapeImage = image;
UIImage * PortraitImage = [[UIImage alloc] initWithCGImage: LandscapeImage.CGImage
                                                     scale: 1.0
                                               orientation: UIImageOrientationLeft];
CGImageRef imageRef = CGImageCreateWithImageInRect([PortraitImage CGImage], rect);

UIImage *img = [UIImage imageWithCGImage:imageRef]; 


CGImageRelease(imageRef);

return img;
}

Thanks man.

 

[joilts]

Hi, is there a way to crop a specific area of the zoomed image? I've been looking some code example here in forum, but was unable to find.

 

[narek adonts]

didnt understood the question ?

 

[joilts]

didnt understood the question ?

What I was trying to ask, and was difficult to explain (sorry for that): https://www.b4x.com/android/forum/threads/crop-image-area-from-a-zoomed-pic.61386/
Opened an thread for that.

 

[imbault]

Thank Narek, I just needed that...

 

[mystic]

Hi narek,

first thanks for this great library.
It just happend that i have some problems with it.

I try to make an Zoomable Image in my App, using following code:

  If pg.IsInitialized = False Then
     pg.Initialize("pg")
     pg.Title = aTitle
   End If
   Main.NavControl.ShowPage(pg)
   pg.RootPanel.RemoveAllViews
   
   
   
   imgg.Initialize(modHTTP.fRX_Image)
   imgg.MaxScale = 10.0
   imgg.UnZOOMonDoubleTap = True
   imgg.AddToView(pg.RootPanel, 0, 0, pg.RootPanel.Width, pg.RootPanel.Height)

pg being the page
imgg being your class
fRX_Image being an Bitmap containing the Image

minScale i have left Default becouse i dont need smaler than View Image


If i start with this code, everything goas fine until i want to zoom.
The image is shown, and i can move around on it. (Image is bigger than Screen)
But the "Zoom" function only works very minimal (like ~5% missing at the edge on full zoom in).

I already tryed playing around with different values for Maxscale, minscale and scale ....
Maybe you have an Idea what i can try to fix this?

Already thanks in advance for any possible help.

 

[joilts]

But the "Zoom" function only works very minimal (like ~5% missing at the edge on full zoom in).

I already tryed playing around with different values for Maxscale, minscale and scale ....
Maybe you have an Idea what i can try to fix this?

I think I had a similar situation, I don´t really know a lot about this lib, but in my case, minscale and maxscale were too close (almost the same), when using iPad. At iPhone 4, I had no problem. I used default maxscale.

That's how I initiate minscale:

imgZoom.MinScale=Min(imZoom.Width/imZoom.Bitmap.Width,imZoom.Height/imZoom.Bitmap.Height)

Using iPad it was bigger than default maxscale (1).
If you do not define minscale, I think it is calculated as

Dim f As Float=Max(sc.Width/iv.Bitmap.Width,sc.Height/iv.Bitmap.Height)

To fix it, I have changed maxscale to a bigger value (10 times minscale).

 

[androidtom]

Thanks Narek, great class. If I start an image with the top edge 50% down the page is there a way to move the image to the top? For example I have a thumbnail located after some descriptive text. If I pinch-zoom the thumbnail it zooms correctly but I can't move it to the top of the screen.

 

[narek adonts]

Thanks Narek, great class. If I start an image with the top edge 50% down the page is there a way to move the image to the top? For example I have a thumbnail located after some descriptive text. If I pinch-zoom the thumbnail it zooms correctly but I can't move it to the top of the screen.

didnt understood the issue

 

[androidtom]

The issue is I am looking for a way to move the image around on the screen . Pinch and zoom works excellent but I also want to move the imagezoom view on the screen.

 

[narek adonts]

The issue is I am looking for a way to move the image around on the screen . Pinch and zoom works excellent but I also want to move the imagezoom view on the screen.

I am note sure but if I understood correctly you have to change the insets of the scrollview.
But anyway I dont understand the effect that you wanr to achive

 

[mystic]

Hi again,

first i whould like to thank joilts.

What he pointed out was indeed something i hadnt checked before.
I had adjusted my code slightly to prevent the situation joilts mentioned,
aswell as some Sizing problems that had occured.

New code:

  If pg.IsInitialized = False Then
     pg.Initialize("pg")
     pg.Title = aTitle
   End If
   Main.NavControl.ShowPage(pg)
   pg.RootPanel.RemoveAllViews
   
   imgg.Initialize(modHTTP.fRX_Image)
   imgg.MinScale = 1
   imgg.MaxScale = 10 * imgg.MinScale
   imgg.UnZOOMonDoubleTap = True
   
   imgg.AddToView(pg.RootPanel, 0, 0, Main.TOTAL_WIDTH, Main.TOTAL_HEIGHT)

Unfortunatly it wasnt the solution to my original problem.

Again Thanks in Advance for any Possible help.

 

[narek adonts]

Hi again,

first i whould like to thank joilts.

What he pointed out was indeed something i hadnt checked before.
I had adjusted my code slightly to prevent the situation joilts mentioned,
aswell as some Sizing problems that had occured.

New code:

  If pg.IsInitialized = False Then
     pg.Initialize("pg")
     pg.Title = aTitle
   End If
   Main.NavControl.ShowPage(pg)
   pg.RootPanel.RemoveAllViews
  
   imgg.Initialize(modHTTP.fRX_Image)
   imgg.MinScale = 1
   imgg.MaxScale = 10 * imgg.MinScale
   imgg.UnZOOMonDoubleTap = True
  
   imgg.AddToView(pg.RootPanel, 0, 0, Main.TOTAL_WIDTH, Main.TOTAL_HEIGHT)

Unfortunatly it wasnt the solution to my original problem.

Again Thanks in Advance for any Possible help.

I really dont understand what is not working.

 

[mystic]

I really dont understand what is not working.

Hi narek,

my original post:

If i start with this code, everything goas fine until i want to zoom.
The image is shown, and i can move around on it. (Image is bigger than Screen)
But the "Zoom" function only works very minimal (like ~5% missing at the edge on full zoom in).

I already tryed playing around with different values for Maxscale, minscale and scale ....
Maybe you have an Idea what i can try to fix this?

I wasnt able to come up with a reason for this behavior so far.

As Always thanks for helping.

 

[kreativa]

Great job Narek.

I just found an issue that I'm trying to solve without success yet. When I use ZoomedImage Sub and set the image in another ImageView I get the image rotated.

Any idea?

Hi i have the some problem. Did you solve it?

 

[kreativa]

Hi All,

Please find attached a new Class which will allow to have Zoomable Images like in popular apps.

Please see the attached exemple.

If MinScale and MaxScale are not set the default values are Minscale to fit the View size and MaxScale is 1.

Please ask if you have any questions.

As the Upload limitations are not so high I can not upload an image with the example so you have to put your own.

Narek

Hi narek
why when i crop a portrait image i get a 90 degrees rotated image?
How can i solve?

 

[Luiz Fernando Orlandini]

Hi narek
why when i crop a portrait image i get a 90 degrees rotated image?
How can i solve?

I played a lot with that and I found the same issue. I did some tweaks on the code, trying to reset some properties that iOS set into the image, but until now, no success at all.

Hoping to have someone with a solution to that as well.