WordArt hatások létrehozása és alkalmazása JavaScriptben

Miről szól ez az oldal

WordArt hatások létrehozása és testreszabása az Aspose.Slides for Node.js-ben. Ez a lépésről lépésre útmutató segít a fejlesztőknek professzionális szöveggel gazdagítani a prezentációkat.

Áttekintés

A WordArt‑effektek lehetővé teszik, hogy vizuálisan vonzó, stilizált szöveget adjon PowerPoint‑prezentációihoz. Az Aspose.Slides‑szel a fejlesztők programozottan hozhatnak létre, testre szabhatnak és kezelhetnek WordArt‑ot, akárcsak a Microsoft PowerPoint‑ben – akkor is, ha az Office nincs telepítve. Ez a cikk áttekintést nyújt a WordArt használatáról, többek között arról, hogyan alkalmazhat szövegtranszformációkat, kitöltési stílusokat, körvonalakat, árnyékokat és egyéb formázási lehetőségeket, hogy a prezentáció tartalma kifejezőbb és vonzóbb legyen. A WordArt a szöveget grafikus objektumként kezeli. Olyan hatásokat vagy speciális módosításokat tartalmaz, amelyeket a szövegre alkalmaznak, hogy az vonzóbb vagy feltűnőbb legyen.

Egyszerű WordArt sablon létrehozása és alkalmazása szövegre

Az Aspose.Slides használatával

Először egy egyszerű szöveget hozunk létre a következő JavaScript‑kóddal:

var pres = new aspose.slides.Presentation();
try {
    var slide = pres.getSlides().get_Item(0);
    var autoShape = slide.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 200, 200, 400, 200);
    var textFrame = autoShape.getTextFrame();
    var portion = textFrame.getParagraphs().get_Item(0).getPortions().get_Item(0);
    portion.setText("Aspose.Slides");
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Ezután a szöveg betűméretét nagyobb értékre állítjuk, hogy a hatás jobban látható legyen a következő kóddal:

var fontData = new aspose.slides.FontData("Arial Black");
portion.getPortionFormat().setLatinFont(fontData);
portion.getPortionFormat().setFontHeight(36);

A Microsoft PowerPoint használatával

Lépjen a WordArt‑effektek menüjébe a Microsoft PowerPoint‑ban:

A jobb oldali menüből választhat előre definiált WordArt‑effektet. A bal oldali menüből adhatja meg egy új WordArt beállításait.

Az elérhető paraméterek vagy opciók egy része:

Az Aspose.Slides használatával

Itt a SmallGrid minta színt alkalmazzuk a szövegre, és egy 1‑pixel széles fekete szövegkeretet adunk hozzá a következő kóddal:

portion.getPortionFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Pattern));
portion.getPortionFormat().getFillFormat().getPatternFormat().getForeColor().setColor(java.getStaticFieldValue("java.awt.Color", "ORANGE"));
portion.getPortionFormat().getFillFormat().getPatternFormat().getBackColor().setColor(java.getStaticFieldValue("java.awt.Color", "WHITE"));
portion.getPortionFormat().getFillFormat().getPatternFormat().setPatternStyle(java.newByte(aspose.slides.PatternStyle.SmallGrid));
portion.getPortionFormat().getLineFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
portion.getPortionFormat().getLineFormat().getFillFormat().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "BLACK"));

Az eredményül kapott szöveg:

Egyéb WordArt‑hatások alkalmazása

A Microsoft PowerPoint használatával

A program felületéről ezen hatásokat alkalmazhatja szövegre, szövegtömbre, alakzatra vagy hasonló elemre:

Például az Árnyék, Reflexió és Ragyogás hatásokat szövegre, a 3D‑Formátum és 3D‑Forgatás hatásokat szövegtömbre, a Lágy szélek tulajdonságot alakzatra (akár 3D‑Formátum nélkül is) lehet alkalmazni.

Árnyékhatások alkalmazása

Itt csak a szövegre vonatkozó tulajdonságokat állítjuk be. A következő JavaScript‑kóddal alkalmazzuk az árnyékot a szövegre:

