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

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

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

이미지의 크기를 조정하려고 하면 들쭉날쭉하게 보이는데, 무슨 상관입니까?

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

1. 이미지를 적절한 @1x 크기의 .pdf 파일로 저장합니다(예: 도구 모음 버튼의 경우 24x24).
2. 이미지에 있습니다.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.png44x44로
• foo@2x.png88x88로
• foo@3x.png132×159로

모든 크기의 이미지에 대해 동일하게 작동합니다.예를 들어, 만약 당신이bar.pdf즉, 100x100은 다음과 같습니다.

• bar@1x.png100x100으로
• bar@2x.png200x200으로
• bar@3x.png300x300으로

---

의미:

• 이미지의 새 크기를 선택할 수 없습니다. 44x44 크기로 유지해야 보기가 좋습니다.그 이유는 전체 벡터 지원이 구현되지 않기 때문입니다.이러한 벡터를 사용하는 유일한 방법은 이미지 자산을 절약하는 시간을 절약하는 것입니다.이미 이 프로세스를 한 단계로 수행하는 도구(예: Photoshop 스크립트)가 있다면 pdf 벡터를 사용하여 얻을 수 있는 유일한 이점은 미래에 대비한 지원(예: iOS 9에서 Apple이 @4x 자산을 요구하기 시작하면 이러한 지원이 작동함)뿐이며 유지 관리할 파일이 더 적어집니다.
• PDF 파일로 저장된 @1x 크기의 모든 자산을 요청해야 합니다.이를 통해 UIImageViews는 올바른 고유 콘텐츠 크기를 가질 수 있습니다.

이러한 방식으로 작동하는 이유:

• 따라서 이전 iOS 버전과 역호환이 가능합니다.
• 벡터 크기 조정은 런타임에 계산 집약적인 작업일 수 있습니다. 이러한 방식으로 구현하면 성능 저하가 발생하지 않습니다.

Xcode 8에서는 PDF를 추가하고, 새 이미지 세트를 만들고, 속성 관리자에서 단일 척도로 척도 옵션을 설정할 수 있습니다.

이것은 @Senseful의 훌륭한 답변에 대한 보충입니다.

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

자유롭고 오픈 소스이기 때문에 잉크스케이프에서 어떻게 하는지 알려주겠지만 다른 프로그램들도 비슷해야 합니다.

Inkscape에서:

1. 새 프로젝트를 만듭니다.
2. File > Document Properties(파일 > 문서 속성)로 이동하고 px 단위로 사용자 정의 페이지 크기를 @1x 크기(44x44, 100x100 등)로 설정합니다.
3. 당신의 작품을 만드세요.
4. 파일 > 다른 이름으로 저장...으로 이동합니다.> 인쇄 가능한 문서 형식(*.pdf) > 저장 > 확인. (또는 인쇄 > 파일로 인쇄 > 출력 형식 : PDF > 인쇄로 이동할 수 있으나 옵션이 많지 않습니다.)

주의:

• 승인된 답변에 언급된 것처럼 Xcode는 빌드 시 래스터화된 이미지를 계속 생성하므로 이미지 크기를 조정할 수 없습니다.이미지 크기를 조정해야 하는 경우 다른 크기의 .pdf 파일을 새로 만들어야 합니다.

• 잘못된 페이지 크기의 .svg 이미지가 이미 있는 경우 다음을 수행하십시오.

  1. 페이지 크기 변경(잉크스케이프 > 파일 > 문서 속성)
  2. 작업 공간에서 모든 개체(Ctrl+A)를 선택하고 새 페이지 크기에 맞게 크기를 조정합니다.(세로 크기를 유지하려면 Ctrl 키를 누른 상태로 유지합니다.)

• .svg 파일을 .pdf로 변환하려면 작업을 수행할 온라인 유틸리티를 찾을 수도 있습니다.여기 이 답변의 한 예가 있습니다.이렇게 하면 .pdf 크기를 쉽게 설정할 수 있다는 장점이 있습니다.

진일보한 내용

• Xcode 6에서 벡터 영상 사용

아직 업데이트가 되지 않은 분들은 Xcode 9(iOS 11)에 변경 사항이 있었습니다.

코코아 터치의 새로운 기능 (WWDC 2017 세션 201) (@32:55) https://developer.apple.com/videos/play/wwdc2017/201/

간단히 말해, 자산 카탈로그에는 이제 "벡터 데이터 보존"이라는 새 확인란이 속성 관리자에 포함됩니다.이 옵션을 선택하면 PDF 데이터가 컴파일된 이진 파일에 포함되어 파일 크기가 증가합니다.하지만 iOS가 벡터 데이터를 양방향으로 확장하고 멋진 이미지를 제공할 수 있는 기회를 제공합니다.(그 나름의 어려움과 함께).11 이하의 iOS의 경우 답변에 설명된 이전 확장 메커니즘이 사용됩니다.

Xcode 이미지 유형

래스터 이미지 .png

척도 인자 @1x, @2x, @3x

개발자로서 당신은 .png을 해당 인자로 설정할 책임이 있습니다.

공식 문서 - 이미지 크기 및 해상도

벡터 이미지 .pdf 및 .svg

Vector PDF(Portable Document Format) 모든 PDF 파일이 벡터 파일은 아닙니다.

• Xcode 6 -single scale빌시간드; 터벡 PDF -> PNG(@1x, @2x, @3x);
• 9 및 11 - Xcode 9 및 iOS 11 -Preserve Vector Data실행 시간; 동적 척도

SVG(확장 가능 벡터 그래픽)

• Xcode 12 및 iOS < 13 - SVG -> PNG(@1x, @2x, @3x)
• 및 13 - Xcode 12 및 iOS 13 -Preserve Vector Data실행 시간; 동적 척도

디프

• 대부분의 경우 SVG는 PDF보다 작습니다.
• SVG는 텍스트 편집기에서 읽고 편집할 수 있습니다.

실험

장치에만 되지 않음 - 프젝트를특빌는드하경우여않생음하성지해되당만 - )Any iOS device) .및 .사용하면 할 수 있습니다.pdf 파일은 .pdf 파일과 .pdf 파일입니다.

• .png 파일이 생성됩니다(Assets.car^[정보] 파일).
• 를 선택하면Preserve Vector Data그리고.Individual scales(아니요Single scale scale이 될 입니다.

Preserve Vector Data

생성된 파일

프로젝트 내의 일반 PDF 파일을 벡터 이미지로 사용하고 이 확장명을 사용하여 모든 크기의 이미지를 렌더링할 수 있습니다.iOS가 생성되지 않기 때문에 이 방법이 훨씬 더 좋습니다.PDF 파일에서 PNG 이미지를 사용할 수 있으며 원하는 크기로 이미지를 렌더링할 수 있습니다.

    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