我将开始向您展示我需要最终产品的样子。
我正在使用称为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.
更多推荐
发布评论