PerfectVector
โดย Claire Yoonอ่าน 3 นาที

SVG ใน Qt: เลือกตัวเรนเดอร์แล้วตรวจไฟล์

ใช้ QSvgWidget หรือ QSvgRenderer สำหรับ SVG ใน Qt ตรวจฟีเจอร์ที่รองรับปัจจุบัน และแยกต้นทางที่ปรับขนาดได้จากภาพราสเตอร์คงที่ในแอป

ในหน้านี้

สำหรับ SVG ในแอป Qt Widgets เริ่มด้วย QSvgWidget เมื่อต้องการแสดง drawing ใช้ QSvgRenderer เมื่อต้องการวาด drawing บนเป้าหมายที่เลือก ความต่างสำคัญ: วาดครั้งเดียวลง QImage ขนาดคงที่ให้พิกเซลไว้แสดง ส่วนเก็บ SVG ให้เรนเดอร์ใหม่ตามขนาดอื่นได้ คู่มือเรนเดอร์ Qt อธิบายทั้งสองวิธี

เลือกวิธีก่อนแล้วตรวจงาน พรีวิวเบราว์เซอร์แสดงงานที่ตั้งใจได้ แต่ไม่พิสูจน์ว่า Qt รองรับทุกฟีเจอร์ที่ไฟล์ใช้

เลือกวิธีแสดงก่อนแก้ SVG

งานจุดเริ่มต้นสิ่งที่ตรวจ
แสดง SVG นิ่งข้างวิดเจ็ตอื่นQSvgWidgetโหลดไฟล์ ขอบเขต drawing และสัดส่วน
วาดในวิดเจ็ตหรือภาพของตัวเองQSvgRenderer กับ painterขนาดเป้าหมายและเวลาที่เรนเดอร์
แก้จุดเวกเตอร์แต่ละจุดโปรแกรมงานภาพหรือระบบแก้ไขแยกรูปทรงต้นทางที่แก้ได้และพฤติกรรมเลือก

Qt อธิบาย QSvgWidget เป็นวิดเจ็ตแสดง SVG และเปิดให้เข้าถึงตัวเรนเดอร์ผ่าน renderer() วิดเจ็ตอยู่ใน SvgWidgets dependency CMake คือ Qt6::SvgWidgets เอกสารคลาส มีประโยชน์กว่าตัวอย่างเก่าที่เพิ่มเพียงโมดูล SVG ทั่วไป

การแสดง SVG ไม่สร้างโปรแกรมแก้ภาพประกอบ เก็บไฟล์หลักต้นทางแยกหากใครต้องย้ายใบไม้ ปรับมุม หรือเปลี่ยนสีรายละเอียดแยก

งานใบไม้แนวคิดแยกไปวิธีเรนเดอร์วิดเจ็ตกับวิธีภาพราสเตอร์คงที่
ภาพประกอบสองวิธีเรนเดอร์ เก็บ SVG ต้นทางสำหรับเรนเดอร์หรือแก้ภายหลัง QImage ที่สร้างตามขนาดหนึ่งเป็นผลราสเตอร์ แผนภาพไม่ใช่ภาพจับแอป Qt ที่รันจริง

ลองต้นทางเล็กก่อนภาพเต็ม

บันทึก drawing ที่สร้างนี้เป็น leaf.svg ใช้ใบไม้เติมสี เส้นใบสีอ่อน และวงกลมปะการังแยก:

<svg xmlns="http://www.w3.org/2000/svg" width="160" height="100" viewBox="0 0 160 100">
  <path d="M24 78C20 34 56 18 98 26C90 62 58 86 24 78Z" fill="#176b64"/>
  <path d="M28 74L78 38" fill="none" stroke="#fff6e8" stroke-width="5"/>
  <circle cx="126" cy="26" r="10" fill="#ec785e"/>
</svg>

ผืนภาพกว้างเป็นความตั้งใจ หากใบไม้สูงแคบ ตรวจการจัดการอัตราส่วนก่อนแก้เส้นโค้ง หากวงกลมหาย ตรวจขอบเขตเห็นและเทียบไฟล์ที่โหลดกับต้นทาง ตัวอย่างเล็กให้รายละเอียดจำแนกได้โดยไม่พึ่งการตัดภาพหรือเอฟเฟกต์

สำหรับพื้นฐานไฟล์ คู่มือรูปแบบ SVG อธิบายความต่างระหว่างรูปเวกเตอร์กับกรอบห่อ SVG ที่มีบิตแมป

ตัวอย่าง Qt 6 Widgets ขั้นต่ำ

สร้าง main.cpp:

#include <QApplication>
#include <QSvgRenderer>
#include <QSvgWidget>
 
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    if (argc != 2)
        return 1;
 
    QSvgWidget view;
    view.load(QString::fromLocal8Bit(argv[1]));
    if (!view.renderer()->isValid())
        return 2;
 
    view.renderer()->setAspectRatioMode(Qt::KeepAspectRatio);
    view.resize(400, 240);
    view.show();
    return app.exec();
}

