เรนเดอร์สไลด์การนำเสนอเป็นภาพ SVG บน Android

หน้านี้เกี่ยวกับอะไร

ส่งออกสไลด์ PowerPoint เป็นภาพ SVG บน Android และควบคุมฟอนต์, ข้อความ, รูปภาพ, ID และเหตุการณ์ด้วย Aspose.Slides.

ภาพรวม

SVG เป็นรูปแบบภาพแบบ XML ที่ขยายได้ซึ่งทำงานได้ดีสำหรับการเผยแพร่บนเว็บ, ตัวดูสไลด์, กระบวนการทำให้เข้าถึงได้, และการประมวลผลอัตโนมัติหลังการสร้าง. Aspose.Slides สำหรับ Android ผ่าน Java จะส่งออกแต่ละสไลด์เป็นไฟล์ SVG แยกไฟล์และให้คุณควบคุมว่าข้อความ, ฟอนต์, รูปภาพ และองค์ประกอบ SVG จะถูกเขียนอย่างไร.

ใช้ SVGOptions เมื่อ SVG ที่ส่งออกต้องกระชับ, มีความคาดการณ์ได้ในหลายเบราว์เซอร์, หรือพร้อมสำหรับการใช้งานเชิงโต้ตอบ.

ส่งออกสไลด์เป็น SVG

สร้าง Presentation, เลือกสไลด์, และเขียนลงสตรีมด้วย ISlide.writeAsSvg. ตัวอย่างต่อไปนี้ส่งออกทุกสไลด์ในพรีเซนเทชันเป็นไฟล์ SVG แยกไฟล์.

Presentation presentation = new Presentation("presentation.pptx");
try {
    for (ISlide slide : presentation.getSlides()) {
        String outputFileName = String.format("slide-%d.svg", slide.getSlideNumber());

        try (FileOutputStream svgStream = new FileOutputStream(outputFileName)) {
            slide.writeAsSvg(svgStream);
        }
    }
} finally {
    presentation.dispose();
}

ชื่อไฟล์ใช้ ISlide.getSlideNumber แทนการใช้ดัชนีของลูป. คุณยังสามารถส่งออกรูปทรงเดี่ยวด้วย IShape.writeAsSvg เมื่อโปรแกรมดูสไลด์หรือหน้าเว็บต้องการเฉพาะรูปทรงนั้น.

กำหนดค่าการส่งออก SVG

SVGOptions ควบคุมการเรนเดอร์ SVG. สำหรับกรอบข้อความ, SVGOptions.setUseFrameSize จะรวมกรอบข้อความในพื้นที่เรนเดอร์, และ SVGOptions.setUseFrameRotation กำหนดว่าจะใช้การหมุนของกรอบหรือไม่. ตั้งค่า SVGOptions.setDisableFontLigatures เป็น true เมื่อข้อความต้องการเรนเดอร์โดยไม่มีลิเกเจอร์.

Presentation presentation = new Presentation("presentation.pptx");
try {
    SVGOptions svgOptions = new SVGOptions();
    svgOptions.setDisableFontLigatures(true);
    svgOptions.setUseFrameSize(true);
    svgOptions.setUseFrameRotation(false);

    ISlide slide = presentation.getSlides().get_Item(0);
    try (FileOutputStream svgStream = new FileOutputStream("slide-with-custom-options.svg")) {
        slide.writeAsSvg(svgStream, svgOptions);
    }
} finally {
    presentation.dispose();
}

ควบคุมข้อความและฟอนต์

แปลงเวคเตอร์ข้อความทั้งหมด

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

Presentation presentation = new Presentation("presentation.pptx");
try {
    SVGOptions svgOptions = new SVGOptions();
    svgOptions.setVectorizeText(true);

    ISlide slide = presentation.getSlides().get_Item(0);
    try (FileOutputStream svgStream = new FileOutputStream("slide-with-vectorized-text.svg")) {
        slide.writeAsSvg(svgStream, svgOptions);
    }
} finally {
    presentation.dispose();
}

เลือกวิธีการจัดการฟอนต์ภายนอก

