Application de peinture sur l'iPhone

Ma123 · avril 2011

Salut,

J'ai besoin de développer une application de peinture dans l'iPhone.

Je veux peindre une image en cliquant sur une couleur et, si je clique dans une partie d'une image, la partie serait rempli de la couleur particulière.

Quelqu'un peut-il me proposer la solution?

Céroce · avril 2011

Je peux le faire; tu disposes de quel budget ? 8--)

Plus sérieusement, s'agit-til d'une image bitmap ou vectorielle ? La réponse sera très différente (le 2nd cas est bien plus simple).

Ma123 · avril 2011

il s'agit d'une image .jpg

Draken · avril 2011

En gros, tu veux faire une application similaire à un "dessin à remplir" pour enfants ? Par exemple un Bambi jeune cerf regardant une fleur, le tout dessiné uniquement avec des traits.

EDIT : le jpg c'est le mal pour un travail graphique précis ! Le png c'est mieux.

Peux-tu nous montrer une image d'exemple ?

Céroce · avril 2011

@Draken: et même qu'on appelle ça un coloriage

Uniquement pour simplifier les explications, je considère que les traits sont noirs sur fond blanc:

- ouvrir l'image dans une bitmap (CGBitmapContext)
- déterminer les coordonnées du point du toucher
- convertir ces coordonnées en coordonnées dans la bitmap
- à partir de ce point, remplir avec la couleur choisie tous les pixels blancs jusqu'à rencontrer des pixels noirs. Core Graphics n'a pas de fonction pour ça à ma connaissance. Il va donc falloir accéder directement aux pixels en tapant dans mémoire (pointeurs et autres joies).

Le problème, c'est que si les traits noirs sont lissés (anti-aliasés), ce qui est nécessaire pour que ça fasse propre, le remplissage n'ira pas jusqu'au bord: on verra un filet blanc disgracieux. Une méthode peut être de remplir deux pixels plus loin, puis utiliser l'image de départ pour redessiner par dessus... j'ai dit que ce n'était pas simple pour une image bitmap ?

Ma123 · avril 2011

Par exemple J'ai veux développer une application comme coloring Book.

Céroce · avril 2011

Je suis sûr qu'ils travaillent en vectoriel.

Ma123 · avril 2011

@Céroce:
Merci pour votre explication
Je cherche un exemple (code source) pour commencer mon projet.
Merci d'avance

Draken · avril 2011

Dans le style de "Coloriages pour Enfants HD" ?

Ma123 · avril 2011

@Draken:
oui dans ce style

AliGator · avril 2011

Qu'est ce que cette question faisait dans la partie "iOS: developer programs, déploiement, devices..." ???
Merci de faire attention où vous postez vos questions, c'est la moindre des règles à respecter

(On passe de plus en plus de temps à modérer et déplacer les sujets ces derniers temps ça devient lassant)

Ma123 · avril 2011

@Draken et @Céroce :
aidez moi d'avoir un petit code source qui facilite un peut mon tache.

muqaddar · avril 2011

dans 1302800444:

@Draken et @Céroce :
aidez moi d'avoir un petit code source qui facilite un peut mon tache.

C'est pas un petit code source que tu veux, mais toute l'application!
En effet, tout ce qui est touché et tracé, c'est la partie la plus difficile à gérer pour ce genre d'application.

Demande plutôt des pistes sur les tracés par exemple, plutôt qu'un code source, pour savoir où chercher dans la doc. ;-)

Draken · avril 2011

Après avoir regardé la démo de Coloring Book je pense, comme Céroce, que cela doit être un affichage vectoriel. Les développeurs ont probablement programmés une petite application de dessin vectoriel pour générer les images, sur un iPhone ou un iPad.

muqaddar · avril 2011

Tu nous diras comment tu t'y prends et quelle voie tu choisis.

Ma123 · avril 2011

Bonjour,

je cherche un tutorial ,un exemple qui facilite ma tache.

Ma123 · avril 2011

Bonjour,

je cherche un tutorial ,un exemple qui facilite ma tache.

Ma123 · avril 2011

Bonjour,

je cherche un tutorial ,un exemple qui facilite ma tache.

muqaddar · avril 2011

Quelques tutorials ici (5 en tout):
http://www.invasivecode.com/blog/archives/date/2010/08

Ma123 · avril 2011

Merci

Draken · avril 2011

Le coloriage automatique d'une zone est complexe, à la différence d'un coloriage manuel. Est-ce qu'un système où l'utilisateur "colorie du doigt" suffit à tes besoins ? C'est simple à réaliser en quelques lignes de code.

Ma123 · avril 2011

