Création d'un mask autour d'une image

Stéphane MARTIN · mars 2012

Bonsoir,

Depuis un moment j'essais d'appliqué un mask autour d'une image.

J'utilise IB, l'image s'affiche lors de l'execution mais pas le mask ?

voici le code :

CALayer *subLayer = Logo.layer;

subLayer.cornerRadius =15.;

subLayer.borderWidth = 4.;

UIColor *borderColor = [UIColor colorWithRed:255.0/255 green:90/255 blue:0/255 alpha:1.];

subLayer.borderColor = borderColor.CGColor;

subLayer.masksToBounds = YES;

Ceetix · mars 2012

Quel est le type de ta variable logo ? Et tu as écris ça dans quelle méthode ?

edit : à priori logo est un UIImageView. Tu l'as relié à ton outlet déclaré dans ton .h ?

Stéphane MARTIN · mars 2012

Oui c'est une UImageView la variable Logo.

je l'ai relié wiew vers imageViewLogo.

[img]webkit-fake-url://58FA6E02-DCD4-4B51-B8B1-892820A6FCA3/image.tiff[/img]

IBoulet UImageView *Logo déclarer dans .h

Kalamus33 · mars 2012

Salut,

Si logo est un UIImageView alors utilise QuartzCore (importe le framework et déclare le) :

self.logo.layer.cornerRadius = 5.0;