SVGOptions.setExternalFontsHandling ใช้ค่าของ SvgExternalFontsHandling สำหรับฟอนต์ที่โหลดจากภายนอก. เลือก SvgExternalFontsHandling.AddLinksToFontFiles เพื่ออ้างอิงไฟล์ฟอนต์แยก, SvgExternalFontsHandling.Embed เพื่อฝังข้อมูลฟอนต์ใน SVG, หรือ SvgExternalFontsHandling.Vectorize เพื่อเรนเดอร์เฉพาะข้อความที่ใช้ฟอนต์ภายนอกเป็นกราฟิก. ตรวจสอบลิขสิทธิ์ฟอนต์ก่อนการฝังฟอนต์.

Presentation presentation = new Presentation("presentation.pptx");
try {
    ISlide slide = presentation.getSlides().get_Item(0);

    SVGOptions linkedFontsOptions = new SVGOptions();
    linkedFontsOptions.setExternalFontsHandling(SvgExternalFontsHandling.AddLinksToFontFiles);
    try (FileOutputStream linkedFontsStream = new FileOutputStream("slide-with-font-links.svg")) {
        slide.writeAsSvg(linkedFontsStream, linkedFontsOptions);
    }

    SVGOptions embeddedFontsOptions = new SVGOptions();
    embeddedFontsOptions.setExternalFontsHandling(SvgExternalFontsHandling.Embed);
    try (FileOutputStream embeddedFontsStream = new FileOutputStream("slide-with-embedded-fonts.svg")) {
        slide.writeAsSvg(embeddedFontsStream, embeddedFontsOptions);
    }

    SVGOptions vectorizedExternalFontsOptions = new SVGOptions();
    vectorizedExternalFontsOptions.setExternalFontsHandling(SvgExternalFontsHandling.Vectorize);
    try (FileOutputStream vectorizedExternalFontsStream = new FileOutputStream("slide-with-vectorized-external-fonts.svg")) {
        slide.writeAsSvg(vectorizedExternalFontsStream, vectorizedExternalFontsOptions);
    }
} finally {
    presentation.dispose();
}

ลดขนาดภาพที่ฝังไว้

ใช้ SVGOptions.setPicturesCompression เพื่อลดความละเอียดของภาพที่ฝังไว้, SVGOptions.setDeletePicturesCroppedAreas เพื่อตัดส่วนภาพที่ถูกครอบ, และ SVGOptions.setJpegQuality เพื่อควบคุมคุณภาพการเข้ารหัส JPEG. การตั้งค่าเหล่านี้จะลดขนาดไฟล์โดยอาจสูญเสียความละเอียดหรือข้อมูลภาพที่เก็บไว้.

Presentation presentation = new Presentation("presentation.pptx");
try {
    SVGOptions svgOptions = new SVGOptions();
    svgOptions.setPicturesCompression(PicturesCompression.Dpi150);
    svgOptions.setDeletePicturesCroppedAreas(true);
    svgOptions.setJpegQuality(80);

    ISlide slide = presentation.getSlides().get_Item(0);
    try (FileOutputStream svgStream = new FileOutputStream("compressed-slide.svg")) {
        slide.writeAsSvg(svgStream, svgOptions);
    }
} finally {
    presentation.dispose();
}

กำหนด ID คงที่ให้กับรูปทรงและข้อความ

ใช้ ISvgShapeFormattingController เพื่อกำหนด ISvgShape.setId สำหรับแต่ละรูปทรง SVG. เพื่อกำหนดค่า ISvgTSpan.setId ให้กับองค์ประกอบ tspan ของข้อความด้วย, ให้ทำการติดตั้ง ISvgShapeAndTextFormattingController. กำหนดคอนโทรลเลอร์ใดก็ได้ด้วย SVGOptions.setShapeFormattingController.

คอนโทรลเลอร์ต่อไปนี้ใช้ IShape.getOfficeInteropShapeId ซึ่งคงที่ตลอดอายุของรูปทรง, และตัวนับซ้ำได้สำหรับสแปนข้อความของมัน. วิธีนี้ทำให้ ID ที่สร้างขึ้นเหมาะสำหรับการประมวลผลต่อเนื่องของพรีเซนเทชันที่ไม่ได้เปลี่ยนแปลง.

