Vektör görüntüleri Xcode'da nasıl çalışır (yani pdf dosyaları)?


177

Vektör desteği Xcode 6'da nasıl çalışır?

Bir görüntüyü yeniden boyutlandırmaya çalıştığımda tırtıklı görünüyor, ne oluyor?

Yanıtlar:


351

Xcode'da (7 ve 6.3+) vektörler nasıl kullanılır:

  1. Görüntüyü uygun @ 1x boyutunda .pdf dosyası olarak kaydedin (örneğin bir araç çubuğu düğmesi için 24x24 ).
  2. Senin içinde Images.xcassets dosyası, yeni oluşturmak Görüntü Kümesi .
  3. Gelen Müfettiş Özellikleri , set Ölçek Faktörleri için Tek Vector .
  4. Pdf dosyanızı Tümü, Evrensel bölümüne sürükleyip bırakın .
  5. Artık herhangi bir .png dosyasında yaptığınız gibi resminize adıyla başvurabilirsiniz .

    UIImage(named: "myImage")

Xcode'un eski sürümlerinde vektörler nasıl kullanılır (6.0 - 6.2):

  • 3. adımda haricinde yukarıdaki adımları uygulayın, set türleri için Vektörler .

Vektörler Xcode'da nasıl çalışır?

Vektör desteği Xcode'da kafa karıştırıcıdır, çünkü çoğu insan vektörleri düşündüğünde, yukarı ve aşağı ölçeklenebilen ve hala iyi görünen görüntüleri düşünürler. Bununla birlikte, Xcode 6 ve 7'nin iOS için tam vektör desteği yoktur, bu nedenle işler biraz farklı çalışır.

Vektör sistemi gerçekten basittir . Bu sizin sürer .pdfgörüntü ve yaratır @1x.png, @2x.pngve @3x.pngde varlık oluşturma zaman . (Bunu doğrulamak için Assets.car içeriğini incelemek için bir araç kullanabilirsiniz .)

Örneğin, foo.pdf44x44 vektör öğesi olan size verildiğini varsayalım . At yapı anda aşağıdaki dosyaları oluşturur:

  • foo@1x.png 44x44'te
  • foo@2x.png 88x88'de
  • foo@3x.png 132x132'de

Bu, herhangi bir boyuttaki görüntü için aynı şekilde çalışır. Örneğin bar.pdf, 100x100 olanı varsa , şunları elde edersiniz:

  • bar@1x.png 100x100'de
  • bar@2x.png 200x200'de
  • bar@3x.png 300x300'de

etkileri:

  • Görüntü için yeni bir boyut seçemezsiniz ; sadece 44x44 boyutunda tutarsanız iyi görünecektir. Bunun nedeni tam vektör desteğinin uygulanmamasıdır . Bu vektörlerin yaptığı tek şey size görüntü varlıklarınızı kaydetme zamanından tasarruf etmektir. Bunu zaten tek adımlı bir işlem yapan bir aracınız varsa (örneğin bir Photoshop komut dosyası), pdf vektörlerini kullanarak kazanacağınız tek şey geleceğe dönük destektir (örneğin, iOS 9 Apple'da @ 4x varlık gerektirmeye başlarsa, bunlar işe yarayacak) ve bakımını yapmak için daha az dosyaya sahip olacaksınız .
  • Tüm varlıklarınızı PDF dosyası olarak kaydedilen @ 1x boyutunda istemelisiniz . Diğer şeylerin yanı sıra, bu UIImageViews'ın doğru gerçek içerik boyutuna sahip olmasına izin verecektir.

Neden (muhtemelen) şu şekilde çalışır:

  • Bu, önceki iOS sürümleriyle geriye dönük uyumlu olmasını sağlar .
  • Vektörleri yeniden boyutlandırmak, çalışma zamanında yoğun hesaplama gerektiren bir görev olabilir; bu şekilde uygulandığında performans isabeti olmaz .

8
Güzel yaz. Bu, WWWC Oturum 411 - 44:13 zamanında "Arayüz Oluşturucudaki Yenilikler" bölümünde tartışılmıştır. Rasterleştirmenin oluşturma zamanında yapıldığını söylediklerini unutmayın. Ayrıca ilginç bir şekilde MAC'de çalışma zamanında vektörleri kullanacak. Gelecekte uzak bir noktada iOS da umarım.
Mike Vosseller

15
Ne yazık ki dilim değerlerini ölçeklemiyor. Yani köşeleri 5'e dilerseniz, 2x ve 3x görüntüler için 10 ve 15'e ölçeklemez.
Jesse

5
@Jesse dilim değerlerini ölçeklemek istiyorsanız, dilim değerlerinizi kullanarak resizableImageWithCapInsets:ve bölerek kodda kendiniz yapabilirsiniz[UIScreen mainScreen].scale
Arie Litovsky

1
@ArieLitovsky dilimleme konusundaki öneriyi açıklığa kavuşturmak için: dilimlemeyi öğeden kaldırmalı ve koda, örneğin bir şeye CGFloat scale = [UIScreen mainScreen].scale; UIImage *image = [[UIImage imageNamed:@"my_unsliced_asset"] resizableImageWithCapInsets:UIEdgeInsetsMake(10 * scale, 11 * scale, 12 * scale, 13 * scale)];
taşımalısınız

6
Bunu XCode 8 için nasıl yapabilirim? seçenek kayboldu gibi görünüyor!
Gerald

26

Xcode 8'de yine de bir pdf ekleyebilir, yeni bir Görüntü Kümesi oluşturabilir ve Nitelikler Denetçisi'nde Ölçekleri Tek Ölçek olarak ayarlayabilirsiniz. resim açıklamasını buraya girin


15

Bu, @Senseful'ın mükemmel cevabına bir ektir.

.Pdf formatında vektör görüntüleri nasıl yapılır

Inkscape'te bunu nasıl yapacağımı anlatacağım çünkü ücretsiz ve açık kaynaklıdır, ancak diğer programlar benzer olmalıdır.

Inkscape'te:

  1. Yeni bir proje oluşturun.
  2. Dosya> Belge Özellikleri'ne gidin ve özel sayfa boyutunu @ 1x boyutunuz (44x44, 100x100, vb.) Boyutlarına birim olarak ayarlayın.
  3. Resminizi yapın.
  4. Dosya> Farklı Kaydet ...> Yazdırılabilir Belge Biçimi (* .pdf)> Kaydet> Tamam'a gidin. (Alternatif olarak, Yazdır> Dosyaya Yazdır> Çıktı biçimi: PDF> Yazdır'a gidebilirsiniz, ancak çok fazla seçenek yoktur.)