ส่งชื่อไฟล์ SVG เป็นอาร์กิวเมนต์โปรแกรม ควรเป็นพาธสัมบูรณ์ระหว่างทดสอบ exit code 1 หมายถึงตัวอย่างไม่ได้รับชื่อไฟล์หนึ่งชื่อ 2 หมายถึงตัวเรนเดอร์ไม่รายงานเอกสารใช้ได้ รหัสเหล่านี้เลือกในตัวอย่าง ไม่ใช่ API รหัสข้อผิดพลาดของ Qt

isValid() ตรวจเอกสารที่โหลด ไม่ใช่การอนุมัติภาพ การตั้ง KeepAspectRatio ชัดขอให้ตัวเรนเดอร์รักษาสัดส่วน เอกสาร QSvgRenderer อธิบายการตรวจความถูกต้องและโหมดอัตราส่วน

ใช้ CMakeLists.txt นี้ข้างต้นฉบับ:

cmake_minimum_required(VERSION 3.16)
project(LeafPreview LANGUAGES CXX)
set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
 
find_package(Qt6 REQUIRED COMPONENTS Widgets Svg SvgWidgets)
add_executable(leaf_preview main.cpp)
target_link_libraries(leaf_preview PRIVATE Qt6::Widgets Qt6::Svg Qt6::SvgWidgets)

ตัวอย่างลิงก์ Widgets สำหรับแอป SvgWidgets สำหรับวิดเจ็ตแสดง และ Svg สำหรับเรียกตัวเรนเดอร์ Qt ระบุ คอมโพเนนต์ Svg ของตัวเรนเดอร์แยกจาก คอมโพเนนต์ SvgWidgets

ตั้งค่าและบิลด์ด้วยชุดพัฒนา Qt 6 ที่ติดตั้ง แล้วรัน leaf_preview พร้อมพาธ leaf.svg นี่เป็นตัวอย่างต้นฉบับตามเอกสาร เราไม่ได้คอมไพล์หรือรันในสภาพแวดล้อม Qt เนทีฟ ทดสอบบิลด์และงานจริงบนระบบเป้าหมายก่อนใช้

ตรวจการรองรับปัจจุบันแทนสมมติว่าเหมือนเบราว์เซอร์

Qt SVG สมัยใหม่ไม่จำกัดเพียงฟีเจอร์ SVG Tiny นิ่ง Qt อธิบายองค์ประกอบเพิ่มเติมตั้งแต่ Qt 6.7 ที่แยกวิเคราะห์โดยปริยาย พร้อมตัวเลือกจำกัดให้ Tiny เอกสารฟีเจอร์ขยาย ระบุส่วนเพิ่มที่รองรับและข้อจำกัด

ขอบเขตชัดหนึ่งอย่างคือ clipPath: หน้าเดียวกันระบุไม่รองรับ ไฟล์ที่พึ่งการตัดจึงควรตรวจต้นฉบับแม้ดูถูกต้องในเบราว์เซอร์ มาสก์และฟิลเตอร์บางอย่างมีการรองรับตามเอกสาร แต่ไม่ยืนยันทุกเอฟเฟกต์หรือการตั้งค่าส่งออก

เมื่อใบไม้เรียบง่ายทำงานแต่ภาพใหญ่ต่าง ทำสำเนาแล้วลบฟีเจอร์น่าสงสัยทีละอย่าง สำหรับงานตัดภาพ พิจารณาสร้างรูปทรงที่ตั้งใจให้เห็นจริงในโปรแกรมแก้ไขแทนพึ่งการตัด เปรียบเทียบขอบรูปผลกับต้นฉบับก่อนแทนไฟล์หลัก

ข้อความต้องตรวจแยก หากตัวอักษรเปลี่ยน ทำตาม คู่มือแก้ฟอนต์ SVG การเปลี่ยนอักษรเป็นรูปทรงเป็นทางเลือกออกแบบ ไม่ควรเป็นการแก้แรกสำหรับชื่อไฟล์ผิดหรือโมดูลหาย

สังเกตเมื่อกระบวนการเปลี่ยน SVG เป็นพิกเซล

สมมติโค้ดเรนเดอร์ใบไม้ครั้งเดียวลง QImage เล็ก สร้าง pixmap จากภาพ แล้วขยาย pixmap ภายหลัง การขยายทำกับผลราสเตอร์ SVG ต้นทางไม่หาย แต่การแสดงทีหลังไม่ได้ขอเรนเดอร์ใหม่จากมัน

คู่มือเรนเดอร์ Qt แยกวาดลงภาพจากวาดใน paint event ของวิดเจ็ต หากขนาดแสดงเปลี่ยน เลือกจุดที่ควรเรนเดอร์ SVG ใหม่ อย่าถือบิตแมปแคชเป็นหลักฐานว่าต้นทางเองปรับขนาดไม่ได้

