Přizpůsobení tvarů v prezentacích v JavaScriptu

O čem je tato stránka

Vytvářejte a přizpůsobujte tvary v prezentacích PowerPoint pomocí JavaScriptu a Aspose.Slides pro Node.js: geometrické cesty, zakřivené rohy, složené tvary.

Přehled

Tento článek vysvětluje, jak přizpůsobit tvary v prezentacích v Aspose.Slides úpravou geometrie tvaru pomocí editačních bodů a geometrických cest. Ukazuje, jak pracovat s GeometryPath pro úpravu existujících tvarů, provádět základní operace úprav cesty, přidávat nebo odstraňovat body a použít aktualizovanou geometrii zpět na tvar.

Také demonstruje, jak vytvořit vlastní a složené tvary, sestavit tvary s zakřivenými rohy, určit, zda je geometrie tvaru uzavřená, a převést mezi GeometryPath a java.awt.Shape pro další scénáře přizpůsobení geometrie.

Změna tvaru pomocí editačních bodů

Zvažte čtverec. V PowerPointu můžete pomocí edit points

posunout roh čtverce dovnitř nebo ven
zadat zakřivení rohu nebo bodu
přidat nové body do čtverce
manipulovat s body na čtverci atd.

V podstatě můžete provádět popsané úkoly na libovolném tvaru. Používáním editačních bodů můžete změnit tvar nebo vytvořit nový tvar z existujícího.

Tipy pro úpravu tvarů

overview_image

Než začnete upravovat tvary v PowerPointu pomocí editačních bodů, zvažte následující body o tvarech:

Tvar (nebo jeho cesta) může být uzavřený nebo otevřený.
Když je tvar uzavřený, postrádá počáteční nebo koncový bod. Když je tvar otevřený, má začátek a konec.
Všechny tvary se skládají z alespoň 2 ukotvacích bodů propojených čarami.
Čára je buď přímá, nebo zakřivená. Ukotvacující body určují charakter čáry.
Ukotvacující body existují jako rohové body, přímé body nebo hladké body:
- Rohový bod je bod, kde se dva přímé úseky setkají pod úhlem.
- Hladký bod je bod, kde jsou dva ovládací úchyty v přímé linii a úseky čáry se spojují do hladké křivky. V tomto případě jsou všechny úchyty od ukotvovacího bodu ve stejném odstupu.
- Přímý bod je bod, kde jsou dva ovládací úchyty v přímé linii a úseky čáry se spojují do hladké křivky. V tomto případě nemusí být úchyty od ukotvovacího bodu ve stejném odstupu.
Posunem nebo úpravou ukotvacujících bodů (což mění úhel čar) můžete změnit vzhled tvaru.

Pro úpravu tvarů v PowerPointu pomocí editačních bodů poskytuje Aspose.Slides třídu GeometryPath a třídu GeometryPath.

Instance GeometryPath představuje geometrickou cestu objektu GeometryShape.
Pro získání GeometryPath z instance GeometryShape můžete použít metodu GeometryShape.getGeometryPaths.
Pro nastavení GeometryPath pro tvar můžete použít tyto metody: GeometryShape.setGeometryPath pro plné tvary a GeometryShape.setGeometryPaths pro složené tvary.
Pro přidání segmentů můžete použít metody pod GeometryPath.
Pomocí metod GeometryPath.setStroke a GeometryPath.setFillMode můžete nastavit vzhled geometrické cesty.
Pomocí metody GeometryPath.getPathData můžete získat geometrickou cestu GeometryShape jako pole segmentů cesty.
Pro přístup k dalším možnostem úpravy geometrie tvaru můžete převést GeometryPath na java.awt.Shape.
Použijte metody geometryPathToGraphicsPath a graphicsPathToGeometryPath (z třídy ShapeUtil) k převodu GeometryPath na java.awt.Shape zpět a vpřed.

Jednoduché operace úprav

Tento JavaScriptový kód ukazuje, jak

Přidat úsečku na konec cesty

lineTo(point);
lineTo(x, y);

Přidat úsečku na určenou pozici cesty:

lineTo(point, index);
lineTo(x, y, index);

Přidat kubickou Bézierovu křivku na konec cesty:

cubicBezierTo(point1, point2, point3);
cubicBezierTo(x1, y1, x2, y2, x3, y3);

Přidat kubickou Bézierovu křivku na určenou pozici cesty:

cubicBezierTo(point1, point2, point3);
cubicBezierTo(x1, y1, x2, y2, x3, y3);

Přidat kvadratickou Bézierovu křivku na konec cesty:

quadraticBezierTo(point1, point2);
quadraticBezierTo(x1, y1, x2, y2);

Přidat kvadratickou Bézierovu křivku na určenou pozici cesty:

quadraticBezierTo(point1, point2, index);
quadraticBezierTo(x1, y1, x2, y2, index);

Připojit daný oblouk k cestě:

arcTo(width, heigth, startAngle, sweepAngle);

Uzavřít aktuální obrazec cesty:

closeFigure();

Nastavit pozici pro další bod:

moveTo(point);
moveTo(x, y);

Odstranit segment cesty na zadaném indexu:

removeAt(index);

Přidat vlastní body do tvaru

Vytvořte instanci třídy GeometryShape a nastavte typ ShapeType.Rectangle.
Získejte instanci třídy GeometryPath ze tvaru.
Přidejte nový bod mezi dva horní body na cestě.
Přidejte nový bod mezi dva spodní body na cestě.
Použijte cestu na tvar.

Tento JavaScriptový kód ukazuje, jak přidat vlastní body do tvaru:

var pres = new aspose.slides.Presentation();
try {
    var shape = pres.getSlides().get_Item(0).getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 100, 100, 200, 100);
    var geometryPath = shape.getGeometryPaths()[0];
    geometryPath.lineTo(100, 50, 1);
    geometryPath.lineTo(100, 50, 4);
    shape.setGeometryPath(geometryPath);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

example1_image

Odebrat body z tvaru

Vytvořte instanci třídy GeometryShape a nastavte typ ShapeType.Heart.
Získejte instanci třídy GeometryPath ze tvaru.
Odstraňte segment cesty.
Použijte cestu na tvar.

Tento JavaScriptový kód ukazuje, jak odebrat body z tvaru:

var pres = new aspose.slides.Presentation();
try {
    var shape = pres.getSlides().get_Item(0).getShapes().addAutoShape(aspose.slides.ShapeType.Heart, 100, 100, 300, 300);
    var path = shape.getGeometryPaths()[0];
    path.removeAt(2);
    shape.setGeometryPath(path);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

example2_image

Vytvořit vlastní tvar

Vypočítejte body pro tvar.
Vytvořte instanci třídy GeometryPath.
Naplňte cestu body.
Vytvořte instanci třídy GeometryShape.
Použijte cestu na tvar.

Tento JavaScript ukazuje, jak vytvořit vlastní tvar:

var points = java.newInstanceSync("java.util.ArrayList");
var R = 100;
var r = 50;
var step = 72;
for (var angle = -90; angle < 270; angle += step) {
    var radians = angle * (java.getStaticFieldValue("java.lang.Math", "PI") / 180.0);
    var x = R * java.callStaticMethodSync("java.lang.Math", "cos", radians);
    var y = R * java.callStaticMethodSync("java.lang.Math", "sin", radians);
    points.add(java.newInstanceSync("com.aspose.slides.Point2DFloat", java.newFloat(x + R), java.newFloat(y + R)));
    radians = (java.getStaticFieldValue("java.lang.Math", "PI") * (angle + (step / 2))) / 180.0;
    x = r * java.callStaticMethodSync("java.lang.Math", "cos", radians);
    y = r * java.callStaticMethodSync("java.lang.Math", "sin", radians);
    points.add(java.newInstanceSync("com.aspose.slides.Point2DFloat", java.newFloat(x + R), java.newFloat(y + R)));
}
var starPath = new aspose.slides.GeometryPath();
starPath.moveTo(points.get(0));
for (var i = 1; i < points.size(); i++) {
    starPath.lineTo(points.get(i));
}
starPath.closeFigure();
var pres = new aspose.slides.Presentation();
try {
    var shape = pres.getSlides().get_Item(0).getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 100, 100, R * 2, R * 2);
    shape.setGeometryPath(starPath);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

example3_image

Vytvořit složený vlastní tvar

Vytvořte instanci třídy GeometryShape.
Vytvořte první instanci třídy GeometryPath.
Vytvořte druhou instanci třídy GeometryPath.
Použijte cesty na tvar.

Tento JavaScriptový kód ukazuje, jak vytvořit složený vlastní tvar:

var pres = new aspose.slides.Presentation();
try {
    var shape = pres.getSlides().get_Item(0).getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 100, 100, 200, 100);
    var geometryPath0 = new aspose.slides.GeometryPath();
    geometryPath0.moveTo(0, 0);
    geometryPath0.lineTo(shape.getWidth(), 0);
    geometryPath0.lineTo(shape.getWidth(), shape.getHeight() / 3);
    geometryPath0.lineTo(0, shape.getHeight() / 3);
    geometryPath0.closeFigure();
    var geometryPath1 = new aspose.slides.GeometryPath();
    geometryPath1.moveTo(0, (shape.getHeight() / 3) * 2);
    geometryPath1.lineTo(shape.getWidth(), (shape.getHeight() / 3) * 2);
    geometryPath1.lineTo(shape.getWidth(), shape.getHeight());
    geometryPath1.lineTo(0, shape.getHeight());
    geometryPath1.closeFigure();
    shape.setGeometryPaths(java.newArray("com.aspose.slides.GeometryPath",[geometryPath0, geometryPath1]));
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

example4_image

Vytvořit vlastní tvar se zakřivenými rohy

Tento JavaScriptový kód ukazuje, jak vytvořit vlastní tvar se zakřivenými rohy (dovnitř):

var shapeX = 20.0;
var shapeY = 20.0;
var shapeWidth = 300.0;
var shapeHeight = 200.0;
var leftTopSize = 50.0;
var rightTopSize = 20.0;
var rightBottomSize = 40.0;
var leftBottomSize = 10.0;
var pres = new aspose.slides.Presentation();
try {
    var childShape = pres.getSlides().get_Item(0).getShapes().addAutoShape(aspose.slides.ShapeType.Custom, shapeX, shapeY, shapeWidth, shapeHeight);
    var geometryPath = new aspose.slides.GeometryPath();
    var point1 = java.newInstanceSync("com.aspose.slides.Point2DFloat", leftTopSize, 0);
    var point2 = java.newInstanceSync("com.aspose.slides.Point2DFloat", shapeWidth - rightTopSize, 0);
    var point3 = java.newInstanceSync("com.aspose.slides.Point2DFloat", shapeWidth, shapeHeight - rightBottomSize);
    var point4 = java.newInstanceSync("com.aspose.slides.Point2DFloat", leftBottomSize, shapeHeight);
    var point5 = java.newInstanceSync("com.aspose.slides.Point2DFloat", 0, leftTopSize);
    geometryPath.moveTo(point1);
    geometryPath.lineTo(point2);
    geometryPath.arcTo(rightTopSize, rightTopSize, 180, -90);
    geometryPath.lineTo(point3);
    geometryPath.arcTo(rightBottomSize, rightBottomSize, -90, -90);
    geometryPath.lineTo(point4);
    geometryPath.arcTo(leftBottomSize, leftBottomSize, 0, -90);
    geometryPath.lineTo(point5);
    geometryPath.arcTo(leftTopSize, leftTopSize, 90, -90);
    geometryPath.closeFigure();
    childShape.setGeometryPath(geometryPath);
    pres.save("output.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Zjistit, zda je geometrie tvaru uzavřená

Uzavřený tvar je definován jako takový, kde všechny jeho strany spojují, vytvářejí jedinou hranici bez mezer. Takový tvar může být jednoduchý geometrický útvar nebo složitý vlastní obrys. Následující ukázkový kód ukazuje, jak zjistit, zda je geometrie tvaru uzavřená:

function isGeometryClosed(geometryShape) 
{
    let isClosed = null;

    geometryShape.getGeometryPaths().forEach(geometryPath => {
        const pathData = geometryPath.getPathData();
        const dataLength = pathData.length;

        if (dataLength === 0) return;

        const lastSegment = pathData[dataLength - 1];
        isClosed = lastSegment.getPathCommand() === aspose.slides.PathCommandType.Close;

        if (!isClosed) return false;
    });

    return isClosed === true;
}

Převést GeometryPath na java.awt.Shape

Vytvořte instanci třídy GeometryShape.
Vytvořte instanci třídy java.awt.Shape.
Převěďte instanci java.awt.Shape na instanci GeometryPath pomocí ShapeUtil.
Použijte cesty na tvar.

Tento JavaScriptový kód – implementace výše uvedených kroků – demonstruje proces převodu GeometryPath na GraphicsPath:

var pres = new aspose.slides.Presentation();
try {
    // Vytvořit nový tvar
    var shape = pres.getSlides().get_Item(0).getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 100, 100, 300, 100);
    // Získat geometrickou cestu tvaru
    var originalPath = shape.getGeometryPaths()[0];
    originalPath.setFillMode(aspose.slides.PathFillModeType.None);
    // Vytvořit novou grafickou cestu s textem
    var graphicsPath;
    var font = java.newInstanceSync("java.awt.Font", "Arial", java.getStaticFieldValue("java.awt.Font", "PLAIN"), 40);
    var text = "Text in shape";
    var img = java.newInstanceSync("BufferedImage", 100, 100, java.getStaticFieldValue("BufferedImage", "TYPE_INT_ARGB"));
    var g2 = img.createGraphics();
    try {
        var glyphVector = font.createGlyphVector(g2.getFontRenderContext(), text);
        graphicsPath = glyphVector.getOutline(20.0, -glyphVector.getVisualBounds().getY() + 10);
    } finally {
        g2.dispose();
    }
    // Převést grafickou cestu na geometrickou cestu
    var textPath = aspose.slides.ShapeUtil.graphicsPathToGeometryPath(graphicsPath);
    textPath.setFillMode(aspose.slides.PathFillModeType.Normal);
    // Nastavit kombinaci nové geometrické cesty a původní geometrické cesty na tvar
    shape.setGeometryPaths(java.newArray("com.aspose.slides.IGeometryPath", [originalPath, textPath]));
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

example5_image

Často kladené otázky

Co se stane s výplní a obrysem po nahrazení geometrie?

Styl zůstává s tvarem; mění se pouze obrys. Výplň a obrys jsou automaticky použity na novou geometrii.

Jak správně otočit vlastní tvar spolu s jeho geometrií?

Použijte metodu setRotation tvaru; geometrie se otočí spolu s tvarem, protože je svázána s vlastním souřadnicovým systémem tvaru.

Mohu převést vlastní tvar na obrázek a „uzamknout“ výsledek?

Ano. Exportujte požadovanou slide nebo samotný shape do rastrového formátu; to usnadní další práci s těžkými geometriemi.

Správa spojek v prezentacích pomocí JavaScriptu Přidat elipsy do prezentací v JavaScriptu