Jak działa obsługa wektorów w Xcode 6?

Kiedy próbuję zmienić rozmiar obrazu, wygląda na poszarpany, co daje?

Jak używać wektorów w Xcode (7 i 6.3+):

1. Zapisz obraz jako plik .pdf w odpowiednim rozmiarze @ 1x (np. 24x24 dla przycisku paska narzędzi ).
2. W pliku Images.xcassets utwórz nowy zestaw obrazów .
3. W Inspektorze atrybutów ustaw współczynniki skali na Pojedynczy wektor .
4. Przeciągnij i upuść plik pdf do sekcji All, Universal .

5. Możesz teraz odwoływać się do swojego obrazu, używając jego nazwy, tak jak do każdego pliku .png .

   UIImage(named: "myImage")

Jak używać wektorów w starszych wersjach Xcode (6.0 - 6.2):

• Wykonaj powyższe kroki, z wyjątkiem kroku 3, ustaw Typy na Wektory .

Jak działają wektory w Xcode

Obsługa wektorów jest myląca w Xcode, ponieważ kiedy większość ludzi myśli o wektorach, myślą o obrazach, które można skalować w górę iw dół i nadal dobrze wyglądać. Jednak Xcode 6 i 7 nie mają pełnej obsługi wektorów dla iOS, więc rzeczy działają trochę inaczej.

System wektorowy jest naprawdę prosty . Zajmuje swój .pdfwizerunek i tworzy @1x.png, @2x.pngi @3x.pngaktywa w czasie kompilacji . (Możesz użyć narzędzia do sprawdzenia zawartości Assets.car, aby to sprawdzić).

Na przykład załóżmy, że otrzymałeś foo.pdfzasób wektorowy 44x44. W czasie kompilacji wygeneruje następujące pliki:

• foo@1x.png przy 44x44
• foo@2x.png przy 88x88
• foo@3x.png przy 132x132

Działa to tak samo dla każdego rozmiaru obrazu. Na przykład, jeśli masz bar.pdf100x100, otrzymasz:

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

Implikacje:

• Nie możesz wybrać nowego rozmiaru obrazu ; będzie dobrze wyglądać tylko wtedy, gdy zachowasz rozmiar 44x44. Powodem jest to, że nie zaimplementowano pełnej obsługi wektorów . Jedyne, co robią te wektory, to oszczędzanie czasu na zapisywanie zasobów graficznych. Jeśli masz narzędzie (np. Skrypt Photoshopa), które już sprawia, że ​​jest to jednoetapowy proces, jedyne, co zyskasz używając wektorów pdf, to przyszłościowe wsparcie (np. Jeśli w iOS 9 Apple zaczyna wymagać zasobów @ 4x, po prostu zadziałają) i będziesz mieć mniej plików do utrzymania .
• Powinieneś poprosić o wszystkie swoje zasoby w rozmiarze @ 1x, zapisane jako pliki PDF . Między innymi pozwoli to UIImageViews mieć prawidłowy wewnętrzny rozmiar zawartości.

Dlaczego (prawdopodobnie) działa w ten sposób:

• Dzięki temu jest wstecznie kompatybilny z poprzednimi wersjami iOS.
• Zmiana rozmiaru wektorów może wymagać dużej mocy obliczeniowej w czasie wykonywania; implementując to w ten sposób, nie ma żadnych hitów wydajności .

W Xcode 8 nadal możesz dodać plik PDF, utworzyć nowy zestaw obrazów, aw Inspektorze atrybutów ustawić opcję Skale na pojedynczą skalę.

To uzupełnienie doskonałej odpowiedzi @Senseful.

Jak tworzyć obrazy wektorowe w formacie .pdf

Powiem, jak to zrobić w Inkscape, ponieważ jest darmowy i open source, ale inne programy powinny być podobne.

W Inkscape:

1. Utwórz nowy projekt.
2. Przejdź do Plik> Właściwości dokumentu i ustaw niestandardowy rozmiar strony na dowolny rozmiar @ 1x (44x44, 100x100 itd.) Z jednostkami w pikselach.
3. Stwórz swoją grafikę.
4. Przejdź do Plik> Zapisz jako ...> Format dokumentu do druku (* .pdf)> Zapisz> OK. (Alternatywnie możesz przejść do Drukuj> Drukuj do pliku> Format wyjściowy: PDF> Drukuj, ale nie ma tak wielu opcji).

Uwagi:

• Jak wspomniano w zaakceptowanej odpowiedzi, nie możesz zmienić rozmiaru obrazu, ponieważ Xcode nadal tworzy rasteryzowane obrazy w czasie kompilacji. Jeśli chcesz zmienić rozmiar obrazu, powinieneś utworzyć nowy plik .pdf o innym rozmiarze.

• Jeśli masz już obraz .svg o nieprawidłowym rozmiarze strony, wykonaj następujące czynności:

  1. Zmień rozmiar strony (Inkscape> Plik> Właściwości dokumentu)
  2. Wybierz wszystkie obiekty (Ctrl + A) w obszarze roboczym i zmień ich rozmiar, aby dopasować je do nowego rozmiaru strony. (Przytrzymaj klawisz Ctrl, aby zachować rozmiar proporcji).

• Aby przekonwertować plik .svg na .pdf, możesz również znaleźć narzędzia online, które wykonają to zadanie za Ciebie. Oto jeden przykład z tej odpowiedzi . Ma to tę zaletę, że umożliwia łatwe ustawienie rozmiaru .pdf.

Dalsza lektura

• Korzystanie z obrazów wektorowych w Xcode 6

Dla tych, którzy wciąż nie aktualizowali, nastąpiły zmiany w Xcode 9 (iOS 11).

Co nowego w Cocoa Touch (sesja 201 WWDC 2017) (@ 32:55) https://developer.apple.com/videos/play/wwdc2017/201/

Krótko mówiąc, Katalog zasobów zawiera teraz nowe pole wyboru w Inspektorze atrybutów o nazwie „Zachowaj dane wektorowe”. Gdy zaznaczone, dane PDF zostaną uwzględnione w skompilowanym pliku binarnym, oczywiście zwiększając jego rozmiar. Ale daje to szansę iOS na skalowanie danych wektorowych w obu kierunkach i dostarczanie ładnych obrazów (z własnymi trudnościami). W przypadku iOS poniżej 11 używane są stare mechanizmy skalowania opisane w odpowiedziach w górę.

Możesz używać zwykłych plików PDF w swoim projekcie jako obrazów wektorowych i renderować obrazy o dowolnym rozmiarze za pomocą tego rozszerzenia. Jest to o wiele lepsze, ponieważ iOS nie generuje obrazów .PNG z plików PDF, a ponadto możesz renderować obrazy o dowolnym rozmiarze:

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

}