Image masquée à gratter pour la découvrir

MAGE · septembre 2009

J'avais envie d'ajouter une interaction sur une vue : Une vue serai cachée derrière un masque et il faudrait la gratter pour découvrir ce qu'elle contient.

Après plusieurs recherches je suis tombé sur ça
J'ai également essayé de comprendre le tuto de Philippe
Troisième piste évoquée sur les forums, celle de se baser sur le code exemple d'Apple GLPaint.

Pourtant, avec toutes ces pistes, je n'arrive pas vraiment à me lancer et je vous demande donc un peu d'aide pour les premières étapes.

Merci d'avance

Philippe49 · septembre 2009

Ma première idée serait de créer une image à chaque nouveau touch en l'agrandissant d'une tâche.

Essaye d'abord de construire une image avec :
UIGraphicsBeginImageContext();
UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

MAGE · septembre 2009

Merci.

Effectivement, ça à l'air de convenir. Je vais suivre ta piste.

Philippe49 · septembre 2009

Une autre idée serait de considérer le masque comme un ensemble de tuiles, et que le touch fait tomber quelques tuiles ... Si le nombre de tuiles est raisonnable, cela doit pouvoir marcher.

MAGE · septembre 2009

Bon, voici quelques nouvelles et je suis assez content du résultat avec ça :

UITouch *touch = [touches anyObject];<br />//maVue est la vue qui est à  gratter<br />CGPoint currentPoint = [touch locationInView:maVue];<br />UIGraphicsBeginImageContext(maVue.frame.size);<br />// cache est l&#39;image qui est au premier plan de ma vue est qui est grattée<br />[cache.image drawInRect:CGRectMake(0, 0, maVue.frame.size.width, maVue.frame.size.height)];<br />CGContextSetLineCap(UIGraphicsGetCurrentContext(),kCGImageAlphaPremultipliedLast);	CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 10);<br />CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 1, 0, 0, 10);<br />CGContextBeginPath(UIGraphicsGetCurrentContext());<br />CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);<br />CGContextClearRect (UIGraphicsGetCurrentContext(), CGRectMake(lastPoint.x, lastPoint.y, 40, 40)); <br />CGContextStrokePath(UIGraphicsGetCurrentContext());<br />cache.image = UIGraphicsGetImageFromCurrentImageContext();<br />UIGraphicsEndImageContext();<br />lastPoint = currentPoint;

J'aimerai bien changer le CGContextClearRect en quelque chose de rond, mais j'ai pas encore trouvé.

Draken · septembre 2009

Tu n'as pas une image du grattage à nous montrer, plutôt que des lignes de codes ?

MAGE · septembre 2009

Bien sûr, je peux même te faire une vidéo avec de la musique douce si tu veux

En fait je trouve l'image pas très parlante.

Mais je te mets image, vidéo et le projet Xcode... comme ça c'est complet (sans la musique douce;))

keekoo · avril 2011

Bonjour,

As-tu trouvé une solution au remplacement de la forme carrée de l'effacement (forme ronde par exemple) ?

merci d'avance

Keekoo

dans 1253772925:

Bon, voici quelques nouvelles et je suis assez content du résultat avec ça :

UITouch *touch = [touches anyObject];<br />//maVue est la vue qui est à  gratter<br />CGPoint currentPoint = [touch locationInView:maVue];<br />UIGraphicsBeginImageContext(maVue.frame.size);<br />// cache est l&#039;image qui est au premier plan de ma vue est qui est grattée<br />[cache.image drawInRect:CGRectMake(0, 0, maVue.frame.size.width, maVue.frame.size.height)];<br />CGContextSetLineCap(UIGraphicsGetCurrentContext(),kCGImageAlphaPremultipliedLast);	CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 10);<br />CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 1, 0, 0, 10);<br />CGContextBeginPath(UIGraphicsGetCurrentContext());<br />CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);<br />CGContextClearRect (UIGraphicsGetCurrentContext(), CGRectMake(lastPoint.x, lastPoint.y, 40, 40)); <br />CGContextStrokePath(UIGraphicsGetCurrentContext());<br />cache.image = UIGraphicsGetImageFromCurrentImageContext();<br />UIGraphicsEndImageContext();<br />lastPoint = currentPoint;

J'aimerai bien changer le CGContextClearRect en quelque chose de rond, mais j'ai pas encore trouvé.

Céroce · avril 2011

Essaie avec [tt]CGContextSetLineCap(context, kCGLineCapRound)[/tt].

MAGE · avril 2011

Rien de nouveau de mon côté... mais toujours intéressé à faire avancer le problème xd

Draken · avril 2011

J'ai bricolé un truc hier en faisant des essais avec le canal alpha et les modes de blending. Que penses-tu du rendu, Mage ?