Notlar:

  • Kabul edilen cevapta belirtildiği gibi, Xcode yine de rasterleştirilmiş görüntüleri oluşturma zamanında ürettiği için resminizi yeniden boyutlandıramazsınız. Resminizi yeniden boyutlandırmanız gerekiyorsa, farklı boyutta yeni bir .pdf dosyası oluşturmanız gerekir.
  • Zaten yanlış sayfa boyutunda bir .svg resminiz varsa, aşağıdakileri yapın:

    1. Sayfa boyutunu değiştirme (Inkscape> Dosya> Belge Özellikleri)
    2. Çalışma alanındaki tüm nesneleri (Ctrl + A) seçin ve yeni sayfa boyutuna sığacak şekilde yeniden boyutlandırın. (En boy boyutunu korumak için Ctrl tuşunu basılı tutun.)
  • Bir .svg dosyasını bir .pdf dosyasına dönüştürmek için, işi sizin için yapacak çevrimiçi yardımcı programları da bulabilirsiniz. İşte bir örnek dan bu cevap . Bu, .pdf boyutunu kolayca ayarlamanıza olanak tanır.

daha fazla okuma


12

Hala güncelleme yapmamış olanlar için Xcode 9'da (iOS 11) değişiklikler yapıldı.

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

Birkaç kelimeyle, Varlık Kataloğu artık "Vektör Verilerini Koru" adlı Özellik Denetçisi'ne yeni onay kutusunu ekliyor. İşaretlendiğinde, PDF verileri derlenen ikili dosyaya dahil edilecek ve elbette boyutunu artıracaktır. Ancak iOS'a vektör verilerini her iki yönde ölçekleme ve güzel görüntüler sağlama şansı verir. (Kendi zorluklarıyla). 11'in altındaki iOS için, yanıtlarda yukarı doğru açıklanan eski ölçekleme mekanizmaları kullanılır.


1

Projenizdeki normal PDF dosyalarını Vektör görüntüleri olarak kullanabilir ve bu uzantıyı kullanarak her boyutta görüntü oluşturabilirsiniz. Bu şekilde çok daha iyidir çünkü iOS PDF dosyalarınızdan .PNG görüntüler oluşturmaz, ayrıca istediğiniz boyutta görüntüler oluşturabilirsiniz:

    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
Bunu denedim, ancak görüntüyü daha büyük piksel boyutlarına kadar ölçeklendiriyor gibi görünmüyor mu? Ben alıyorum UIImage kendisi doğru boyuttur; sadece vektör görüntüsü ortalanmış ve yine de PDF'nin orijinal piksel boyutunda. (Bunu UIImage boyutuna ölçeklemek istedim.) Bunun mümkün olup olmadığını biliyor musunuz?
DivideByZer0
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.