Iphone UIbezierpath découpe d'image irrégulière

Question

Je crée un jeu de puzzle pour iPhone.

Ici, je dois recadrer l'image exactement comme l'image ci-dessous

Après avoir fait des recherches, j'ai découvert que la UIBezier Path est la meilleure pour recadrer l'image en formes irrégulières.

Mais je n'ai trouvé aucun code ou idée sur comment recadrer l'image comme celle ci-dessus.

Answer 1

Il faudra beaucoup d'essais et d'erreurs, j'ai fait ça rapidement juste pour vous donner une idée de comment créer des formes en utilisant des chemins de Bézier. Ci-dessous un exemple de code pour créer une forme carrée que j'ai rapidement créée

 UIBezierPath *aPath = [UIBezierPath bezierPath];

    // Définir le point de départ de la forme.
    [aPath moveToPoint:CGPointMake(50.0, 50.0)];
    // Dessiner les lignes.
    [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];

Si j'avais plus de temps, je pourrais créer l'image, mais j'ai fait ça rapidement car je n'ai pas beaucoup de temps. Ce n'est pas trop difficile à utiliser une fois que vous avez compris comment les points sont créés. Il vous faudra beaucoup d'essais et d'erreurs pour créer cette forme, mais utilisez le code que j'ai fourni comme base pour savoir comment créer des formes en utilisant des chemins de Bézier. Vous aurez besoin de créer beaucoup plus de points pour obtenir la forme que vous avez en tête.

Je recommanderais également de consulter le guide du développeur d'Apple pour créer des formes irrégulières

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

En particulier, consultez "Ajouter des courbes à votre chemin" pour comprendre comment créer des courbes et les ajouter à votre image. Vous en aurez besoin pour créer la forme de pièce de puzzle que vous essayez de créer

ÉDITER:

Essayez cette méthode

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

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

La méthode ci-dessus prendra un chemin de Bézier et une ImageView et appliquera ensuite le chemin de Bézier à cette imageView particulière. Il fera également le clipping. Cela nécessitera probablement beaucoup d'essais et d'erreurs pour obtenir la forme juste, la création de formes complexes peut parfois être difficile et frustrante.

Exemple rapide d'application de ce code

UIBezierPath *aPath = [UIBezierPath bezierPath];
    // Définir le point de départ de la forme.
    [aPath moveToPoint:CGPointMake(0.0, 0.0)];
    // Dessiner les lignes.
    [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];

J'ai rapidement créé un carré à partir de la partie supérieure gauche de l'image. Par exemple, si vous aviez une image carrée, vous pourriez boucler à travers la largeur et la hauteur de l'image, découper en carrés séparés en utilisant le code ci-dessus et les retourner individuellement. La création d'une pièce de puzzle est beaucoup plus compliquée, mais j'espère que cela vous aidera