CAShapeLayer作为CALayer的面具:圆角被拉伸

时间:2011-10-21 19:15:53

标签: objective-c core-animation core-graphics

我想用CALayer屏蔽CAShapeLayer,因为形状的更改可以设置动画。

当我使用CAShapeLayer作为遮罩时,圆角会被拉伸。但是,如果我采用相同的形状,使用它创建NSImage,并使用图像来遮盖我的CALayer,圆角完全没问题。

Rounded corners with NSImage on the left, CAShapeLayer on the right

这是我用来掩盖图层的代码(你也可以下载整个example project):

CGColorRef backgroundColor = CGColorCreateGenericRGB(0.0, 0.0, 0.0, 1.0f);

[self.window.contentView setLayer:[CALayer layer]];
[self.window.contentView setWantsLayer:YES];
[[self.window.contentView layer] setFrame:[self.window.contentView frame]];


CALayer *imageBasedMaskLayer = [CALayer layer];
[imageBasedMaskLayer setContents:(id)[[self maskWithSize:NSMakeSize(50, 50)] CGImageForProposedRect:NULL context:nil hints:nil]];
[imageBasedMaskLayer setFrame:CGRectMake(0, 0, 50, 50)];

CALayer *layerWithImageBasedMaskLayer = [CALayer layer];
[layerWithImageBasedMaskLayer setBackgroundColor:backgroundColor];
[layerWithImageBasedMaskLayer setMask:imageBasedMaskLayer];


CAShapeLayer *shapeBasedMaskLayer = [CAShapeLayer layer];
CGPathRef maskShape = [self newMaskPathWithFrame:NSMakeRect(0, 0, 50, 50)];
[shapeBasedMaskLayer setPath:maskShape];
[shapeBasedMaskLayer setFillRule:kCAFillRuleEvenOdd];
CGPathRelease(maskShape);
[shapeBasedMaskLayer setFrame:CGRectMake(0, 0, 50, 50)];

CALayer *layerWithShapeBasedMaskLayer = [CALayer layer];
[layerWithShapeBasedMaskLayer setBackgroundColor:backgroundColor];
[layerWithShapeBasedMaskLayer setMask:nil];
[layerWithShapeBasedMaskLayer setMask:shapeBasedMaskLayer];


[layerWithImageBasedMaskLayer setFrame:CGRectMake(50, 50, 50, 50)];
[layerWithShapeBasedMaskLayer setFrame:CGRectMake(120, 50, 50, 50)];
[[self.window.contentView layer] addSublayer:layerWithImageBasedMaskLayer];
[[self.window.contentView layer] addSublayer:layerWithShapeBasedMaskLayer];

CGColorRelease(backgroundColor);

我用来创建NSImageCGPathRef的两种方法。

- (NSImage *)maskWithSize:(CGSize)size;
{
    NSImage *maskImage = [[NSImage alloc] initWithSize:size];

    [maskImage lockFocus];
    [[NSColor blackColor] setFill];

    CGPathRef mask = [self newMaskPathWithFrame:CGRectMake(0, 0, size.width, size.height)];
    CGContextRef context = [[NSGraphicsContext currentContext] graphicsPort];
    CGContextAddPath(context, mask);
    CGContextFillPath(context);
    CGPathRelease(mask);

    [maskImage unlockFocus];

    return [maskImage autorelease];
}

- (CGPathRef)newMaskPathWithFrame:(CGRect)frame; 
{
    CGFloat cornerRadius = 3;

    CGFloat height = CGRectGetMaxY(frame);
    CGFloat width = CGRectGetMaxX(frame);

    CGMutablePathRef maskPath = CGPathCreateMutable();

    CGPathMoveToPoint(maskPath, NULL, 0, height-cornerRadius);
    CGPathAddArcToPoint(maskPath, NULL, 0, height, cornerRadius, height, cornerRadius);
    CGPathAddLineToPoint(maskPath, NULL, width-cornerRadius, height);
    CGPathAddArcToPoint(maskPath, NULL, width, height, width, height-cornerRadius, cornerRadius);
    CGPathAddLineToPoint(maskPath, NULL, width, cornerRadius);
    CGPathAddArcToPoint(maskPath, NULL, width, 0, width-cornerRadius, 0, cornerRadius);
    CGPathAddLineToPoint(maskPath, NULL, cornerRadius, 0);
    CGPathAddArcToPoint(maskPath, NULL, 0, 0, 0, cornerRadius, cornerRadius);

    CGPathCloseSubpath(maskPath);

    return maskPath;
}

请注意,我想要创建的实际蒙版比圆角矩形更复杂,否则我会使用一些更简单的绘图技术。我尝试了各种CGPath绘图功能,问题并没有消失。

我在这里缺少什么?

1 个答案:

答案 0 :(得分:2)

多数民众赞成因为CAShapeLayer有利于速度超过准确性。这就是为什么它有时可能会关闭。

  

将绘制抗锯齿形状,并在可能的情况下将其映射到屏幕空间,然后进行栅格化以保持分辨率独立性。但是,应用于图层或其祖先的某些图像处理操作(如CoreImage滤镜)可能会强制在局部坐标空间中进行光栅化。

     

注意:形状光栅化可能有利于速度超过准确性。例如,具有多个相交路径段的像素可能无法给出精确结果。

http://developer.apple.com/library/Mac/#documentation/GraphicsImaging/Reference/CAShapeLayer_class/Reference/Reference.html

解决方案

您可以使用

layerWithShapeBasedMaskLayer.cornerRadius = 3.0;

围绕你的所有角落。您不再需要CAShapeLayer了。您甚至可以继续使用CAShapeLayer作为动画路径的子图层。只需设置

layerWithShapeBasedMaskLayer.masksToBounds = YES;