Effet ombre interne sur UIView couche?

Pour quelqu'un d'autre en se demandant comment dessiner une ombre interne à l'aide de Graphiques de Base comme par Costique suggestion, alors c'est comment: (sur iOS ajuster au besoin)

Dans votre drawRect: méthode...

CGRect bounds = [self bounds];
CGContextRef context = UIGraphicsGetCurrentContext();
CGFloat radius = 0.5f * CGRectGetHeight(bounds);
//Create the "visible" path, which will be the shape that gets the inner shadow
//In this case it's just a rounded rect, but could be as complex as your want
CGMutablePathRef visiblePath = CGPathCreateMutable();
CGRect innerRect = CGRectInset(bounds, radius, radius);
CGPathMoveToPoint(visiblePath, NULL, innerRect.origin.x, bounds.origin.y);
CGPathAddLineToPoint(visiblePath, NULL, innerRect.origin.x + innerRect.size.width, bounds.origin.y);
CGPathAddArcToPoint(visiblePath, NULL, bounds.origin.x + bounds.size.width, bounds.origin.y, bounds.origin.x + bounds.size.width, innerRect.origin.y, radius);
CGPathAddLineToPoint(visiblePath, NULL, bounds.origin.x + bounds.size.width, innerRect.origin.y + innerRect.size.height);
CGPathAddArcToPoint(visiblePath, NULL,  bounds.origin.x + bounds.size.width, bounds.origin.y + bounds.size.height, innerRect.origin.x + innerRect.size.width, bounds.origin.y + bounds.size.height, radius);
CGPathAddLineToPoint(visiblePath, NULL, innerRect.origin.x, bounds.origin.y + bounds.size.height);
CGPathAddArcToPoint(visiblePath, NULL,  bounds.origin.x, bounds.origin.y + bounds.size.height, bounds.origin.x, innerRect.origin.y + innerRect.size.height, radius);
CGPathAddLineToPoint(visiblePath, NULL, bounds.origin.x, innerRect.origin.y);
CGPathAddArcToPoint(visiblePath, NULL,  bounds.origin.x, bounds.origin.y, innerRect.origin.x, bounds.origin.y, radius);
CGPathCloseSubpath(visiblePath);
//Fill this path
UIColor *aColor = [UIColor redColor];
[aColor setFill];
CGContextAddPath(context, visiblePath);
CGContextFillPath(context);
//Now create a larger rectangle, which we're going to subtract the visible path from
//and apply a shadow
CGMutablePathRef path = CGPathCreateMutable();
//(when drawing the shadow for a path whichs bounding box is not known pass "CGPathGetPathBoundingBox(visiblePath)" instead of "bounds" in the following line:)
//-42 cuould just be any offset > 0
CGPathAddRect(path, NULL, CGRectInset(bounds, -42, -42));
//Add the visible path (so that it gets subtracted for the shadow)
CGPathAddPath(path, NULL, visiblePath);
CGPathCloseSubpath(path);
//Add the visible paths as the clipping path to the context
CGContextAddPath(context, visiblePath); 
CGContextClip(context);         
//Now setup the shadow properties on the context
aColor = [UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:0.5f];
CGContextSaveGState(context);
CGContextSetShadowWithColor(context, CGSizeMake(0.0f, 1.0f), 3.0f, [aColor CGColor]);   
//Now fill the rectangle, so the shadow gets drawn
[aColor setFill];   
CGContextSaveGState(context);   
CGContextAddPath(context, path);
CGContextEOFillPath(context);
//Release the paths
CGPathRelease(path);    
CGPathRelease(visiblePath);

Donc, il y a essentiellement les étapes suivantes:

1. Créer votre chemin
2. Définir la couleur de remplissage que vous voulez, ajoutez le chemin d'accès au contexte, et de remplir le contexte
3. Maintenant créer un grand rectangle qui peuvent lié visible de chemin. Avant la fermeture de ce chemin, ajoutez le visible de chemin. Puis fermer le chemin, de sorte que vous créez une forme avec le visible chemin soustrait de il. Vous pourriez vouloir étudier les méthodes de remplissage (enroulement non nul de pair/impair) en fonction de la façon dont vous avez créé ces chemins. En substance, pour obtenir les sous-chemins de "soustraire" lorsque vous ajoutez-les ensemble, vous avez besoin de dessiner ou plutôt de les construire) dans des directions opposées, l'une dans le sens horaire et anti-horaire.
4. Ensuite, vous devez définir votre visible de chemin que le chemin de détourage sur le contexte, de sorte que vous n'avez pas dessiner quoi que ce soit de l'extérieur à l'écran.
5. Puis l'installation de l'ombre sur le contexte, qui comprend le décalage, le flou et la couleur.
6. Puis remplir la grande forme avec le trou. La couleur n'a pas d'importance, parce que si vous avez tout fait correctement, vous ne verrez pas cette couleur, juste l'ombre.

