0

I have already tried looking around and cannot seem to find any info on this topic for exactly what I am looking for.

If you are familiar with Unity3D uGUI, I am trying to achieve the same "Filled" type Image effect there but inside of XCode using Objective-C.

If I have a faded image of a "character" and then as time goes on, I want to fill that "character" image with a "filled character" image in the same position. How can I work through this?

I have tried using MGImageResizingUtilities but this seems to change the size of the image being that the cropped image is no longer the same size of the original image being used and scale is set to Aspect Ratio.

It was hard to find a good example but here is something to get an understanding. http://s22.postimg.org/9qghxosox/Screen_Shot_2016_01_30_at_17_08_06.png

Here is some code I am trying to use:

CALayer *maskLayer = [CALayer layer];
UIImage *maskImage = [UIImage imageNamed:@"turtle_posing"];
maskLayer.contents = (id)maskImage.CGImage;
maskLayer.bounds = self.filledTurtlePic.bounds;

CGRect turtleRect = self.filledTurtlePic.frame;

maskLayer.frame = CGRectMake(0, turtleRect.size.height, turtleRect.size.width, -turtleRect.size.height);
self.filledTurtlePic.layer.mask = maskLayer;

Here are two screenshots of an attempt to completely fill the image with the code above, and one screenshot with an attempt to partially fill the image (masklayer frame height is set to -40) enter image description here

enter image description here

Thanks in advanced

D34thSt4lker
  • 447
  • 1
  • 5
  • 12
  • I'd suggest to only use the image with the character and the grey circle (its background), and do the jauge yourself. They are plenty of question about UIBezierPath, Jauge, etc. That part should be done "manually" (by coding I mean, not with images, except if you only have a few). – Larme Mar 14 '16 at 16:49

1 Answers1

0

The way I would do this is to create two images. Filled and unfilled.

Then create two image views. Fix the size so they are the same size. And in the same position. The unfilled one underneath and the filled one on top. When you run this it should look like only the filled one is on the screen.

Now create a CALayer and set it as the mask of the filledImageView.layer.

When you change the frame of this layer it will only show what is inside that frame. So it will hide part of the filledImageView and you will see the unfilledImageView underneath.

So, if your imageView has a frame of (100, 100, 100, 100) origin 100, 100, size 100, 100. The the mask layer frame should be (0, 0, 100, 100) for the full image. This is because the origin is relative to the image view.

For an empty image it should be (0, 100, 100, 0).

For x% the frame of the mask layer should be (0, x-100, 100, 100-x)

EDIT

You should have two image views...

filledImageView unFilledImageView

These are setup correctly. Do not change the frames of these. Nor the layers of these.

You should create a layer and add it as a mask of the filledImageView.

self.maskLayer = [CALayer layer];
self.filledImageView.layer.mask = self.maskLayer;

Now have a function that updates the mask...

- (void)changeFilledImage:(CGFloat)percentage {
    // percentage is from 0.0 to 1.0

    CGFloat fullHeight = CGRectGetHeight(self.filledImageView.frame);
    CGFloat width = CGRectGetWidth(self.filledImageView.frame);
    CGFloat percentageHeight = fullHeight * percentage;

    self.maskLayer.frame = CGRectMake(0, fullHeight - percentageHeight, width, percentageHeight);
}

Something like this should do.

Community
  • 1
  • 1
Fogmeister
  • 76,236
  • 42
  • 207
  • 306
  • Right. This is what I was trying to do. Couldn't figure out the proper method. At the moment I have the unfilled and filled at the same position, just need to try your method for the layer. – D34thSt4lker Mar 14 '16 at 16:54
  • I will edit my question with new code that I am trying to use that isnt exactly coming out correctly – D34thSt4lker Mar 14 '16 at 17:14
  • @D34thSt4lker also, don't use maskImage. Just use UIImageViews to display the images. – Fogmeister Mar 14 '16 at 17:51
  • Hmm I am doing exactly what you are saying. but the filled image does not seem to do anything when running this function. I do have unfilled image AND filled image in the same position and same width/height and nothing happens to the filled image when i change the percentage – D34thSt4lker Mar 14 '16 at 17:56
  • @D34thSt4lker can you show your updated code. Your code that you put in your answer is not what I'm saying :) – Fogmeister Mar 14 '16 at 17:57
  • `- (void)fillTurtle { CALayer *maskLayer = [CALayer layer]; self.filledTurtlePic.layer.mask = maskLayer; // percentage is from 0.0 to 1.0 CGFloat fullHeight = CGRectGetHeight(self.filledTurtlePic.frame); CGFloat width = CGRectGetWidth(self.filledTurtlePic.frame); CGFloat percentageHeight = fullHeight * 0.8; maskLayer.frame = CGRectMake(0, fullHeight - percentageHeight, width, percentageHeight); }` – D34thSt4lker Mar 14 '16 at 18:05
  • @D34thSt4lker can you create a gist with all the code in? Much easier to see whats happening with all of the code. – Fogmeister Mar 14 '16 at 18:09
  • I am having issues creating a repo with this but here is a sample project. https://www.dropbox.com/s/1foydnku69g15jy/image-testing.zip?dl=0 – D34thSt4lker Mar 14 '16 at 18:31
  • You can use gist.github.com and just past the code from the file in there. On my phone atmosphere can't download a project. – Fogmeister Mar 14 '16 at 18:32
  • Thank you. This is all the sample code. View just has a filled/unfilled image https://gist.github.com/D34thStalker/9b0a01c7a3d73ac8c30d – D34thSt4lker Mar 14 '16 at 18:34
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/106273/discussion-between-d34thst4lker-and-fogmeister). – D34thSt4lker Mar 14 '16 at 18:36