เวกเตอร์สนับสนุนทำงานใน Xcode 6 อย่างไร

เมื่อฉันลองปรับขนาดรูปภาพมันดูขรุขระสิ่งที่ให้?

วิธีใช้เวกเตอร์ใน Xcode (7 และ 6.3+):

1. บันทึกรูปภาพเป็นไฟล์. pdfที่ขนาด @ 1x ที่เหมาะสม (เช่น24x24 สำหรับปุ่มแถบเครื่องมือ )
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.pdfซึ่งเป็นสินทรัพย์แบบเวกเตอร์ 44x44 ณเวลา buildมันจะสร้างไฟล์ต่อไปนี้:

• foo@1x.png ที่ 44x44
• foo@2x.png ที่ 88x88
• foo@3x.png ที่ 132x132

ใช้งานได้กับรูปภาพทุกขนาด ตัวอย่างเช่นหากคุณมีbar.pdfขนาด 100x100 คุณจะได้รับ:

• bar@1x.png ที่ 100x100
• bar@2x.png ที่ 200x200
• bar@3x.png ที่ 300x300

ผลกระทบ:

• คุณไม่สามารถเลือกขนาดใหม่สำหรับภาพ ; มันจะดูดีถ้าคุณเก็บไว้ที่ขนาด 44x44 เหตุผลก็คือว่าเวกเตอร์สนับสนุนเต็มรูปแบบไม่ได้ดำเนินการ สิ่งเดียวที่เวกเตอร์เหล่านี้ทำคือช่วยคุณประหยัดเวลาในการบันทึกสินทรัพย์รูปภาพของคุณ หากคุณมีเครื่องมือ (เช่นสคริปต์ Photoshop) ที่ทำให้กระบวนการนี้เป็นขั้นตอนเดียวสิ่งเดียวที่คุณจะได้รับจากการใช้เวกเตอร์ pdf คือการรองรับการพิสูจน์ในอนาคต (เช่นถ้าใน iOS 9 Apple เริ่มต้องการ @ สินทรัพย์ 4x เหล่านี้ก็จะทำงาน) และคุณจะมีไฟล์น้อยลงเพื่อรักษา
• คุณควรถามสินทรัพย์ทั้งหมดของคุณที่ @ ขนาด 1x บันทึกเป็นไฟล์ เหนือสิ่งอื่นใดสิ่งนี้จะช่วยให้ UIImageViews มีขนาดเนื้อหาที่ถูกต้อง

ทำไมมันจึงเป็นเช่นนี้:

• ทำให้ย้อนกลับเข้ากันได้กับ iOS เวอร์ชันก่อนหน้า
• การปรับขนาดเวกเตอร์อาจเป็นงานเร่งรัดในการคำนวณที่รันไทม์ โดยการใช้วิธีนี้ไม่มีประสิทธิภาพฮิต

ใน Xcode 8 คุณยังคงสามารถเพิ่ม pdf สร้างชุดรูปภาพใหม่และในตัวตรวจสอบคุณสมบัติตั้งค่าตัวเลือกระดับเป็นระดับเดียว

นี่เป็นส่วนเสริมของคำตอบที่ยอดเยี่ยมโดย @Senseful

วิธีทำภาพเวกเตอร์ในรูปแบบ. pdf

ฉันจะบอกวิธีการทำเช่นนี้ใน Inkscape เพราะมันฟรีและโอเพนซอร์ส แต่โปรแกรมอื่น ๆ ควรจะคล้ายกัน

ใน Inkscape:

1. สร้างโครงการใหม่
2. ไปที่ไฟล์> คุณสมบัติเอกสารและตั้งค่าขนาดหน้ากระดาษที่กำหนดเองเป็นขนาด @ 1x ของคุณคือ (44x44, 100x100 ฯลฯ ) ด้วยหน่วยใน px
3. ทำผลงานศิลปะของคุณ
4. ไปที่ไฟล์> บันทึกเป็น ... > รูปแบบเอกสารที่พิมพ์ได้ (* .pdf)> บันทึก> ตกลง (หรือมิฉะนั้นคุณสามารถไปที่พิมพ์> พิมพ์เป็นไฟล์> รูปแบบผลลัพธ์: PDF> พิมพ์ แต่มีตัวเลือกไม่มาก)

หมายเหตุ:

• ตามที่ระบุไว้ในคำตอบที่ยอมรับแล้วคุณไม่สามารถปรับขนาดภาพของคุณได้เนื่องจาก Xcode ยังคงสร้างภาพแรสเตอร์ที่เวลาสร้าง หากคุณต้องการปรับขนาดภาพของคุณคุณควรสร้างไฟล์. pdf ใหม่ที่มีขนาดแตกต่างกัน

• หากคุณมีภาพ. svg ที่มีขนาดหน้าไม่ถูกต้องให้ทำดังนี้:

  1. เปลี่ยนขนาดหน้า (Inkscape> ไฟล์> คุณสมบัติเอกสาร)
  2. เลือกวัตถุทั้งหมด (Ctrl + A) บนพื้นที่ทำงานและปรับขนาดให้พอดีกับขนาดหน้าใหม่ (กดปุ่ม Ctrl ค้างไว้เพื่อรักษาขนาดภาพ)

• ในการแปลงไฟล์. svg เป็น. pdf คุณยังสามารถหายูทิลิตีออนไลน์เพื่อทำงานให้คุณได้ นี่คือตัวอย่างหนึ่งจากคำตอบนี้ นี่เป็นข้อดีของการอนุญาตให้คุณตั้งขนาด. pdf ได้อย่างง่ายดาย

อ่านเพิ่มเติม

• ใช้ภาพเวกเตอร์ใน Xcode 6

สำหรับผู้ที่ยังไม่ได้อัพเดทมีการเปลี่ยนแปลงใน Xcode 9 (iOS 11)

มีอะไรใหม่ใน Cocoa Touch (เซสชัน WWDC 2017 เซสชัน 201) (@ 32: 55) https://developer.apple.com/videos/play/wwdc2017/201/

ในไม่กี่คำตอนนี้แคตตาล็อกสินทรัพย์จะมีช่องทำเครื่องหมายใหม่ในตัวตรวจสอบแอตทริบิวต์ชื่อ "เก็บข้อมูลเวกเตอร์" เมื่อตรวจสอบข้อมูล PDF จะถูกรวมอยู่ในไบนารีที่คอมไพล์ซึ่งเป็นการเพิ่มขนาดของหลักสูตร แต่มันให้โอกาสสำหรับ iOS ในการไต่ข้อมูลเวกเตอร์ในทั้งสองทิศทางและให้ภาพที่ดี (ด้วยความยากลำบากของตัวเอง) สำหรับ iOS ที่ต่ำกว่า 11 จะใช้กลไกการปรับขนาดแบบเก่าที่อธิบายไว้ในคำตอบขึ้นไป

คุณสามารถใช้ไฟล์ PDF ปกติในโครงการของคุณเป็นภาพเวกเตอร์และแสดงภาพทุกขนาดโดยใช้ส่วนขยายนี้ วิธีนี้เป็นวิธีที่ดีกว่าเพราะ iOS จะไม่สร้างภาพ. PNG จากไฟล์ PDF ของคุณรวมถึงคุณสามารถแสดงรูปภาพในขนาดที่คุณต้องการ:

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

}