Draken · avril 2011

L'image compléte :

Draken · avril 2011

Le masque de découpage n'est pas une primitive géométrique, mais une bitmap, ce qui permet d'avoir des "trous" de forme quelconque, en changeant l'image, sans toucher au code.

J'ai créé celui-ci en quelques instants en gribouillant avec l'outil "pinceau" de Gimp :

MAGE · avril 2011

... des "trous" de forme quelconque, en changeant l'image, sans toucher au code.

Et en français ça donne quoi ?

Mais oui, ça me semble tout à fait le but recherché

Draken · avril 2011

dans 1302196129:

... des "trous" de forme quelconque, en changeant l'image, sans toucher au code.

Et en français ça donne quoi ?

En français ça dit que le logiciel découpe des "trous" dans le masque suivant une forme, définie dans une image nommée masqueDecoupage.png. En modifiant cette image avec un logiciel graphique, on change l'allure du découpage. Par exemple, j'ai créé un nouveau masque avec une forme bien connue :

Draken · avril 2011

Résultat des courses :

J'améliore la présentation du iTruc et j'écris un tuto sur la manière de réaliser tout ça.

MAGE · avril 2011

Impatient.. Merci ::)

keekoo · avril 2011

Bonjour,

Voici ma solution pour avoir une gomme ronde.
la commande CGContextClearRect ne peut être que carrée (si j'ai bien compris). J'ai donc appliquée une rotation à ce carré ce qui revient à faire une forme ronde. ça doit être améliorable.

<br />- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {<br />&nbsp; &nbsp; [super touchesBegan:touches withEvent:event];<br />&nbsp; &nbsp; int tailleGomme = 50;<br />&nbsp; &nbsp; <br />&nbsp; &nbsp; UITouch *touch = [touches anyObject];<br />&nbsp; &nbsp; //maVue est la vue qui est à  gratter<br />&nbsp; &nbsp; CGPoint currentPoint = [touch locationInView:maVue];<br />&nbsp; &nbsp; lastPoint = currentPoint;// rajouté ici pour supprimer le carré à  gauche et en haut lors du chargement de la page et du premier clic<br />&nbsp; &nbsp; UIGraphicsBeginImageContext(maVue.frame.size);<br />&nbsp; &nbsp; // cache est l&#039;image qui est au premier plan de ma vue est qui est grattée<br />&nbsp; &nbsp; [cache.image drawInRect:CGRectMake(0, 0, maVue.frame.size.width, maVue.frame.size.height)];<br />&nbsp;  <br />&nbsp; &nbsp; <br />&nbsp; &nbsp; for (int i=0; i&lt;91; i++) {<br />&nbsp; &nbsp; &nbsp; &nbsp; CGContextTranslateCTM (UIGraphicsGetCurrentContext(), +lastPoint.x , +lastPoint.y);<br />&nbsp; &nbsp; &nbsp; &nbsp; CGContextRotateCTM (UIGraphicsGetCurrentContext(), i); //rotates around upper left corner of iPhone.<br />&nbsp; &nbsp; &nbsp; &nbsp; CGContextTranslateCTM (UIGraphicsGetCurrentContext(), -lastPoint.x , -lastPoint.y); <br />&nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; CGContextClearRect (UIGraphicsGetCurrentContext(), CGRectMake(lastPoint.x-tailleGomme/2, lastPoint.y-tailleGomme/2, tailleGomme, tailleGomme));//-tailleGomme/2 : rajouté pour effacer complétement le bord gauche <br />&nbsp; &nbsp; }<br />&nbsp; &nbsp; <br />&nbsp; &nbsp; cache.image = UIGraphicsGetImageFromCurrentImageContext();<br />&nbsp; &nbsp; UIGraphicsEndImageContext();<br />&nbsp; &nbsp; lastPoint = currentPoint;<br />&nbsp; &nbsp; <br />&nbsp; &nbsp; <br />}<br />

maintenant il me reste à déterminer quelle est la surface de la vue qui est effacée pour finaliser l'effacement sans devoir passer le doigt sur tout l'écran.

Draken · avril 2011

Il y a plus simple, en utilisant la méthode CGContextFillEllipseInRect pour dessiner une ellipse.

<br />CGContextFillEllipseInRect<br />Paints the area of the ellipse that fits inside the provided rectangle, using the fill color in the current graphics state.<br /><br />void CGContextFillEllipseInRect (<br />&nbsp;  CGContextRef context,<br />&nbsp;  CGRect rect<br />);<br />

Elle dessine une ellipse pleine tenant dans les limites d'un rectangle.

CGRect monEllipse = CGRectMake(100, 100, 64, 64);<br /><br />CGContextFillEllipseInRect(UIGraphicsGetCurrentContext(), monEllipse);<br />

Si la hauteur et la largeur du rectangle de destination sont les mêmes, on obtient un cercle.

AliGator · avril 2011

dans 1302267459:

la commande CGContextClearRect ne peut être que carrée

C'est un peu pour ça qu'elle s'appelle "...Rect" !

keekoo · avril 2011

dans 1302270394:

dans 1302267459:

la commande CGContextClearRect ne peut être que carrée

C'est un peu pour ça qu'elle s'appelle "...Rect" !

oui, c'est pas faux ::)

laudema · avril 2011

dans 1302203561:

J'améliore la présentation du iTruc et j'écris un tuto sur la manière de réaliser tout ça.

Et avec les sous gagnés une tournée générale de Perrier citron ? ::)
Sinon j'ai trouvé ça très réussi ce que tu as fait moi qui n'aime pas trop m'aventurer dans les manipulations d'images...

Draken · avril 2011

Les sous, c'est pour payer le renouvellement de ma licence de développeur iPhone, le mois prochain ! ::)

Je m'y connais un peu en matière de manipulation d'images, c'est un prérequis pour la création de jeux vidéo, mon domaine de prédilection.

Draken · avril 2011

Désolé Mage, mais je n'ai pas le temps de terminer le super-tuto-de-la-mort-qui-tue expliquant la manière de réaliser des effets graphiques. Je te donne le code maintenant pour ne pas te faire attendre davantage.

Le code d'initialisation crée 2 UIIlageView et les places sur l'écran, l'une sur l'autre. Elles contiennent toutes les deux une image de 320x480 pixels, la taille de l'écran.

- (void)viewDidLoad {<br />&nbsp; &nbsp; [super viewDidLoad];<br />	<br />		UIImage *image = [UIImage imageNamed:@&quot;Sushis.jpg&quot;];	<br />		m_imageView = [[UIImageView alloc] initWithImage:image];<br />		[self.view addSubview:m_imageView];	<br />		[m_imageView release];<br />			<br />	&nbsp; &nbsp; &nbsp; &nbsp; UIImage *imageDuHaut = [UIImage imageNamed:@&quot;imageDuHaut.png&quot;];<br />	&nbsp; &nbsp; &nbsp; &nbsp; m_imageDuHautView = [[UIImageView alloc] initWithImage:imageDuHaut];<br />		[self.view addSubview:m_imageDuHautView];<br />		[m_imageDuHautView release];<br />	<br />}<br />

La méthode masquage: charge une petite image png, puis l'affiche sur l'écran à la position courante. Le dessin n'est pas réalisé de la manière classique, mais en passant par l'opérateur de Blending kCGBlendModeDestinationOut qui utilise une formule mathématique pour "fusionner" les couleurs des images de source et de destination, en tenant compte de la couche alpha de l'image source. Il y a différents opérateurs de Blending, avec des modes de fusion différents, donnant des effets très différents. Je m'étendrais davantage sur le sujet avec le tuto sur le Blending.

<br />- (void) masquage:(CGPoint)position<br />{ 		<br />	CGRect frameImage = m_imageDuHautView.frame;<br />	UIGraphicsBeginImageContext(frameImage.size);<br />	<br />	[m_imageDuHautView.image drawAtPoint:CGPointMake(0, 0)];<br />		<br />	UIImage *masque = [UIImage imageNamed:@&quot;masque_alpha.png&quot;];<br />	<br />	CGPoint monPoint = CGPointMake(position.x-masque.size.width/2,<br />						&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position.y-masque.size.height/2);<br />											<br />	[masque drawAtPoint:monPoint<br />					blendMode:kCGBlendModeDestinationOut<br />					alpha:1.0f];<br />										 <br />	m_imageDuHautView.image = UIGraphicsGetImageFromCurrentImageContext();<br />	UIGraphicsEndImageContext();<br />}<br />

Pour réaliser l'effet, il suffit d'appeler la méthode masquage: à chaque contact du doigt sur l'écran.

<br />- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {<br />	UITouch *aTouch = [touches anyObject];<br />	CGPoint currentPoint = [aTouch locationInView:self.view];	<br />	[self masquage:currentPoint];<br />}<br /><br /><br />- (void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{<br />	UITouch *aTouch = [touches anyObject];<br />	CGPoint currentPoint = [aTouch locationInView:self.view];<br />	[self masquage:currentPoint];<br />}	<br />

La couleur de la petite image de masquage n'a aucune importance. L'opérateur de Blending kCGBlendModeDestinationOut n'utilise que sa couche alpha pour ces calculs de "fusion graphique".

Draken · avril 2015

Nada

Image masquée à gratter pour la découvrir

Réponses