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

查看:135
本文介绍了使用贝塞尔路径为剪贴蒙版的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想知道是否有可能夹视图到贝塞尔路径。我的意思是,我希望能够看到该视图只在封闭的贝塞尔路径内的区域。这样做的原因是,我有一个不规则形状的轮廓,我想在造型上逐渐纯色从上到下填写。如果我可以让这个有一定的看法是唯一的路径中可见然后我可以简单地创建我想要的颜色一个UIView,然后更改它的框架的y坐标为我讨好,在造型上有效填充。如果任何人有关于如何实现这一点,将大大AP preciated更好的想法。备案形状的填充将匹配的用户手指的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.

更新(很长一段时间以后):

Update (a very long time later):

我想你的答案,抢,唯一不同的是它的伟大工程。我的目的是移动,而面膜停留在屏幕上的同一个地方被掩盖的观点。这是为了让我可以给被认为填补了掩码是的IM pression。问题是,与code我已经根据你的答案写的,当我移动视图面具移动它。据我所知,这是可以预料的,因为我所做的就是将其添加为视图的面具,让按理说,如果事情它绑在移动时,它会移动。我尝试添加面具作为上海华使其原地踏步的子层,但有很奇怪的结果。这里是我的code:

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.

在斯威夫特...

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

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