ความต่างเดียวกันสำคัญเมื่อเตรียม ชุดไอคอน SVG รักษาขอบเขตต้นทางให้สอดคล้องแล้วตัดสินแต่ละไอคอนตามขนาดใช้งานจริง ใบไม้ใหญ่ที่จำได้ยังเสียเส้นใบหรือวงกลมแยกเมื่อแสดงเล็ก

ตรวจผลก่อนลดความซับซ้อนทุกอย่าง

เริ่มที่ไฟล์ที่โหลดจริง ไม่ใช่อีกไฟล์ส่งออกชื่อคล้าย ยืนยันตัวอย่างเรียบง่ายปรากฏ แล้วเปรียบเทียบงานจริงตามขนาดที่ตั้งใจและหลังปรับขนาด

สำหรับใบไม้ ตรวจวงกลมยังแยก เส้นใบยังเห็น และผืนภาพกว้างไม่ยืดงาน นี่เป็นการตรวจรับสำหรับการรันของคุณ ไม่ใช่ผลที่เรารายงาน หากทั้งมุมมองว่าง รายการตรวจ SVG ว่าง ช่วยแยกงานมองไม่เห็นและขอบเขต drawing จากการตั้งแอป

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

กู้ไฟล์หลักเมื่อเหลือเพียงราสเตอร์

หากไอคอนเหลือเพียง PNG หรือ JPG กระบวนการแปลงภาพเป็นเวกเตอร์ของ PerfectVector ช่วยเตรียม SVG แก้ได้ก่อนส่งต่อ Qt ตรวจขอบรูป ช่องว่าง และรายละเอียดแยกหลังแปลง แล้วทดสอบผ่านวิธี Qt ที่เลือก การแปลงเตรียมรูปทรง ไม่เพิ่มฟีเจอร์ตัวเรนเดอร์หรือเปลี่ยนวิดเจ็ตแสดงเป็นโปรแกรมแก้พาธ

หากมีเวกเตอร์หลักสะอาดแล้ว แก้ไฟล์นั้นโดยตรง ลดความซับซ้อนสำเนาเฉพาะเมื่อฟีเจอร์หรือรายละเอียดขนาดเล็กเฉพาะต้องการ และเก็บต้นทางสมบูรณ์กว่าไว้แก้อนาคต

คำถามที่พบบ่อย

ควรใช้ QSvgWidget หรือ QSvgRenderer? ใช้ QSvgWidget แสดง SVG ในอินเทอร์เฟซ Widgets ใช้ QSvgRenderer เมื่อต้องคุมการวาดบนเป้าหมายที่เลือก เช่นวิดเจ็ตเองหรือภาพ

Qt ปัจจุบันรองรับเพียง SVG Tiny ไหม? Qt ระบุการรองรับ SVG Tiny นิ่งพร้อมส่วนขยายบางอย่างที่เพิ่มใน Qt 6.7 ตรวจเอกสารฟีเจอร์ปัจจุบันและตัวเลือกที่ตั้ง แทนสมมติว่ารองรับ Tiny เท่านั้นหรือเท่าเบราว์เซอร์

ทำไม SVG เบลอหลังใส่ pixmap ได้? หากเรนเดอร์ลงราสเตอร์ขนาดคงที่ก่อน การขยายผลนั้นปรับพิกเซล ทบทวนเป้าหมายเรนเดอร์และว่า SVG ถูกเรนเดอร์ใหม่ตามขนาดต้องการหรือไม่

โหลด SVG ใช้ได้พิสูจน์ทุกรายละเอียดถูกไหม? ไม่ การตรวจความถูกต้องไม่แทนการดูภาพ เปรียบเทียบขอบเขต สัดส่วน รายละเอียดเล็ก และฟีเจอร์ที่รองรับในแอปเป้าหมายจริง

แหล่งอ้างอิง

  1. Qt — เรนเดอร์ไฟล์ SVG — วิดเจ็ตแสดง เป้าหมาย painter และความต่างระหว่างเรนเดอร์วิดเจ็ตกับราสเตอร์ขั้นกลาง
  2. Qt — คลาส QSvgWidget — วิดเจ็ตแสดง การเข้าถึงตัวเรนเดอร์ และ dependency SvgWidgets
  3. Qt — คลาส QSvgRenderer — dependency Svg ความถูกต้องเอกสาร และการตั้งอัตราส่วน
  4. Qt — ฟีเจอร์ขยาย — ส่วนขยายสมัยใหม่และข้อจำกัดชัด รวมพาธตัดที่ไม่รองรับ

เริ่มด้วยไฟล์เล็กหนึ่งไฟล์และตรวจในวิธี Qt ที่เลือก หากราสเตอร์ต้องกู้ ให้ เตรียม SVG แก้ได้สำหรับประเมิน ตรวจรูปเทียบต้นทาง และตรวจระดับแอปซ้ำก่อนแทนไฟล์

เพิ่มเติมจากบล็อก

เริ่มต้นด้วย SVG ที่เรียบร้อยขึ้น
และแก้ไขได้ง่ายกว่า