使用贝塞尔路径作为剪贴蒙版 [英] Use Bezier Path as Clipping Mask

问题描述

我想知道是否可以将视图剪切到贝塞尔路径.我的意思是我希望只能在封闭的贝塞尔路径内的区域中看到视图.这样做的原因是我有一个不规则形状的轮廓，我想从上到下用纯色逐渐填充形状.如果我可以使某个视图仅在路径中可见，那么我可以简单地创建一个我想要的颜色的 UIView，然后根据需要更改其框架的 y 坐标，从而有效地填充形状.如果有人对如何实现这一点有更好的想法，我们将不胜感激.根据记录，形状的填充将匹配用户手指的 y 值，因此它不能是连续动画.谢谢.

I am wondering if it is possible to clip a view to a Bezier Path. What I mean is that I want to be able to see the view only in the region within the closed Bezier Path. The reason for this is that I have the outline of an irregular shape, and I want to fill in the shape gradually with a solid color from top to bottom. If I could make it so that a certain view is only visible within the path then I could simply create a UIView of the color I want and then change the y coordinate of its frame as I please, effectively filling in the shape. If anyone has any better ideas for how to implement this that would be greatly appreciated. For the record the filling of the shape will match the y value of the users finger, so it can't be a continuous animation. Thanks.

更新(很久以后):

我尝试了你的回答，Rob，除了一件事之外，它效果很好.我的目的是移动被遮罩的视图，而遮罩仍保留在屏幕上的同一位置.这样我就可以给人一种视图填满"面具的印象.问题是，根据我根据您的回答编写的代码，当我移动视图时，蒙版也随之移动.我知道这是可以预料的，因为我所做的只是将它添加为视图的掩码，因此如果与它相关联的东西移动，它就会移动.我尝试将蒙版添加为超级视图的子层，以便它保持原状，但这产生了非常奇怪的结果.这是我的代码:

I tried your answer, Rob, and it works great except for one thing. My intention was to move the view being masked while the mask remains in the same place on screen. This is so that I can give the impression of the mask being "filled up" by the view. The problem is that with the code I have written based on your answer, when I move the view the mask moves with it. I understand that that is to be expected because all I did was add it as the mask of the view so it stands to reason that it will move if the thing it's tied to moves. I tried adding the mask as a sublayer of the superview so that it stays put, but that had very weird results. Here is my code:

self.test = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
self.test.backgroundColor = [UIColor greenColor];

[self.view addSubview:self.test];

UIBezierPath *myClippingPath = [UIBezierPath bezierPath];
[myClippingPath moveToPoint:CGPointMake(100, 100)];
[myClippingPath addCurveToPoint:CGPointMake(200, 200) controlPoint1:CGPointMake(self.screenWidth, 0) controlPoint2:CGPointMake(self.screenWidth, 50)];
[myClippingPath closePath];


CAShapeLayer *mask = [CAShapeLayer layer];
mask.path = myClippingPath.CGPath;

self.test.layer.mask = mask;

CGRect firstFrame = self.test.frame;
firstFrame.origin.x += 100;
[UIView animateWithDuration:3 animations:^{
    self.test.frame = firstFrame;
}];

已经感谢您的帮助.

推荐答案

您可以通过将视图的图层蒙版设置为 CAShapeLayer 来轻松完成此操作.

You can do this easily by setting your view's layer mask to a CAShapeLayer.

UIBezierPath *myClippingPath = ...

CAShapeLayer *mask = [CAShapeLayer layer];
mask.path = myClippingPath.CGPath;

myView.layer.mask = mask;

如果您还没有将 QuartzCore 框架添加到目标中，则需要.

You will need to add the QuartzCore framework to your target if you haven't already.

在 Swift 中......

In Swift ...

let yourCarefullyDrawnPath = UIBezierPath( .. blah blah
let maskForYourPath = CAShapeLayer()
maskForYourPath.path = carefullyRoundedBox.CGPath
layer.mask = maskForYourPath

这篇关于使用贝塞尔路径作为剪贴蒙版的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！