class StableSvgIdController implements ISvgShapeAndTextFormattingController {
    private String currentShapeId = "";
    private int textSpanIndex;

    public void formatShape(ISvgShape svgShape, IShape shape) {
        currentShapeId = String.format("shape-%d", shape.getOfficeInteropShapeId());
        textSpanIndex = 0;
        svgShape.setId(currentShapeId);
    }

    public void formatText(ISvgTSpan svgTSpan, IPortion portion, ITextFrame textFrame) {
        svgTSpan.setId(String.format("%s-text-%d", currentShapeId, textSpanIndex++));
    }
}

Presentation presentation = new Presentation("presentation.pptx");
try {
    SVGOptions svgOptions = new SVGOptions();
    svgOptions.setShapeFormattingController(new StableSvgIdController());

    ISlide slide = presentation.getSlides().get_Item(0);
    try (FileOutputStream svgStream = new FileOutputStream("slide-with-stable-ids.svg")) {
        slide.writeAsSvg(svgStream, svgOptions);
    }
} finally {
    presentation.dispose();
}

เพิ่มตัวจัดการเหตุการณ์ SVG

ใน ISvgShapeFormattingController, เรียก ISvgShape.setEventHandler พร้อมค่าของ SvgEvent เพื่อเพิ่มตัวจัดการเหตุการณ์ JavaScript ให้กับรูปทรงที่ส่งออก. กำหนดคอนโทรลเลอร์ด้วย SVGOptions.setShapeFormattingController และกำหนดฟังก์ชัน JavaScript ในหน้าเว็บหรือเอกสาร SVG ที่โฮสต์ผลลัพธ์.

class SvgEventController implements ISvgShapeFormattingController {
    public void formatShape(ISvgShape svgShape, IShape shape) {
        if ("ActionButton".equals(shape.getName())) {
            svgShape.setId("action-button");
            svgShape.setEventHandler(SvgEvent.OnClick, "handleShapeClick(event)");
        }
    }
}

Presentation presentation = new Presentation("presentation.pptx");
try {
    SVGOptions svgOptions = new SVGOptions();
    svgOptions.setShapeFormattingController(new SvgEventController());

    ISlide slide = presentation.getSlides().get_Item(0);
    try (FileOutputStream svgStream = new FileOutputStream("interactive-slide.svg")) {
        slide.writeAsSvg(svgStream, svgOptions);
    }
} finally {
    presentation.dispose();
}

หน้าผู้โฮสต์สามารถกำหนดฟังก์ชัน JavaScript ที่อ้างอิงโดยตัวจัดการได้. การกำหนด ID และตัวจัดการเหตุการณ์ช่วยให้ตัวดูสไลด์, ปรับปรุงการเข้าถึง, และเวิร์กโฟลว์ SVG เชิงโต้ตอบอื่น ๆ ทำงานได้.

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

เมื่อใดควรใช้ SVGOptions.setVectorizeText แทน SvgExternalFontsHandling.Vectorize?

ใช้ SVGOptions.setVectorizeText เมื่อข้อความทั้งหมดต้องอิสระจากฟอนต์. ใช้ SvgExternalFontsHandling.Vectorize เมื่อต้องการแปลงเป็นกราฟิกเฉพาะข้อความที่ใช้ฟอนต์ภายนอกเท่านั้น.

วิธีที่ดีที่สุดในการทำให้ SVG มีขนาดเล็กลงคืออะไร?

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

ฉันสามารถแก้ไของค์ประกอบ SVG ที่ส่งออกแล้วได้หรือไม่?

ได้. กำหนด ID ผ่านคอนโทรลเลอร์การจัดรูปแบบ, จากนั้นเลือกองค์ประกิบ SVG ที่ตรงกันในเครื่องมือประมวลผลต่อหรือสคริปต์ของเบราว์เซอร์ของคุณ.