web-dev-qa-db-fra.com

Comment les images vectorielles fonctionnent-elles dans Xcode (fichiers pdf, par exemple)?

Comment le support vectoriel fonctionne-t-il dans Xcode 6?

Lorsque j'essaie de redimensionner une image, celle-ci semble irrégulière.

xcodevector-graphics
164
Senseful

Comment utiliser les vecteurs dans Xcode (7 et 6.3+):

  1. Enregistrez une image en tant que fichier . Pdf à la taille @ 1x appropriée (par exemple, 24x24 pour un bouton de la barre d’outils ).
  2. Dans votre fichier Images.xcassets , créez un nouveau jeu d'images .
  3. Dans l'inspecteur d'attributs , définissez les facteurs d'échelle sur Vecteur unique .
  4. Glissez-déposez votre fichier pdf dans la section All, Universal .

  5. Vous pouvez maintenant faire référence à votre image par son nom, comme vous le feriez pour tout fichier . Png .

    UIImage(named: "myImage")

Comment utiliser les vecteurs dans les anciennes versions de Xcode (6.0 - 6.2):

  • Suivez les étapes ci-dessus, à l'exception de l'étape 3, définissez les types sur vecteurs .

Comment fonctionnent les vecteurs dans Xcode

La prise en charge des vecteurs est déroutante dans Xcode, car lorsque la plupart des gens pensent aux vecteurs, ils pensent à des images qui peuvent être agrandies et réduites tout en restant belles. Cependant, Xcode 6 et 7 ne prennent pas en charge les vecteurs complets pour iOS, les choses fonctionnent donc un peu différemment.

Le système de vecteurs est très simple . Il prend votre image .pdf et crée les actifs @1x.png, @2x.png et @3x.png à au moment de la création . (Vous pouvez tilisez un outil pour examiner le contenu de Assets.car pour le vérifier.)

Par exemple, supposons que vous receviez foo.pdf qui est un fichier vectoriel 44x44. Au moment de la construction , les fichiers suivants seront générés:

Cela fonctionne de la même manière pour toute image de taille. Par exemple, si vous avez bar.pdf qui est 100x100, vous obtiendrez:

Implications:

  • Vous ne pouvez pas choisir une nouvelle taille pour l'image ; cela ne sera beau que si vous le gardez à la taille 44x44. La raison en est que la prise en charge complète des vecteurs n'est pas implémentée . La seule chose que ces vecteurs font est de vous faire gagner du temps lors de l'enregistrement de vos ressources d'image. Si vous avez un outil (un script Photoshop, par exemple) qui en fait déjà une procédure en une étape, la seule chose que vous gagnerez en utilisant des vecteurs pdf est une prise en charge future (par exemple, si dans iOS 9, Apple commence à avoir besoin d'actifs @ 4x, ceux-ci ne fonctionneront que), et vous aurez moins de fichiers à gérer .
  • Vous devriez demander tous vos biens à la taille @ 1x, enregistrée sous le nom de fichiers PDF . Entre autres choses, cela permettra à UIImageViews d’avoir la taille de contenu intrinsèque correcte.

Pourquoi ça marche (probablement) comme ça:

  • Cela le rend rétrocompatible avec les versions précédentes d’iOS.
  • Le redimensionnement des vecteurs peut être une tâche de calcul intensif au moment de l'exécution; en l'implémentant de cette façon, , il n'y a pas de succès .
340
Senseful

Dans Xcode 8, vous pouvez toujours ajouter un fichier PDF, créer un nouveau jeu d'images et, dans l'inspecteur d'attributs, définir l'option Echelles à une échelle. enter image description here

24
Maria

Ceci est un complément à l'excellente réponse de @Senseful.

Comment faire des images vectorielles au format .pdf

Je vais vous dire comment faire cela dans Inkscape car il est gratuit et à code source ouvert, mais les autres programmes devraient être similaires.

Dans Inkscape:

  1. Créez un nouveau projet.
  2. Accédez à Fichier> Propriétés du document et définissez le format de page personnalisé sur votre format @ 1x (44x44, 100x100, etc.) avec les unités en px.
  3. Faites vos oeuvres d'art.
  4. Sélectionnez Fichier> Enregistrer sous ...> Format de document imprimable (* .pdf)> Enregistrer> OK. (Vous pouvez également sélectionner Imprimer> Imprimer dans un fichier> Format de sortie: PDF> Imprimer, mais les options ne sont pas aussi nombreuses.)

Notes:

  • Comme indiqué dans la réponse acceptée, vous ne pouvez pas redimensionner votre image car Xcode produit toujours les images pixellisées au moment de la création. Si vous avez besoin de redimensionner votre image, vous devez créer un nouveau fichier .pdf de taille différente.

  • Si vous avez déjà une image .svg dont le format de page est incorrect, procédez comme suit:

    1. Changer la taille de la page (Inkscape> Fichier> Propriétés du document)
    2. Sélectionnez tous les objets (Ctrl + A) sur l'espace de travail et redimensionnez-les pour les adapter à la nouvelle taille de la page. (Maintenez la touche Ctrl enfoncée pour conserver l'aspect.)

  • Pour convertir un fichier .svg en un .pdf, vous pouvez également trouver des utilitaires en ligne qui effectuent le travail à votre place. Voici un exemple de cette réponse . Cela a l'avantage de vous permettre de définir facilement la taille du fichier .pdf.