portion.getPortionFormat().getEffectFormat().enableOuterShadowEffect();
portion.getPortionFormat().getEffectFormat().getOuterShadowEffect().getShadowColor().setColor(java.getStaticFieldValue("java.awt.Color", "BLACK"));
portion.getPortionFormat().getEffectFormat().getOuterShadowEffect().setScaleHorizontal(100);
portion.getPortionFormat().getEffectFormat().getOuterShadowEffect().setScaleVertical(65);
portion.getPortionFormat().getEffectFormat().getOuterShadowEffect().setBlurRadius(4.73);
portion.getPortionFormat().getEffectFormat().getOuterShadowEffect().setDirection(230);
portion.getPortionFormat().getEffectFormat().getOuterShadowEffect().setDistance(2);
portion.getPortionFormat().getEffectFormat().getOuterShadowEffect().setSkewHorizontal(30);
portion.getPortionFormat().getEffectFormat().getOuterShadowEffect().setSkewVertical(0);
portion.getPortionFormat().getEffectFormat().getOuterShadowEffect().getShadowColor().getColorTransform().add(aspose.slides.ColorTransformOperation.SetAlpha, 0.32);

Az Aspose.Slides API három árnyéktípust támogat: OuterShadow, InnerShadow és PresetShadow.

A PresetShadow‑nal előre definiált értékekkel alkalmazhat árnyékot a szövegre.

A Microsoft PowerPoint használatával

A PowerPoint csak egy árnyéktípust kínál. Íme egy példa:

Az Aspose.Slides használatával

Az Aspose.Slides valójában egyszerre két árnyéktípust is alkalmazhat: InnerShadow és PresetShadow.

Megjegyzések:

• Ha OuterShadow és PresetShadow együtt van használva, csak az OuterShadow hatás lép életbe.
• Ha OuterShadow és InnerShadow egyszerre kerül alkalmazásra, a tényleges hatás a PowerPoint‑verziótól függ. Például PowerPoint 2013‑ban a hatás duplázódik, míg PowerPoint 2007‑ben csak az OuterShadow hatás lép életbe.

Megjelenítés alkalmazása szövegekre

A szövegre a következő JavaScript‑mintakóddal adunk megjelenítést:

portion.getPortionFormat().getEffectFormat().enableReflectionEffect();
portion.getPortionFormat().getEffectFormat().getReflectionEffect().setBlurRadius(0.5);
portion.getPortionFormat().getEffectFormat().getReflectionEffect().setDistance(4.72);
portion.getPortionFormat().getEffectFormat().getReflectionEffect().setStartPosAlpha(0.0);
portion.getPortionFormat().getEffectFormat().getReflectionEffect().setEndPosAlpha(60.0);
portion.getPortionFormat().getEffectFormat().getReflectionEffect().setDirection(90);
portion.getPortionFormat().getEffectFormat().getReflectionEffect().setScaleHorizontal(100);
portion.getPortionFormat().getEffectFormat().getReflectionEffect().setScaleVertical(-100);
portion.getPortionFormat().getEffectFormat().getReflectionEffect().setStartReflectionOpacity(60.0);
portion.getPortionFormat().getEffectFormat().getReflectionEffect().setEndReflectionOpacity(0.9);
portion.getPortionFormat().getEffectFormat().getReflectionEffect().setRectangleAlign(aspose.slides.RectangleAlignment.BottomLeft);

Ragyogás hatás alkalmazása szövegekre

A következő kóddal alkalmazzuk a ragyogás hatást, hogy a szöveg kiemelkedjen:

portion.getPortionFormat().getEffectFormat().enableGlowEffect();
portion.getPortionFormat().getEffectFormat().getGlowEffect().getColor().setR(255);
portion.getPortionFormat().getEffectFormat().getGlowEffect().getColor().getColorTransform().add(aspose.slides.ColorTransformOperation.SetAlpha, 0.54);
portion.getPortionFormat().getEffectFormat().getGlowEffect().setRadius(7);

