iphone - iphone UIbezierpath 不規則な画像トリミング

Question

iPhone向けのジグソーパズルゲームを作っています。

ここで、下の画像のように画像をトリミングする必要があります

グーグルで検索した後、uibezier パスが画像を不規則な形でトリミングするのに最適なパスであることがわかりました。

しかし、上記のように画像をトリミングする方法についてのコードやアイデアはありませんでした。

Answer 1

これには多くの試行錯誤が必要です。ベジエ パスを使用して形状を作成する方法を理解してもらうために、簡単にこれを行いました。以下は、私がすぐに作成した正方形を作成するコード例です

 UIBezierPath *aPath = [UIBezierPath bezierPath];

    // Set the starting point of the shape.
    [aPath moveToPoint:CGPointMake(50.0, 50.0)];
    // Draw the lines.
    [aPath addLineToPoint:CGPointMake(100.0, 50.0)];
    [aPath addLineToPoint:CGPointMake(100.0, 100.0)];
    [aPath addLineToPoint:CGPointMake(50.0, 100.0)];
    [aPath closePath];

    CAShapeLayer *square = [CAShapeLayer layer];
    square.path = aPath.CGPath;
    [self.view.layer addSublayer:square];

もっと時間があればイメージを作成できたのですが、時間があまりなかったので手早く作成しました。ポイントがどのように作成されるかを理解すれば、使用するのはそれほど難しくありません。この形状を作成するには多くの試行錯誤が必要ですが、ベジエ パスを使用して形状を作成する方法の基礎として提供したコードを使用してください。最終的に思い描いた形状になるには、さらに多くのポイントを作成する必要があります。

不規則な形状を作成するための Apples 開発者ガイドも参照することをお勧めします。

http://developer.apple.com/library/ios/#documentation/2ddrawing/conceptual/drawingprintingios/BezierPaths/BezierPaths.html

特に、曲線を作成して画像に追加する方法を理解するには、「パスに曲線を追加する」を参照してください。作成しようとしているジグソー パズルのピースの形状を作成するために必要になります。

編集：

この方法を試してください

- (void) setClippingPath:(UIBezierPath *)clippingPath : (UIImageView *)imgView;
{
    if (![[imgView layer] mask])
        [[imgView layer] setMask:[CAShapeLayer layer]];

    [(CAShapeLayer*) [[imgView layer] mask] setPath:[clippingPath CGPath]];
}

上記のメソッドは、ベジェ パスと ImageView を受け取り、ベジェ パスをその特定の imageView に適用します。クリッピングも行います。正しい形状を得るには多くの試行錯誤が必要になると思いますが、複雑な形状を作成するのは困難でイライラすることがあります。

このコードを適用する簡単な例

UIBezierPath *aPath = [UIBezierPath bezierPath];
    // Set the starting point of the shape.
    [aPath moveToPoint:CGPointMake(0.0, 0.0)];
    // Draw the lines.
    [aPath addLineToPoint:CGPointMake(50.0, 0.0)];
    [aPath addLineToPoint:CGPointMake(50.0, 50.0)];
    [aPath addLineToPoint:CGPointMake(0.0, 50.0)];
    [aPath closePath];

    UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"bar.png"]];
    imgView.frame = CGRectMake(0, 0, 100, 100);
    [self setClippingPath:aPath :imgView];
    [self.view addSubview:imgView];

画像の左上部分からすぐに四角形を作りました。たとえば、正方形の画像がある場合、画像の幅と高さをループし、上記のコードを使用して個別の正方形にトリミングし、それらを個別に返すことができます。ジグソーパズルのピースを作るのはもっと複雑ですが、これが役に立てば幸いです