Xcode에서 벡터 이미지는 어떻게 작동합니까 (예 : pdf 파일)?

Xcode에서 벡터 이미지는 어떻게 작동합니까 (예 : pdf 파일)?

---

Xcode 6에서 벡터 지원은 어떻게 작동합니까?

이미지 크기를 조정하려고하면 들쭉날쭉 해 보입니다.

---

Xcode에서 벡터를 사용하는 방법 (7 및 6.3+) :

1. 이미지를 적절한 @ 1x 크기 (예 : 툴바 버튼의 경우 24x24) 로 .pdf 파일 로 저장하십시오 .
2. 당신에 Images.xcassets 파일, 새로 만들기 이미지 설정을 .
3. (가)에서 속성을 속성 의 설정 규모 요인 에 단일 벡터 .
4. pdf 파일을 모든 범용 섹션 으로 끌어다 놓습니다 .

5. 이제 .png 파일 과 마찬가지로 이름으로 이미지를 참조 할 수 있습니다 .

   UIImage(named: "myImage")
   

이전 버전의 Xcode (6.0-6.2)에서 벡터를 사용하는 방법 :

• 3 단계를 제외하고 위의 단계를 수행하여 유형 을 벡터로 설정하십시오 .

---

Xcode에서 벡터가 작동하는 방식

대부분의 사람들이 벡터를 생각할 때 확대 및 축소 할 수있는 이미지를 생각하기 때문에 Xcode에서는 벡터 지원이 혼동됩니다. 그러나 Xcode 6 및 7은 iOS를 완전히 지원하지 않으므로 약간 다르게 작동합니다.

벡터 시스템은 정말 간단 합니다. 그것은 당신의 소요 .pdf이미지를, 그리고 생성 @1x.png, @2x.png및 @3x.png에서 자산 빌드 시간 . (당신은 할 수 Assets.car의 내용을 검사하는 도구를 사용하여 이를 확인할 수 있습니다.)

예를 들어 foo.pdf44x44 벡터 자산 인 것이 있다고 가정합니다 . 에서 빌드시 다음과 같은 파일을 생성합니다 :

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

이것은 모든 크기의 이미지에서 동일하게 작동합니다. 예를 들어 bar.pdf100x100 인 경우 다음과 같은 결과가 나타납니다.

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

---

시사점 :

• 이미지의 새 크기를 선택할 수 없습니다 . 44x44 크기로 유지하면 좋을 것입니다. 그 이유는 완전한 벡터 지원이 구현되지 않았기 때문입니다 . 이 벡터가하는 유일한 일은 이미지 자산을 저장하는 시간을 절약하는 것입니다. 이미 1 단계 프로세스로 만드는 도구 (예 : Photoshop 스크립트)가있는 경우 pdf 벡터를 사용하여 얻을 수있는 유일한 것은 미래 보장 지원입니다 (예 : iOS 9 Apple에서 @ 4x 자산이 필요한 경우, 이것들은 작동합니다.) 유지 해야 할 파일 수가 적습니다 .
• PDF 파일로 저장된 @ 1x 크기의 모든 자산을 요청해야합니다 . 무엇보다도 UIImageViews는 정확한 내장 컨텐츠 크기를 가질 수 있습니다.

왜 이런 식으로 작동합니까?

• 이것은하게 호환 이전의 iOS 버전.
• 벡터 크기 조정은 런타임에 계산 집약적 인 작업 일 수 있습니다. 이 방법으로 구현하면 성능 저하가 없습니다 .

---

Xcode 8에서는 PDF를 추가하고 새 이미지 세트를 생성 한 다음 속성 관리자에서 스케일을 단일 스케일로 옵션을 설정할 수 있습니다.

---

이것은 @Senseful의 탁월한 답변을 보완하는 것입니다.

.pdf 형식으로 벡터 이미지를 만드는 방법

무료이며 오픈 소스이지만 다른 프로그램도 비슷해야하므로 Inkscape에서이 작업을 수행하는 방법을 알려 드리겠습니다.

Inkscape에서 :

1. 새 프로젝트를 작성하십시오.
2. Go to File > Document Properties and set the custom page size to whatever your @1x size is (44x44, 100x100, etc) with the units in px.
3. Make your artwork.
4. Go to File > Save As... > Printable Document Format (*.pdf) > Save > OK. (Alternatively, you could go to Print > Print to File > Output format: PDF > Print but there are not as many options.)

Notes:

• As is mentioned in the accepted answer, you cannot resize your image because Xcode still produces the rasterized images at build time. If you need to resize your image you should make a new .pdf file with a different size.

• If you already have an .svg image that is the wrong page size, do the following:

  1. Change the page size (Inkscape > File > Document Properties)
  2. Select all objects (Ctrl+A) on the work space and resize them to fit in the new page size. (Hold down Ctrl to keep aspect size.)

• To convert an .svg file into a .pdf you can also find online utilities to do the job for you. Here is one example from this answer. This has the benefit of allowing you to set the .pdf size easily.

Further reading

• Using Vector Images in Xcode 6

---

For those who still not updated, there were changes in Xcode 9 (iOS 11).

What’s new in Cocoa Touch (WWDC 2017 Session 201) (@32:55) https://developer.apple.com/videos/play/wwdc2017/201/

In few words, Asset Catalog now includes the new checkbox in Attributes Inspector named “Preserve Vector Data”. When checked, PDF data will be included in the compiled binary, increasing its size of course. But it gives a chance for iOS to scale the vector data in both directions and provide nice images.(With its own difficulties). For iOS below 11, old scaling mechanisms described in answers upwards is used.

---

You can use normal PDF files inside your project as Vector images and render images of any size using this extension. This way is way better because iOS will not generate .PNG images out of your PDF files, plus you can render you images with any size you want:

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

}

참고URL : https://stackoverflow.com/questions/25818845/how-do-vector-images-work-in-xcode-i-e-pdf-files