web-dev-qa-db-ja.com

クリッピングマスクとしてベジェパスを使用

ビューをベジェパスにクリップできるかどうか疑問に思っています。つまり、閉じたベジェパス内の領域でのみビューを表示できるようにしたいのです。その理由は、不規則な形状の輪郭があり、上から下へ徐々に無地で塗りつぶしたいからです。特定のビューがパス内でのみ表示されるようにできる場合は、必要な色のUIViewを作成し、そのフレームのy座標を好きなように変更して、形状を効果的に埋めることができます。誰かがこれを実装する方法についてもっと良いアイデアを持っているなら、それは大歓迎です。レコードの場合、形状の塗りつぶしはユーザーの指のy値と一致するため、連続したアニメーションにすることはできません。ありがとう。

更新（非常に長い時間後）：

私はあなたの答えを試してみました、ロブ。私の意図は、マスクが画面上の同じ場所にある間に、マスクされているビューを移動することでした。これは、ビューによってマスクが「埋め尽くされている」ような印象を与えるためです。問題は、あなたの回答に基づいて私が作成したコードで、ビューを移動するとマスクも一緒に移動することです。私がやったことはそれをビューのマスクとして追加しただけなので、それが予想されることであると理解しています。マスクをスーパービューのサブレイヤーとして追加して、そのまま表示されるようにしましたが、非常に奇妙な結果になりました。これが私のコードです：

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;
}];

すでに助けてくれてありがとう。

iosobjective-canimationclipping
22
jeremyabannister

これは、ビューのレイヤーマスクをCAShapeLayerに設定することで簡単に行えます。

UIBezierPath *myClippingPath = ...

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

myView.layer.mask = mask;

まだ追加していない場合は、QuartzCoreフレームワークをターゲットに追加する必要があります。

Swift ...

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

Robのソリューションのほんの一例として、UIWebViewがUIViewと呼ばれるsmoothViewの-​​subviewとして存在します。 smoothViewはbezierPathWithRoundedRectを使用して、丸みを帯びた灰色の背景（右側の通知）を作成します。それはうまくいきます。

しかし、smoothViewに通常のクリップサブビューしかない場合は、次のようになります。

enter image description here

Robの言うことを行うと、smoothViewおよびすべてのサブビュー ...

enter image description here

素晴らしいもの。

3
Fattie