CALayer面具周围的边框[关闭](Borders around a CALayer mask [closed])

CALayer面具周围的边框[关闭](Borders around a CALayer mask [closed])

我将开始向您展示我需要最终产品的样子。

我正在使用称为BAFluidView的cocoapod，它基本上模拟了容器中流体的运动。 开发人员提供了一个指南 （请参阅“用作图层”部分），以显示如何将遮罩添加到fluidView的图层以获得特效。

到目前为止，我可以用添加到项目中的任何UIImage来掩盖fluiview。 不过，我正面临一个问题，试图在水滴轮廓周围添加一个白色边框，并可以使用我可以获得的任何帮助。

非常感谢！

I'll start off showing you what I need the end product to look like.

I'm using a cocoapod called BAFluidView that basically simulates the motion of fluid in a container. The developer provided a guide(see the "Use As a Layer" section) showing how you could add a mask to the fluidView's layer for an effect.

So far, I can mask the fluiview with any UIImage I add to the project. I am, however, facing a problem trying to add a white border around the outline of the water droplet and could use any help I can get.

Thanks very much!

最满意答案

这就是我所说的“蛮力”方法。 创建一个图像用作蒙版，并创建第二个图像用作轮廓。

注意：这些图像具有alpha通道，所以除非您下载它们，否则可能不清楚。 棋盘图像显示了它们在GIMP中的外观。

遮罩图像（我从BAFluidView示例中获取）：

-

白色的轮廓图像（相信我，它在这里......只需点击下面）：

-

和代码：

- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. // load mask and outline UIImage *maskingImage = [UIImage imageNamed:@"blueDrop"]; UIImage *outlineImage = [UIImage imageNamed:@"whiteOutlineThin"]; // define rect equal to size of mask image CGRect rfv = CGRectMake(0, 0, maskingImage.size.width, maskingImage.size.height); // instantiate BAFluidView BAFluidView *fluidView = [[BAFluidView alloc] initWithFrame:rfv startElevation:@0.3]; fluidView.fillColor = [UIColor colorWithHex:0x092eee]; [fluidView fillTo:@0.90]; [fluidView startAnimation]; // if you want the "droplet" filled with a color // fluidView.backgroundColor = [UIColor yellowColor]; // instantiate a couple CALayer objects CALayer *maskingLayer = [CALayer layer]; CALayer *outlineLayer = [CALayer layer]; // set size to match mask maskingLayer.frame = rfv; outlineLayer.frame = rfv; // set mask layer content to mask image [maskingLayer setContents:(id)[maskingImage CGImage]]; // give the mask layer to BAFluidView [fluidView.layer setMask:maskingLayer]; // set outline layer content to outline image [outlineLayer setContents:(id)[outlineImage CGImage]]; // create a "container" view UIView *containerView = [[UIView alloc] initWithFrame:rfv]; // add the outline layer [containerView.layer addSublayer:outlineLayer]; // add the BAFluidView [containerView addSubview:fluidView]; // add the container view to the screen / main view [self.view addSubview:containerView]; // position the view with constraints... containerView.translatesAutoresizingMaskIntoConstraints = NO; [containerView.widthAnchor constraintEqualToConstant:rfv.size.width].active = YES; [containerView.heightAnchor constraintEqualToConstant:rfv.size.height].active = YES; [containerView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor].active = YES; [containerView.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor].active = YES; }

结果的屏幕截图：

通过使用Mask图像并通过代码实时生成轮廓，您可以自动完成该过程，并使该过程更“优雅”且更灵活 - 稍微缩放蒙版图像，然后用例如原始大小的图像。

This is what I would call the "brute force" method. Create an image to use as the mask and create a second image to use as the outline.

Note: these images have alpha channels, so it may not be clear unless/until you download them. The checkerboard images shows how they look in GIMP.

Mask Image (which I took from the BAFluidView example):

-

White outline image (trust me, it's here... just click below):

-

and the code:

- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. // load mask and outline UIImage *maskingImage = [UIImage imageNamed:@"blueDrop"]; UIImage *outlineImage = [UIImage imageNamed:@"whiteOutlineThin"]; // define rect equal to size of mask image CGRect rfv = CGRectMake(0, 0, maskingImage.size.width, maskingImage.size.height); // instantiate BAFluidView BAFluidView *fluidView = [[BAFluidView alloc] initWithFrame:rfv startElevation:@0.3]; fluidView.fillColor = [UIColor colorWithHex:0x092eee]; [fluidView fillTo:@0.90]; [fluidView startAnimation]; // if you want the "droplet" filled with a color // fluidView.backgroundColor = [UIColor yellowColor]; // instantiate a couple CALayer objects CALayer *maskingLayer = [CALayer layer]; CALayer *outlineLayer = [CALayer layer]; // set size to match mask maskingLayer.frame = rfv; outlineLayer.frame = rfv; // set mask layer content to mask image [maskingLayer setContents:(id)[maskingImage CGImage]]; // give the mask layer to BAFluidView [fluidView.layer setMask:maskingLayer]; // set outline layer content to outline image [outlineLayer setContents:(id)[outlineImage CGImage]]; // create a "container" view UIView *containerView = [[UIView alloc] initWithFrame:rfv]; // add the outline layer [containerView.layer addSublayer:outlineLayer]; // add the BAFluidView [containerView addSubview:fluidView]; // add the container view to the screen / main view [self.view addSubview:containerView]; // position the view with constraints... containerView.translatesAutoresizingMaskIntoConstraints = NO; [containerView.widthAnchor constraintEqualToConstant:rfv.size.width].active = YES; [containerView.heightAnchor constraintEqualToConstant:rfv.size.height].active = YES; [containerView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor].active = YES; [containerView.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor].active = YES; }

Screen-cap of the result:

You could automate it, and make the process a bit more "elegant" and flexible, by using just the Mask image and generating the outline on-the-fly via code - scale the mask image up by a little bit and then mask it with the original sized image, for example.