Lectures complémentaires

14
Suragch

Pour ceux qui ne sont toujours pas mis à jour, il y a eu des changements dans Xcode 9 (iOS 11).

Nouveautés de Cocoa Touch (WWDC 2017 Session 201) (@ 32: 55) https://developer.Apple.com/videos/play/wwdc2017/201/

En quelques mots, Asset Catalog inclut désormais la nouvelle case à cocher de l’Inspecteur des attributs intitulée "Conserver les données vectorielles". Lorsque cette case est cochée, les données PDF seront incluses dans le fichier binaire compilé, augmentant bien entendu sa taille. Mais cela donne à iOS une chance de redimensionner les données vectorielles dans les deux sens et de fournir des images de Nice (avec ses propres difficultés). Pour iOS inférieur à 11, les anciens mécanismes de mise à l'échelle décrits dans les réponses sont utilisés.

8
Dren

Vous pouvez utiliser des fichiers PDF normaux à l'intérieur de votre projet sous forme d'images vectorielles et restituer des images de toute taille à l'aide de cette extension. Cette méthode est bien meilleure car iOS ne générera pas d’images .PNG à partir de vos fichiers PDF. De plus, vous pouvez restituer vos images avec la taille que vous souhaitez:

    extension UIImage {

    static func fromPDF(filename: String, size: CGSize) -> UIImage? {
        guard let path = Bundle.main.path(forResource: filename, ofType: "pdf") else { return nil }
        let url = URL(fileURLWithPath: path)
        guard let document = CGPDFDocument(url as CFURL) else { return nil }
        guard let page = document.page(at: 1) else { return nil }

        let imageRect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
        if #available(iOS 10.0, *) {
            let renderer = UIGraphicsImageRenderer(size: size)
            let img = renderer.image { ctx in
                UIColor.white.withAlphaComponent(0).set()
                ctx.fill(imageRect)
                ctx.cgContext.translateBy(x: 0, y: size.height)
                ctx.cgContext.scaleBy(x: 1.0, y: -1.0)
                ctx.cgContext.concatenate(page.getDrawingTransform(.artBox, rect: imageRect, rotate: 0, preserveAspectRatio: true))
                ctx.cgContext.drawPDFPage(page);
            }

            return img
        } else {
            // Fallback on earlier versions
            UIGraphicsBeginImageContextWithOptions(size, false, 2.0)
            if let context = UIGraphicsGetCurrentContext() {
                context.interpolationQuality = .high
                context.setAllowsAntialiasing(true)
                context.setShouldAntialias(true)
                context.setFillColor(red: 1, green: 1, blue: 1, alpha: 0)
                context.fill(imageRect)
                context.saveGState()
                context.translateBy(x: 0.0, y: size.height)
                context.scaleBy(x: 1.0, y: -1.0)
                context.concatenate(page.getDrawingTransform(.cropBox, rect: imageRect, rotate: 0, preserveAspectRatio: true))
                context.drawPDFPage(page)
                let image = UIGraphicsGetImageFromCurrentImageContext()
                UIGraphicsEndImageContext()
                return image
            }
            return nil
        }
    }

}
1
Bruno Paulino