Az művelet eredménye:

A árnyék, a megjelenítés és a ragyogás paramétereit külön‑külön módosíthatja. A hatások tulajdonságait a szöveg egyes részeire különállóan állítják be.

Transzformációk használata WordArt‑ban

A következő kóddal használjuk a Transform tulajdonságot (amely az egész szövegtömbre vonatkozik):

textFrame.getTextFrameFormat().setTransform(java.newByte(aspose.slides.TextShapeType.ArchUpPour));

Az eredmény:

A Microsoft PowerPoint és az Aspose.Slides for Node.js via Java is rendelkezik számos előre definiált transzformációs típussal.

A PowerPoint használatával

Az előre definiált transzformációs típusok eléréséhez a következő útvonalat kövesse: Formátum → Szöveghatás → Transzformáció

Az Aspose.Slides használatával

A transzformáció típusának kiválasztásához a TextShapeType enumerációt használja.

3D‑hatások alkalmazása szövegekre és alakzatokra

A következő mintakóddal 3D‑hatást állítunk be egy szöveg‑alakzatra:

autoShape.getThreeDFormat().getBevelBottom().setBevelType(aspose.slides.BevelPresetType.Circle);
autoShape.getThreeDFormat().getBevelBottom().setHeight(10.5);
autoShape.getThreeDFormat().getBevelBottom().setWidth(10.5);
autoShape.getThreeDFormat().getBevelTop().setBevelType(aspose.slides.BevelPresetType.Circle);
autoShape.getThreeDFormat().getBevelTop().setHeight(12.5);
autoShape.getThreeDFormat().getBevelTop().setWidth(11);
autoShape.getThreeDFormat().getExtrusionColor().setColor(java.getStaticFieldValue("java.awt.Color", "ORANGE"));
autoShape.getThreeDFormat().setExtrusionHeight(6);
autoShape.getThreeDFormat().getContourColor().setColor(java.getStaticFieldValue("java.awt.Color", "RED"));
autoShape.getThreeDFormat().setContourWidth(1.5);
autoShape.getThreeDFormat().setDepth(3);
autoShape.getThreeDFormat().setMaterial(aspose.slides.MaterialPresetType.Plastic);
autoShape.getThreeDFormat().getLightRig().setDirection(aspose.slides.LightingDirection.Top);
autoShape.getThreeDFormat().getLightRig().setLightType(aspose.slides.LightRigPresetType.Balanced);
autoShape.getThreeDFormat().getLightRig().setRotation(0, 0, 40);
autoShape.getThreeDFormat().getCamera().setCameraType(aspose.slides.CameraPresetType.PerspectiveContrastingRightFacing);

Az eredményül kapott szöveg és alakzat:

A szövegre 3D‑hatást alkalmazunk ezzel a JavaScript‑kóddal:

textFrame.getTextFrameFormat().getThreeDFormat().getBevelBottom().setBevelType(aspose.slides.BevelPresetType.Circle);
textFrame.getTextFrameFormat().getThreeDFormat().getBevelBottom().setHeight(3.5);
textFrame.getTextFrameFormat().getThreeDFormat().getBevelBottom().setWidth(3.5);
textFrame.getTextFrameFormat().getThreeDFormat().getBevelTop().setBevelType(aspose.slides.BevelPresetType.Circle);
textFrame.getTextFrameFormat().getThreeDFormat().getBevelTop().setHeight(4);
textFrame.getTextFrameFormat().getThreeDFormat().getBevelTop().setWidth(4);
textFrame.getTextFrameFormat().getThreeDFormat().getExtrusionColor().setColor(java.getStaticFieldValue("java.awt.Color", "ORANGE"));
textFrame.getTextFrameFormat().getThreeDFormat().setExtrusionHeight(6);
textFrame.getTextFrameFormat().getThreeDFormat().getContourColor().setColor(java.getStaticFieldValue("java.awt.Color", "RED"));
textFrame.getTextFrameFormat().getThreeDFormat().setContourWidth(1.5);
textFrame.getTextFrameFormat().getThreeDFormat().setDepth(3);
textFrame.getTextFrameFormat().getThreeDFormat().setMaterial(aspose.slides.MaterialPresetType.Plastic);
textFrame.getTextFrameFormat().getThreeDFormat().getLightRig().setDirection(aspose.slides.LightingDirection.Top);
textFrame.getTextFrameFormat().getThreeDFormat().getLightRig().setLightType(aspose.slides.LightRigPresetType.Balanced);
textFrame.getTextFrameFormat().getThreeDFormat().getLightRig().setRotation(0, 0, 40);
textFrame.getTextFrameFormat().getThreeDFormat().getCamera().setCameraType(aspose.slides.CameraPresetType.PerspectiveContrastingRightFacing);