self.logo.layer.borderColor = [/color]UIColor[color=#000000] [/color][color=#40187e]whiteColor[/color][color=#000000 CGColor];

self.logo.layer.borderWidth = 4;

self.logo.clipsToBounds = YES;

Ceetix · mars 2012

@Kalamus33 S'il n'avait pas importé QuarztCore il aurait une erreur de compilation. Oublie pas de te présenter dans la section prévue à cet effet. (ça fait la 3ème fois que je sors ça aujourd'hui

/angry.gif' class='bbc_emoticon' alt='>:(' /> )

@Stéphane : tu as une bordure autour de ton image au moins ? La bordure est arrondie ?

Kalamus33 · mars 2012

@Ceetix : désolé répondu trop vite, l'impatience de mon jeune âge....

@Stéphane : tu es sur de passer par ce code ?

Stéphane MARTIN · mars 2012

@Ceetix : Je n'ai pas de bordure autour de l'image.

<http://cjoint.com/12ma/BCCppJphiWV.htm>;

Et maintenant plus rien s'affiche ?

Kalamus33 · mars 2012

Supprime le lien de la view en gris clair...

Stéphane MARTIN · mars 2012

C'est fait.

Par contre mes bordures autour de l'image, ne s'affichent toujours pas ?

Ceetix · mars 2012

'Ceetix' a écrit:

Et tu as écris ça dans quelle méthode ?

Stéphane MARTIN · mars 2012

Je l'ai mis dans le ViewController.m ?

entre

- (void)viewDidLoad { }

Draken · mars 2012

Stéphane, ton exemple fonctionne parfaitement si l'initialisation se fait directement dans le code, sans passer par IBuilder. Je viens de le tester en créant une mini-application de type "Single View Application".

//<br />
// ViewController.m<br />
//<br />
<br />
- ([color=#bb14a1]void[/color])viewDidLoad<br />
{<br />
[color=#345b5f][color=#000000]	[[/color][color=#bb14a1]super[/color][color=#000000] [/color]viewDidLoad[color=#000000]];[/color][/color]<br />
	<br />
[color=#d22a26][color=#000000]	[/color][color=#4f8187]UIImage[/color][color=#000000] *img = [[/color][color=#4f8187]UIImage[/color][color=#000000] [/color][color=#345b5f]imageNamed[/color][color=#000000]:[/color]@&quot;apple-logo-bleu.png&quot;[color=#000000]];[/color][/color]<br />
	[color=#4f8187]UIImageView[/color] *logo = [[[color=#4f8187]UIImageView[/color] [color=#345b5f]alloc[/color]] [color=#345b5f]initWithImage[/color]:img];<br />
	<br />
	logo.[color=#4f8187]center[/color] = [color=#345b5f]CGPointMake[/color]([color=#2400d6]320[/color]/[color=#2400d6]2[/color], [color=#2400d6]480[/color]/[color=#2400d6]2[/color]);<br />
	[[color=#bb14a1]self[/color].[color=#4f8187]view[/color] [color=#345b5f]addSubview[/color]:logo];<br />
		<br />
	logo.[color=#4f8187]layer[/color].[color=#7035a8]cornerRadius[/color] = [color=#2400d6]15.0[/color];<br />
	[color=#4f8187]UIColor[/color] *borderColor = [[color=#4f8187]UIColor[/color] [color=#345b5f]colorWithRed[/color]:[color=#2400d6]255[/color]/[color=#2400d6]255[/color] [color=#345b5f]green[/color]:[color=#2400d6]90[/color]/[color=#2400d6]255[/color] [color=#345b5f]blue[/color]:[color=#2400d6]0[/color]/[color=#2400d6]255[/color] [color=#345b5f]alpha[/color]:[color=#2400d6]1[/color]];<br />
	logo.[color=#4f8187]layer[/color].[color=#7035a8]borderColor[/color] = borderColor.[color=#4f8187]CGColor[/color];<br />
	logo.[color=#4f8187]layer[/color].[color=#7035a8]borderWidth[/color] = [color=#2400d6]4[/color];<br />
	logo.[color=#4f8187]layer[/color].[color=#7035a8]masksToBounds[/color] = [color=#bb14a1]YES[/color];<br />
}<br />

La preuve par l'image :

Ceetix · mars 2012

Son souci ne vient pas de son code je pense mais plutôt de sa connexion sous IB.

Draken · mars 2012

Je me suis toujours méfié d'IB. Il est louche ce type. Je préfére le garder à distance, changeant de trottoir pour ne pas le croiser de trop prés.

Ceetix · mars 2012

Il peut te faire gagner du temps mais j'avoue ne pas être extrêmement fan. Quoique Xcode le gère vraiment bien je trouve (au niveau de l'unload etc ...)

AliGator · mars 2012

Ceux qui disent ça c'est en général parce qu'ils ne comprennent pas forcément bien comment il fonctionne et donc n'arrivent pas à l'utiliser. Et c'est vrai que les premières fois quand on ne comprend pas comment fonctionne une archive XIB et la façon dont c'est désarchivé (ordre de réinstanciation des objets, de connexion des outlets, etc) ça peut ne pas être intuitif.

Mais c'est quand même hallucinant le temps que ça fait gagner de faire son interface sous IB. Et encore plus sous Xcode4 avec le mode assistant qui fait tout pour nous (création du IBOutlet, release de l'outlet dans viewDidUnload -- ce qu'on oublie souvent de faire encore plus quand on chaque l'interface via loadView, du coup pour la gestion des memory warnings c'est pas idéal si on oublie ça -- et dans dealloc, synthesize de la propriété...).

Ca permet de faire le positionnement des objets visuellement, en plus avec des guides, d'avoir directement un aperçu du rendu, de tout faire par drag & drop... et au pire les rares choses qu'on ne peut pas faire via IB on peut toujours le faire par code en complément mais juste pour compléter (c'est pas exclusif).

En plus avec AutoXIBL10n, toute l'interface étant traduite à la volée sans qu'on ait besoin d'écrire une seule ligne de code, plus besoin d'écrire du code qui va chercher dans Localizable.strings les traductions pour les divers éléments comme on doit le faire quand on crée l'IHM par code...

Bref que des avantages. Du moment qu'on sait bien l'utiliser (quitte à passer un peu de temps dans la doc "Understanding XIBs")

Ceetix · mars 2012

Je connaissais pas ton repo AutoXIBL10n mais je le watch direct !

Stéphane MARTIN · mars 2012

Bonjour,

Je reviens sur la création de mask autour d'une image :

cela fonctionnne donc sans passé par IB.

J'ai pas compris pourquoi le nom logo de ma variable UImageView était refusé à la compilation ?

l'execution sur le simulateur aucun problème.

Par contre lors de la compilation sur l'Iphone voici le message d'erreur affiché

CopyPNGFile /Users/stephanemartin/Library/Developer/Xcode/DerivedData/Arrondi_Image-cwzqxddcxwcbzndpjdvdefbdcoyw/Build/Products/Debug-iphoneos/Arrondi_Image.app/air_de_repos.png ImageWiew/air_de_repos.png

cd /Users/stephanemartin/Desktop/ImageWiew

setenv PATH "/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin:/Applications/Xcode.app/Contents/Developer/usr/bin:/usr/bin:/bin:/usr/sbin:/sbin"

"/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/Library/Xcode/PrivatePlugIns/iPhoneOS Build System Support.xcplugin/Contents/Resources/copypng" -compress "" /Users/stephanemartin/Desktop/ImageWiew/ImageWiew/air_de_repos.png /Users/stephanemartin/Library/Developer/Xcode/DerivedData/Arrondi_Image-cwzqxddcxwcbzndpjdvdefbdcoyw/Build/Products/Debug-iphoneos/Arrondi_Image.app/air_de_repos.png

While reading /Users/stephanemartin/Desktop/ImageWiew/ImageWiew/air_de_repos.png pngcrush caught libpng error:

Not a PNG file..

Could not find file: /Users/stephanemartin/Library/Developer/Xcode/DerivedData/Arrondi_Image-cwzqxddcxwcbzndpjdvdefbdcoyw/Build/Products/Debug-iphoneos/Arrondi_Image.app/air_de_repos.png

Verify exit code of build task with internal identifier 'CopyPNGFile air_de_repos.png'

Preceding build task claims to succeed in spite of generating error messages. Please file a bug report.

Cela ne se produit qu'avec les images.png ?

un réglage à faire au niveau des options de compilations ?

AliGator · mars 2012

A mon avis tes images ne sont pas des fichiers PNG (mais par exemple des fichiers JPEG dont l'extension aurait été changée en PNG alors que ce ne sont pas des vrais PNG).

Il suffit d'ouvrir le terminal et de taper "file " puis faire glisser derrière le fichier PNG en question (pour que ça colle son chemin dans le terminal) et valider, cette commande "file" te dira de quel type de fichier il s'agit en vrai, non en se basant sur l'extension du fichier mais sur son contenu

Ouvre ton fichier PNG avec par exemple Aperçu, et réenregistre-le, mais cette fois-ci en prenant soin de bien choisir le format d'image PNG (et pas juste de changer l'extension dans le nom)

Création d'un mask autour d'une image

Réponses