OriginalL'auteur Daniel Thorpe

Il est possible de dessiner une ombre interne avec des Graphiques de Base en faisant un grand rectangle tracé à l'extérieur des limites, en soustrayant les limites de la taille d'un rectangle de chemin d'accès et le remplissage de la trajectoire résultante avec un "normal" de l'ombre.

Cependant, puisque vous avez besoin de le combiner avec un calque de dégradé, je pense qu'une solution plus simple est de créer un 9-partie image au format PNG transparent de l'intérieur de l'ombre et de l'étirer à la bonne taille. Les 9-la part d'ombre de l'image devrait ressembler à ceci (sa taille est de 21x21 pixels):

CALayer *innerShadowLayer = [CALayer layer];
innerShadowLayer.contents = (id)[UIImage imageNamed: @"innershadow.png"].CGImage;
innerShadowLayer.contentsCenter = CGRectMake(10.0f/21.0f, 10.0f/21.0f, 1.0f/21.0f, 1.0f/21.0f);

Puis définissez innerShadowLayer du cadre et il devrait s'étirer l'ombre correctement.

OriginalL'auteur Costique

Peu d'un rond-point, mais il évite d'avoir à utiliser des images (lire: facile de changer les couleurs, l'ombre de rayon, etc.) et c'est seulement quelques lignes de code.

1. Ajouter une UIImageView que le premier sous-vue de la UIView vous voulez le dropshadow sur. J'utilise de l'IB, mais vous pouvez faire la même programmation.

2. En supposant que la référence à la UIImageView est "innerShadow'

`

[[innerShadow layer] setMasksToBounds:YES];
[[innerShadow layer] setCornerRadius:12.0f];        
[[innerShadow layer] setBorderColor:[UIColorFromRGB(180, 180, 180) CGColor]];
[[innerShadow layer] setBorderWidth:1.0f];
[[innerShadow layer] setShadowColor:[UIColorFromRGB(0, 0, 0) CGColor]];
[[innerShadow layer] setShadowOffset:CGSizeMake(0, 0)];
[[innerShadow layer] setShadowOpacity:1];
[[innerShadow layer] setShadowRadius:2.0];

Mise en garde: Vous devez avoir une frontière, ou bien l'ombre n'apparaît pas. [UIColor clearColor] ne fonctionne pas. Dans l'exemple, j'utilise une couleur différente, mais vous pouvez jouer avec ça pour l'obtenir de la même couleur que le début de l'ombre. 🙂

Voir bbrame de commentaire ci-dessous sur la UIColorFromRGB macro.

OriginalL'auteur jinglesthula

Au lieu de dessiner ombre interne par drawRect ou ajouter UIView à la Vue. Vous pouvez Ajouter directement des CALayer à la frontière, par exemple: si je veux intérieure effet d'ombre sur le UIView V en bas.

innerShadowOwnerLayer = [[CALayer alloc]init];
innerShadowOwnerLayer.frame = CGRectMake(0, V.frame.size.height+2, V.frame.size.width, 2);
innerShadowOwnerLayer.backgroundColor = [UIColor whiteColor].CGColor;
innerShadowOwnerLayer.shadowColor = [UIColor blackColor].CGColor;
innerShadowOwnerLayer.shadowOffset = CGSizeMake(0, 0);
innerShadowOwnerLayer.shadowRadius = 10.0;
innerShadowOwnerLayer.shadowOpacity = 0.7;
[V.layer addSubLayer:innerShadowOwnerLayer];

Cette ajouter un fond intérieur de l'ombre pour cible UIView

OriginalL'auteur Jerry Zhang

C'est votre solution, que j'ai exporté à partir de PaintCode :

-(void) drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
////Shadow Declarations
UIColor* shadow = UIColor.whiteColor;
CGSize shadowOffset = CGSizeMake(0, 0);
CGFloat shadowBlurRadius = 10;
////Rectangle Drawing
UIBezierPath* rectanglePath = [UIBezierPath bezierPathWithRect: self.bounds];
[[UIColor blackColor] setFill];
[rectanglePath fill];
//////Rectangle Inner Shadow
CGContextSaveGState(context);
UIRectClip(rectanglePath.bounds);
CGContextSetShadowWithColor(context, CGSizeZero, 0, NULL);
CGContextSetAlpha(context, CGColorGetAlpha([shadow CGColor]));
CGContextBeginTransparencyLayer(context, NULL);
{
UIColor* opaqueShadow = [shadow colorWithAlphaComponent: 1];
CGContextSetShadowWithColor(context, shadowOffset, shadowBlurRadius, [opaqueShadow CGColor]);
CGContextSetBlendMode(context, kCGBlendModeSourceOut);
CGContextBeginTransparencyLayer(context, NULL);
[opaqueShadow setFill];
[rectanglePath fill];
CGContextEndTransparencyLayer(context);
}
CGContextEndTransparencyLayer(context);
CGContextRestoreGState(context);
}

OriginalL'auteur Dmitriy Kirakosyan

Vérifier l'excellent article de Intérieure Ombres dans le Quartz par Chris Emery qui explique comment l'intérieur ombres sont attirés par PaintCode et donne un environnement propre et soigné, extrait de code:

- (void)drawInnerShadowInContext:(CGContextRef)context
withPath:(CGPathRef)path
shadowColor:(CGColorRef)shadowColor
offset:(CGSize)offset
blurRadius:(CGFloat)blurRadius 
{
CGContextSaveGState(context);
CGContextAddPath(context, path);
CGContextClip(context);
CGColorRef opaqueShadowColor = CGColorCreateCopyWithAlpha(shadowColor, 1.0);
CGContextSetAlpha(context, CGColorGetAlpha(shadowColor));
CGContextBeginTransparencyLayer(context, NULL);
CGContextSetShadowWithColor(context, offset, blurRadius, opaqueShadowColor);
CGContextSetBlendMode(context, kCGBlendModeSourceOut);
CGContextSetFillColorWithColor(context, opaqueShadowColor);
CGContextAddPath(context, path);
CGContextFillPath(context);
CGContextEndTransparencyLayer(context);
CGContextRestoreGState(context);
CGColorRelease(opaqueShadowColor);
}

OriginalL'auteur voiger

Il y a un peu de code ici qui peut le faire pour vous. Si vous changez la couche de votre point de vue (en remplaçant + (Class)layerClass), à JTAInnerShadowLayer ensuite, vous pouvez définir l'ombre interne sur le retrait de la couche dans votre méthode init et il fera le travail pour vous. Si vous aussi vous souhaitez dessiner le contenu original, assurez-vous que vous appelez setDrawOriginalImage:yes sur le retrait de la couche. Il y a un post de blog sur comment cela fonctionne ici.

OriginalL'auteur James Snook

ce code a fonctionné pour moi

class InnerDropShadowView: UIView {
override func draw(_ rect: CGRect) {
//Drawing code
        let context = UIGraphicsGetCurrentContext()
////Shadow Declarations
        let shadow: UIColor? = UIColor.init(hexString: "a3a3a3", alpha: 1.0) //UIColor.black.withAlphaComponent(0.6) //UIColor.init(hexString: "d7d7da", alpha: 1.0)
        let shadowOffset = CGSize(width: 0, height: 0)
let shadowBlurRadius: CGFloat = 7.5
////Rectangle Drawing
        let rectanglePath = UIBezierPath(rect: bounds)
UIColor.groupTableViewBackground.setFill()
rectanglePath.fill()
//////Rectangle Inner Shadow
        context?.saveGState()
UIRectClip(rectanglePath.bounds)
context?.setShadow(offset: CGSize.zero, blur: 0, color: nil)
context?.setAlpha((shadow?.cgColor.alpha)!)
context?.beginTransparencyLayer(auxiliaryInfo: nil)
do {
let opaqueShadow: UIColor? = shadow?.withAlphaComponent(1)
context?.setShadow(offset: shadowOffset, blur: shadowBlurRadius, color: opaqueShadow?.cgColor)
context!.setBlendMode(.sourceOut)
context?.beginTransparencyLayer(auxiliaryInfo: nil)
opaqueShadow?.setFill()
rectanglePath.fill()
context!.endTransparencyLayer()
}
context!.endTransparencyLayer()
context?.restoreGState()
}
}

OriginalL'auteur Antony Raphel