gradient cut from top to bottom

This is a follow up question to – gradient direction from left to right

In this apple refection sample code,

  • UITableViewCell - Best place to set up the cell
  • Load app icon from xcassets
  • How To Clear A UIWebView
  • Core Data: Quickest way to delete all instances of an entity
  • iPhone X how to handle View Controller inputAccessoryView?
  • How to save data , in an iOS application?
  • Apple Reflection Example

    when the size slider is moved, the image is cut from bottom to top. How can I cut it from top to bottom when the slider is moved? I am trying to understand this tutorial better

    //I know the code is in this section here but I can't figure out what to change
    - (UIImage *)reflectedImage:(UIImageView *)fromImage withHeight:(NSUInteger)height
        //it probably has something to do with this code. 
    //I think this tells it how much to cut. 
    //Though I can't figure out how does it know where the 0,0 of the image is and why 
    // keep 0,0 of the image on the top? I am assuming this is where it hinges its 
    //point and cuts the image from bottom to top
    CGContextRef MyCreateBitmapContext(int pixelsWide, int pixelsHigh)
        CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
        // create the bitmap context
        CGContextRef bitmapContext = CGBitmapContextCreate (NULL, pixelsWide, pixelsHigh, 8, 0, colorSpace,(kCGBitmapByteOrder32Little | kCGImageAlphaPremultipliedFirst));
        return bitmapContext;

    enter image description here

    What if the image to reflect was on the top. So in order to show it properly, I need to reveal it from top down, not bottom up. That;s the effect I am trying to achieve. In this case I just moved the UIImageViews around in their storyboard example. You now see my dilemma

    2 Solutions Collect From Internet About “gradient cut from top to bottom”

    it’s very similar to @Putz1103 answer. You should create a new method starting from the previous – (UIImage *)reflectedImage:(UIImageView *)fromImage withWidth:(NSUInteger)width.

    - (UIImage *)reflectedImage:(UIImageView *)fromImage withWidth:(NSUInteger)width andHeight:(NSUInteger)height
         CGContextClipToMask(mainViewContentContext, CGRectMake(0.0, 0.0, width, height), gradientMaskImage);

    Then in slideAction method, use something like:

    self.reflectionView.image = [self reflectedImage:self.imageView withWidth:self.imageView.bounds.size.width andHeight:reflectionHeight];

    Good luck!

    My guess would be this line:

    CGContextClipToMask(mainViewContentContext, CGRectMake(0.0, 0.0, fromImage.bounds.size.width, height), gradientMaskImage);

    If you change it to this it should do the opposite:

    CGContextClipToMask(mainViewContentContext, CGRectMake(0.0, fromImage.bounds.size.height - height, fromImage.bounds.size.width, height), gradientMaskImage);

    Basically you need to set the clipping rectangle to the bottom of the image instead of the top of the image. This will invert what your slider does, but that is easy to resolve and I’ll leave that for your exercise.