Salut
@Draken
pour le moment je cherche a faire un coloriage a partir le doigt.

Draken · avril 2011

Ah ça change tout, c'est facile à faire. D'ailleurs je l'ai déjà fait dans le cadre d'une autre application. Je t'écrit un petit code d'exemple ce soir, quand j'aurais un peu de temps libre devant moi.

Draken · avril 2011

Un peu de théorie sur l'art et la manière de peindre sur un iDevice, pour toi Ma123.

Lance Xcode et crée une application avec le template "View-Based Application", et donne-lui le nom UneArdoise. Xcode génère 4 fichiers dont les principaux pour toi sont UneArdoiseViewController.h et UneArdoiseViewController.m. C'est là que tu vas créer le système de dessin.

Pour commencer tu as besoin d'une image-guide pour dessiner. A titre d'exemple, j'ai "emprunté" une image d'une application de coloriage. Attention c'est une infraction au droit d'auteur. J'ai honte de l'avoir fait, mais je n'avais pas le temps de préparer autre chose. A ne pas utiliser pour ton projet !

C'est une image png de 320x480 pixels.

Draken · avril 2011

Il faut ensuite charger et afficher cette image sur l'écran. Pour cela il faut utiliser un contrôle UIImageView.

Théoriquement, il faut passer par IBuilder pour créer ce contrôle. Je n'aime pas cette approche, préférant tout faire par le code. Pour moi la manière la plus simple pour créer le contrôle est de passer par la méthode viewDidLoad du fichier UneArdoiseViewController. Elle est appelée automatiquement par le système juste après la création de l'objet UneArdoiseViewController.

// Implement viewDidLoad to do additional setup <br />// after loading the view, typically from a nib.<br />- (void)viewDidLoad {<br />&nbsp; &nbsp; [super viewDidLoad];<br />		<br />&nbsp;  // CHARGEMENT DE L&#039;IMAGE<br />&nbsp;  UIImage *image = [UIImage imageNamed:@&quot;image_guide.png&quot;];<br />&nbsp;  <br />&nbsp;  // CREATION CONTROLE GRAPHIQUE UIImageView<br />&nbsp;  m_imageDessinView = [[UIImageView alloc] initWithImage:image];<br />&nbsp;  <br />&nbsp;  // AJOUT DU CONTROLE SUR LA VUE COURANTE<br />&nbsp;  [self.view addSubview:m_imageDessinView];<br />&nbsp; <br />&nbsp;  // RELEASE DU CONTROLE GRAPHIQUE<br />&nbsp;  [m_imageDessinView release];<br />	<br />}<br />

Je commence par utiliser un objet UIImage pour y charger l'image "image_guide.png".

// CHARGEMENT DE L&#039;IMAGE<br />UIImage *image = [UIImage imageNamed:@&quot;image_guide.png&quot;];

Ensuite, je crée un objet UIImageView en utilisant la méthode initWithImage. La taille du contrôle est ajustée automatiquement sur la taille de l'image.

// CREATION CONTROLE GRAPHIQUE UIImageView<br />m_imageDessinView = [[UIImageView alloc] initWithImage:image];

Je stocke le contrôle graphique dans la variable m_imageDessinView. C'est une variable accessible par toutes les méthodes de l'objet UneArdoiseViewController.m. Je l'ai déclaré dans le fichier UneArdoiseViewController.h.

Quand un contrôle graphique est créé avec IBuilder, il est connecté sur la vue courante qui s'occupe de l'affichage. Ce n'est pas le cas si le contrôle est créé dans le code. Il faut donc réaliser l'opération à la main. Pas compliqué :

// AJOUT DU CONTROLE SUR LA VUE COURANTE<br />[self.view addSubview:m_imageDessinView];

Pour finir je release le contrôle graphique. Cela peut paraà®tre étrange. Pourquoi détruire un objet que je viens juste de créer ? En fait, la vue principale du controleur (self.view) "retient" le contrôle graphique depuis qu'il lui a été associé avec la méthode addSubview. J en'ai pas besoin de retenir en mémoire deux fois le contrôle graphique, alors je le libère tout de suite. En conséquence, le contrôle graphique sera détruit automatiquement quand la vue self.view est détruite. Cela simplifie la gestion mémoire, un sujet toujours épineux avec Cocoa Touch.

// RELEASE DU CONTROLE GRAPHIQUE<br />[m_imageDessinView release];

Sans oublier la déclaration de m_imageDessinView dans le fichier .h. C'est indispensable pour que toutes les méthodes de UneArdoiseViewController puissent y accéder.

