objective - ¿Cómo funcionan las imágenes vectoriales en Xcode(es decir, archivos pdf)?

xcode manual pdf

Question

¿Cómo funciona el soporte vectorial en Xcode 6?

Cuando intento cambiar el tamaño de una imagen, parece irregular, ¿qué da?

Answer 1

Cómo usar vectores en Xcode (7 y 6.3+):

1. Guarde una imagen como un archivo .pdf en el tamaño apropiado de @ 1x (por ejemplo, 44x44 para un botón de la barra de herramientas).
2. En su archivo Images.xcassets , cree un nuevo conjunto de imágenes .
3. En el Inspector de atributos , configure los Factores de escala en un solo vector .
4. Arrastre y suelte su archivo pdf en la sección Todo, Universal .

5. Ahora puede referirse a su imagen por su nombre, tal como lo haría con cualquier archivo .png .

   UIImage(named: "myImage")

Cómo usar vectores en versiones anteriores de Xcode (6.0 - 6.2):

• Siga los pasos anteriores, excepto en el paso 3, configure Tipos en Vectores .

Cómo funcionan los vectores en Xcode

El soporte vectorial es confuso en Xcode, porque cuando la mayoría de la gente piensa en vectores, piensa en imágenes que pueden escalar hacia arriba y hacia abajo y aún así verse bien. Sin embargo, Xcode 6 y 7 no tienen soporte vectorial completo para iOS, por lo que las cosas funcionan de forma un poco diferente.

El sistema de vectores es realmente simple . Toma su imagen .pdf y crea los @1x.png , @2x.png y @3x.png en tiempo de compilación . (Puede usar una herramienta para examinar el contenido de Assets.car para verificar esto).

Por ejemplo, suponga que le dan foo.pdf que es un vector activo de 44x44. En tiempo de compilación , generará los siguientes archivos:

• [email protected] a 44x44
• [email protected] a 88x88
• [email protected] a 132x132

Esto funciona igual para cualquier imagen de tamaño. Por ejemplo, si tiene bar.pdf que es 100x100, obtendrá:

• [email protected] a 100x100
• [email protected] a 200x200
• [email protected] a 300x300

Trascendencia:

• No puede elegir un nuevo tamaño para la imagen ; solo se verá bien si lo mantienes en el tamaño de 44x44. La razón es que el soporte vectorial completo no está implementado . Lo único que hacen estos vectores es ahorrarle tiempo para guardar sus activos de imagen. Si tiene una herramienta (por ejemplo, una secuencia de comandos de Photoshop) que ya lo convierte en un proceso de un solo paso, lo único que obtendrá mediante el uso de vectores PDF es una compatibilidad a prueba del futuro (por ejemplo, si en iOS 9 Apple necesita 4x de activos, esto solo funcionará), y tendrá menos archivos para mantener .
• Debe solicitar todos sus activos en el tamaño @ 1x, guardados como archivos PDF . Entre otras cosas, esto permitirá a UIImageViews tener el tamaño de contenido intrínseco correcto.

Por qué (probablemente) funciona de esta manera:

• Esto hace que sea compatible con versiones anteriores de iOS.
• El redimensionamiento de vectores puede ser una tarea computacional intensiva en tiempo de ejecución; al implementarlo de esta manera, no hay éxitos de rendimiento .

Answer 2

En Xcode 8, aún puede agregar un pdf, crear un nuevo Conjunto de imágenes y, en el Inspector de atributos, establecer la opción Escalas a una sola escala.

Answer 3

Este es un complemento de la excelente respuesta de @Senseful.

Cómo hacer imágenes vectoriales en formato .pdf

Le diré cómo hacer esto en Inkscape ya que es de código abierto y gratuito, pero otros programas deberían ser similares.

En Inkscape:

1. Crea un nuevo proyecto
2. Vaya a Archivo> Propiedades del documento y establezca el tamaño de página personalizado a su tamaño @ 1x (44x44, 100x100, etc.) con las unidades en px.
3. Haz tu obra de arte
4. Vaya a Archivo> Guardar como ...> Formato de documento imprimible (* .pdf)> Guardar> Aceptar. (Alternativamente, puede ir a Imprimir> Imprimir a archivo> Formato de salida: PDF> Imprimir, pero no hay tantas opciones).

Notas:

• Como se menciona en la respuesta aceptada, no puede cambiar el tamaño de su imagen porque Xcode todavía produce las imágenes rasterizadas en tiempo de construcción. Si necesita cambiar el tamaño de su imagen, debe hacer un nuevo archivo .pdf con un tamaño diferente.

• Si ya tiene una imagen .svg que tiene un tamaño de página incorrecto, haga lo siguiente:

  1. Cambiar el tamaño de página (Inkscape> Archivo> Propiedades del documento)
  2. Seleccione todos los objetos (Ctrl + A) en el espacio de trabajo y cambie su tamaño para que quepan en el nuevo tamaño de página. (Mantenga presionada la tecla Ctrl para mantener el tamaño del aspecto).

• Para convertir un archivo .svg en .pdf también puede encontrar utilidades en línea para hacer el trabajo por usted. Aquí hay un ejemplo de esta respuesta . Esto tiene el beneficio de permitirle establecer el tamaño de .pdf fácilmente.

Otras lecturas

• Uso de imágenes vectoriales en Xcode 6

Answer 4

Para aquellos que aún no se actualizaron, hubo cambios en Xcode 9 (iOS 11).

Novedades de Cocoa Touch (WWDC 2017 Session 201) (@ 32: 55) https://developer.apple.com/videos/play/wwdc2017/201/

En pocas palabras, el Catálogo de activos ahora incluye la nueva casilla de verificación en el Inspector de atributos llamado "Conservar datos vectoriales". Cuando se selecciona, los datos PDF se incluirán en el binario compilado, lo que aumentará su tamaño, por supuesto. Pero ofrece una oportunidad para iOS de escalar los datos vectoriales en ambas direcciones y proporcionar imágenes agradables (con sus propias dificultades). Para iOS por debajo de 11, se utilizan los viejos mecanismos de escala descritos en las respuestas hacia arriba.

Answer 5

Puede usar archivos PDF normales dentro de su proyecto como imágenes de Vector y renderizar imágenes de cualquier tamaño usando esta extensión. De esta forma es mucho mejor porque iOS no generará imágenes .PNG en sus archivos PDF, además de que puede renderizar imágenes con el tamaño que desee:

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
    }
}

}