Az művelet eredménye:

A 3D‑hatások szövegekre vagy azok alakzataira való alkalmazása, valamint a hatások kölcsönhatása bizonyos szabályokon alapul.

Tekintsen egy szöveget és az azt tartalmazó alakzatot jelenítő jelenetre. A 3D‑hatás tartalmazza a 3D‑objektum ábrázolását és a jelenetet, amelyre az objektum helyezve van.

• Ha a jelenet mind a alakzatra, mind a szövegre be van állítva, az alakzat jelenete magasabb prioritást kap – a szöveg jelenete figyelmen kívül marad.
• Ha az alakzatnak nincs saját jelenete, de van 3D‑ábrázolása, a szöveg jelenete lesz használva.
• Egyébként – ha az alakzat eredetileg nincs 3D‑hatással – akkor az alakzat lapos marad, és a 3D‑hatás csak a szövegre kerül alkalmazásra.

Ezek a leírások a ThreeDFormat.getLightRig() és a ThreeDFormat.getCamera() metódusokra vonatkoznak.

Külső árnyék hatásainak alkalmazása szövegekre

Az Aspose.Slides for Node.js via Java a OuterShadow és a InnerShadow osztályokat biztosítja, amelyekkel árnyékhatásokat alkalmazhat a TextFrame‑ben lévő szövegre. Kövesse az alábbi lépéseket:

1. Hozzon létre egy példányt a Presentation osztályból.
2. Szerezze be a dia referenciáját az indexe alapján.
3. Adjon hozzá egy Rectangle típusú AutoShape‑t a diára.
4. Hozza elérhetővé a AutoShape‑hez tartozó TextFrame‑et.
5. Állítsa be az AutoShape FillType‑ját NoFill‑re.
6. Hozzon létre egy OuterShadow példányt.
7. Állítsa be az árnyék BlurRadius‑át.
8. Állítsa be az árnyék Direction‑ját.
9. Állítsa be az árnyék Distance‑ét.
10. Állítsa be a RectanglelAlign‑t TopLeft‑ra.
11. Állítsa be az árnyék PresetColor‑ját Black‑re.
12. Írja a prezentációt PPTX fájlként.

Az alábbi Java‑minta kód bemutatja, hogyan alkalmazza a külső árnyék hatást szövegre:

var pres = new aspose.slides.Presentation();
try {
    // Kapja meg a dia referenciáját
    var sld = pres.getSlides().get_Item(0);
    // Adj hozzá egy téglalap típusú AutoShape‑t
    var ashp = sld.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 150, 75, 150, 50);
    // Adj TextFrame‑et a téglalaphoz
    ashp.addTextFrame("Aspose TextBox");
    // Tiltsa le az alakzat kitöltését, ha a szöveg árnyékát akarja
    ashp.getFillFormat().setFillType(java.newByte(aspose.slides.FillType.NoFill));
    // Adj külső árnyékot és állíts be minden szükséges paramétert
    ashp.getEffectFormat().enableOuterShadowEffect();
    var shadow = ashp.getEffectFormat().getOuterShadowEffect();
    shadow.setBlurRadius(4.0);
    shadow.setDirection(45);
    shadow.setDistance(3);
    shadow.setRectangleAlign(aspose.slides.RectangleAlignment.TopLeft);
    shadow.getShadowColor().setPresetColor(aspose.slides.PresetColor.Black);
    // Írja a prezentációt lemezre
    pres.save("pres_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Belső árnyék hatásának alkalmazása alakzatokra

Kövesse ezeket a lépéseket:

1. Hozzon létre egy példányt a Presentation osztályból.
2. Szerezze be a dia referenciáját.
3. Adjon hozzá egy Rectangle típusú AutoShape‑t.
4. Engedélyezze az InnerShadowEffect‑et.
5. Állítsa be az összes szükséges paramétert.
6. Állítsa be a ColorType‑ot Scheme‑re.
7. Állítsa be a Scheme Color‑t.
8. Írja a prezentációt egy PPTX fájlba.

Az alábbi JavaScript‑mintakód (a fenti lépések alapján) megmutatja, hogyan adjon csatlakozót két alakzat közé:

var pres = new aspose.slides.Presentation();
try {
    // Kapja meg a dia referenciáját
    var slide = pres.getSlides().get_Item(0);
    // Adjunk hozzá egy téglalap típusú AutoShape‑t
    var ashp = slide.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 150, 75, 400, 300);
    ashp.getFillFormat().setFillType(java.newByte(aspose.slides.FillType.NoFill));
    // Adjunk TextFrame-et a téglalaphoz
    ashp.addTextFrame("Aspose TextBox");
    var port = ashp.getTextFrame().getParagraphs().get_Item(0).getPortions().get_Item(0);
    var pf = port.getPortionFormat();
    pf.setFontHeight(50);
    // Engedélyezzük az InnerShadowEffect-et
    var ef = pf.getEffectFormat();
    ef.enableInnerShadowEffect();
    // Állítsuk be az összes szükséges paramétert
    ef.getInnerShadowEffect().setBlurRadius(8.0);
    ef.getInnerShadowEffect().setDirection(90.0);
    ef.getInnerShadowEffect().setDistance(6.0);
    ef.getInnerShadowEffect().getShadowColor().setB(189);
    // Állítsuk be a ColorType-ot Scheme-ként
    ef.getInnerShadowEffect().getShadowColor().setColorType(aspose.slides.ColorType.Scheme);
    // Állítsuk be a Scheme Color-t
    ef.getInnerShadowEffect().getShadowColor().setSchemeColor(aspose.slides.SchemeColor.Accent1);
    // Mentse el a prezentációt
    pres.save("WordArt_out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

GYIK

Használhatók-e a WordArt‑hatások különböző betűtípusokkal vagy írásrendszerekkel (pl. arab, kínai)?

Igen, az Aspose.Slides támogatja az Unicode‑ot, és működik minden főbb betűtípussal és írásrendszerrel. A WordArt‑hatások, például árnyék, kitöltés és körvonal, nyelvtől függetlenül alkalmazhatók, bár a betűtípus elérhetősége és megjelenítése a rendszer betűtípusaitól függ.

Alkalmazhatók a WordArt‑hatások a dia‑mester elemeire?

Igen, a WordArt‑hatásokat alkalmazhatja a mesterdiák alakzataira, beleértve a címhelyettesítőket, lábléc‑helyettesítőket vagy háttér‑szöveget is. A mesterelrendezésben végzett módosítások az összes hozzá kapcsolt diára kihatnak.

A WordArt‑hatások befolyásolják a prezentáció fájlméretét?

Kissé. Az árnyék, ragyogás és gradient kitöltések kis mértékben növelhetik a fájlméretet az extra formázási metaadatok miatt, de a különbség általában elhanyagolható.

Előnézhetem a WordArt‑hatások eredményét a prezentáció mentése nélkül?

Igen, a WordArt‑ot tartalmazó diák megjeleníthetők képként (pl. PNG, JPEG) a Shape vagy a Slide osztály getImage metódusával. Ez lehetővé teszi az eredmény előnézetét memóriában vagy a képernyőn a teljes prezentáció mentése vagy exportálása előtt.