//<br />//&nbsp; UneArdoiseViewController.h<br />//&nbsp; UneArdoise<br />//<br /><br />#import &lt;UIKit/UIKit.h&gt;<br /><br />@interface UneArdoiseViewController : UIViewController {<br />	UIImageView *m_imageDessinView;<br />}<br /><br />@end

Ma123 · avril 2011

Bonjour cher Draken
Merci pour le tutorial.
mais ou est la partie de coloriage.

AliGator · avril 2011

Heu Draken si tu commences à expliquer les bases (car là il s'agit des bases de chez base de faire une application Cocoa, limite un peu après le Hello World), tu vas mettre des plombes à lui expliquer les techniques de painting et les algos de remplissage et CoreGraphics et les CGContext, t'es pas sorti de l'auberge !

- "Bonjour, je souhaiterai assembler ma propre voiture, mais je n'y connais rien en mécanique..."
- "Hum faudrait peut-être apprendre les rudiments de comment fonctionne un moteur, quels sont les différents constituants de la mécanique d'une voiture, les principe de base de la thermo, et commencer par juste faire un petit montage simple avant de faire direct une voiture, non ?"

Draken · avril 2011

Le reste arrive.. J'ai eu un break.

Ali, tu n'as pas un cours de Stupidité Artificielle à préparer pour ce soir ? Je voulais écrire un tuto sur le graphisme, et je m'exerce.

Eric P. · avril 2011

dans 1303392343:

Heu Draken si tu commences à expliquer les bases (car là il s'agit des bases de chez base de faire une application Cocoa, limite un peu après le Hello World), tu vas mettre des plombes à lui expliquer les techniques de painting et les algos de remplissage et CoreGraphics et les CGContext, t'es pas sorti de l'auberge !

- "Bonjour, je souhaiterai assembler ma propre voiture, mais je n'y connais rien en mécanique..."
- "Hum faudrait peut-être apprendre les rudiments de comment fonctionne un moteur, quels sont les différents constituants de la mécanique d'une voiture, les principe de base de la thermo, et commencer par juste faire un petit montage simple avant de faire direct une voiture, non ?"

D'où l'expression "mettre les mains dans le cambouis" ?!

Draken · avril 2011

Passons maintenant au coeur du problème : le coloriage d'une image. C'est un peu compliqué à faire, car iOS ne permet pas d'agir sur le contenu d'une image. Pour faire des gribouillages il faut utiliser un context graphique. C'est une sorte "d'ardoise magique" où Cocoa Touch peut réaliser différentes opérations graphiques (tracé de rectangles, de points, de lignes, de cercles, d'images, etc..).

Pour dessiner un cercle plein dans un context graphique, il faut utiliser la méthode CGContextFillEllipseInRect en lui communiquant les coordonnées du rectangle englobant le cercle. La méthode CGContextSetFillColorWithColor définit la couleur de dessin.

L'exemple suivant affiche un cercle plein de couleur rouge (redColor) :

// COULEUR DE DESSIN<br />UIColor *couleur = [UIColor redColor];<br />CGContextSetFillColorWithColor(UIGraphicsGetCurrentContext(), couleur.CGColor);<br />	<br />// DESSIN CERCLE<br />CGRect rectangleCercle = CGRectMake(20, 20, 100, 100);<br />CGContextFillEllipseInRect(UIGraphicsGetCurrentContext(), rectangleDessin);

Le même exemple, mais affichant un cercle à partir d'un point et d'une épaisseur.

<br />// DEFINITION DU CERCLE<br />CGPoint point = CGPointMake(100, 100);<br />NSInteger taillePoint = 20;<br /><br />// COULEUR DE DESSIN<br />UIColor *couleur = [UIColor redColor];<br />CGContextSetFillColorWithColor(UIGraphicsGetCurrentContext(), couleur.CGColor);<br />	<br />// DESSIN CERCLE<br />// CGRect rectangleCercle = CGRectMake(20, 20, 100, 100);<br />CGRect rectangleCercle = CGRectMake(point.x-taillePoint/2, point.y-taillePoint/2,<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  taillePoint, taillePoint); <br />CGContextFillEllipseInRect(UIGraphicsGetCurrentContext(), rectangleDessin);

Le code calcule les dimensions du rectangle "englobant" le cercle à partir des coordonnées du centre et de la taille.

Céroce · avril 2011

Pourquoi n'utilises-tu pas UIBezierPath ?
De plus, il faut sans doute tracer des lignes entre deux points successifs pour obtenir un dessin continu.

(Ah ben oui, Draken, tu t'exposes à la critique >:D)

Application de peinture sur l'iPhone

Réponses