Bildmaske ohne transparenten Teil

Question

Ich habe das schon eine Weile untersucht. Ich bin Strecken eines UIImageView mit einem grauen Hintergrund der Menge der Schieber gegangen ist

Derzeit zu setzen

Ich versuche, ein graues Bild über eine Tasse.

-(void) sliderChanged:(CGFloat) value{ 
drinksView.grayArea.frame = CGRectMake(0 , -value ,372 ,value); 

Ich weiß, das ist sehr schmutzig, nicht das, was ich will ...

Was ich will, ist, dass der graue Teil nur den Teil abdeckt, in denen es eine Tasse (zB den Teil, wo das Bild ist nicht transparent). Das Bild der Tasse hat nur einen transparenten Hintergrund

Hat jemand eine Idee, wie dies zu erreichen? Ich bin ein Anfänger mit Masken und viele Tutorials haben mich nirgendwohin geführt und ich weiß nicht einmal, ob es möglich ist.

PS: einen Pfad um den Becher Zeichnung ist nicht möglich, da der Becher Bild zu einem Glas

Answer 1

Der einfachste Weg, ich denken kann, ist eine maskierte CALayer zu verwenden. Dies ist, was Sie tun müssen:

1. Statt eine UIImageView der Verwendung eines CALayer mit grauem Hintergrund als Overlay verwenden. Ihre sliderChanged: Methode würde unberührt bleiben, außer dass drinksView.grayArea eine Schicht anstelle einer Ansicht wäre.

2. Bis jetzt ist der Effekt genau der selbe wie vorher. Jetzt müssen Sie die Maske grayArea einstellen. Folgendes tun:

   CALayer * maskLayer = [CALayer new]; 
   maskLayer.contents = myCupImage.CGImage; 
   grayArea.mask = maskLayer; 
   

3. Ich denke, standardmäßig wird die Schicht den Inhalt strecken als die Skala geändert wird. Das wollen wir nicht. Sie können dies beheben, indem Sie die contentsGravity des Layers beispielsweise auf kCAGravityTop setzen.

Das sollte tun, was Sie wollen.

Ein Vorbehalt: Ich bin mir nicht ganz sicher, wie Masken mit sich ändernden Inhalt Schwerkraft fertig werden.Wenn Sie Fragen an dieser Front haben, können Sie es fest durch eine Behälterschicht Zugabe:

1. einen festen Rahmen für grayArea (gleich der Größe des Bechers Bild).

2. Statt grayArea direkt hinzuzufügen, eine Behälterschicht für sie vorstellen:

   CALayer * container = [CALayer new]; 
   container.masksToBounds = YES; 
   [container addSublayer:grayArea]; 
   [drinksView.layer addSublayer:container]; 
   

3. In Ihrem sliderChanged:, ändern Sie den Rahmen von container anstelle des grayArea.

Ich hoffe, das funktioniert.

Answer 2

Zunächst einmal ändern können müssen Sie mit dieser Methode

// masks the item based on the MaskImage 
- (UIImage*) itemMask : (UIImage*)image withMask:(UIImage*)maskImage 
{ 
    UIImage* afterMasking = nil; 

    CGImageRef maskRef = maskImage.CGImage; 

    CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef), CGImageGetHeight(maskRef), CGImageGetBitsPerComponent(maskRef), CGImageGetBitsPerPixel(maskRef), CGImageGetBytesPerRow(maskRef), CGImageGetDataProvider(maskRef), NULL, false); 

    CGImageRef masked = CGImageCreateWithMask([image CGImage], mask); 
    CFRelease(mask); 
    afterMasking = [UIImage imageWithCGImage:masked]; 
    CFRelease(masked); 
    return afterMasking; 
} 

vertraut Was das tut ist, dass Sie es Ihre Tasse Bild und die Maske Bild zusammen füttern und es wird Ihre Tasse Bild maskieren. Es wird nur Ihre Tasse Bild und nichts darunter maskieren, so dass Sie sich keine Sorgen machen müssen.

Das Problem, das Sie haben, ist, dass die graue Box die Größe ändert. Wie ich das angehen würde, ist das Beschneiden der Maske entsprechend dem Schiebereglerwert. Also mach eine Blackbox und ändere die Größe, wie du es mit dem grauenBG machst, BEVOR du es durch die Methode fütterst. Das sollte schnell geschehen, also werde ich nicht näher darauf eingehen, aber am Ende wirst du so etwas haben. Verzeiht die Hälfte erarbeitet Grafiken

Answer 3

drinksView.grayLayer = [CALayer new]; 
    drinksView.grayLayer.frame = CGRectMake(0, 0, 372, 0); 
    drinksView.grayLayer.contentsGravity = kCAGravityTop; 

    CALayer * topLayer = [CALayer new]; 
    topLayer.frame = CGRectMake(0, 0, 372, 367); 
    UIImage * grayImage = [UIImage imageNamed:@"grayDrink.png"]; 
    topLayer.contents = (id) grayImage.CGImage; 

    CALayer * maskLayer = [CALayer new]; 
    maskLayer.contents = (id)cupImage.CGImage; 
    maskLayer.masksToBounds = YES; 

    maskLayer.bounds = CGRectMake(0, 0, 372, 367); 
    maskLayer.position = CGPointMake(186,184); 

    [topLayer setMask:maskLayer]; 
    [drinksView.grayLayer addSublayer:topLayer]; 
    [drinksView.grayLayer setMasksToBounds:YES]; 
    [[drinksView layer]addSublayer:drinksView.grayLayer];