Prezentációs alakzatok testreszabása JavaScriptben

Áttekintés

Ez a cikk bemutatja, hogyan lehet testreszabni a prezentáció alakzatokat az Aspose.Slides-ban a forma geometriájának szerkesztésével szerkesztő pontok és geometriai utak segítségével. Megmutatja, hogyan lehet a GeometryPath‑sal dolgozni meglévő alakzatok módosításához, alapvető út szerkesztési műveletek elvégzéséhez, pontok hozzáadásához vagy eltávolításához, és a frissített geometria alkalmazásához egy alakzatra.

Ez továbbá bemutatja, hogyan lehet egyéni és összetett alakzatokat létrehozni, görbe sarkokkal rendelkező alakzatokat építeni, meghatározni, hogy egy alakzat geometria zárt‑e, és konvertálni a GeometryPath és a java.awt.Shape között további geometriai testreszabási esetekhez.

Alakzat módosítása szerkesztő pontokkal

Tekintsünk egy négyzetet. A PowerPointban, szerkesztő pontok használatával, a következőket teheted:

a négyzet sarkát be vagy ki lehet húzni
meghatározni egy sarok vagy pont görbületét
új pontokat hozzáadni a négyzethez
a négyzet pontjait manipulálni, stb.

Lényegében ezeket a feladatokat bármelyik alakzaton elvégezheted. Szerkesztő pontok használatával módosíthatsz egy alakzatot vagy új alakzatot hozhatsz létre egy meglévőből.

Alakzat szerkesztési tippek

overview_image

Mielőtt elkezdenél PowerPoint alakzatokat szerkeszteni szerkesztő pontok segítségével, érdemes átgondolnod ezeket a pontokat az alakzatokkal kapcsolatban:

Egy alakzat (vagy az útja) lehet zárt vagy nyitott.
Ha egy alakzat zárt, nincs kezdő vagy végpontja. Ha nyitott, van kezdete és vége.
Minden alakzat legalább 2 rögzítési pontból áll, amelyeket vonalak kötnek össze
A vonal lehet egyenes vagy görbe. A rögzítési pontok határozzák meg a vonal jellegét.
A rögzítési pontok léteznek sarkpontként, egyenes pontként vagy sima pontként:
- A sarokpont egy olyan pont, ahol 2 egyenes vonal szöggel csatlakozik.
- A sima pont egy olyan pont, ahol 2 fogantyú egy egyenes vonalon helyezkedik el, és a vonal szegmensei sima ívben csatlakoznak. Ebben az esetben minden fogantyú egyenlő távolságra van a rögzítési ponttól.
- Egy egyenes pont egy olyan pont, ahol 2 fogantyú egy egyenes vonalon helyezkedik el, és a vonal szegmensei sima ívben csatlakoznak. Ebben az esetben a fogantyúk nem kell, hogy egyenlő távolságra legyenek a rögzítési ponttól.
A rögzítési pontok mozgatásával vagy szerkesztésével (ami a vonalak szögét változtatja) megváltoztathatod egy alakzat kinézetét.

A PowerPoint alakzatok szerkesztéséhez szerkesztő pontokkal, az Aspose.Slides biztosítja a GeometryPath osztályt és a GeometryPath osztályt.

A GeometryPath példány a GeometryShape objektum geometriai útvonalát képviseli.
A GeometryPath lekéréséhez a GeometryShape példányból, használhatod a GeometryShape.getGeometryPaths metódust.
A GeometryPath beállításához egy alakzatra, használhatod ezeket a metódusokat: GeometryShape.setGeometryPath a szilárd alakzatok és GeometryShape.setGeometryPaths a összetett alakzatok esetén.
Szegmensek hozzáadásához használhatod a GeometryPath alatti metódusokat.
A GeometryPath.setStroke és a GeometryPath.setFillMode metódusokkal beállíthatod egy geometriai út megjelenését.
A GeometryPath.getPathData metódus segítségével lekérheted egy GeometryShape geometriai útját útvonal‑szegmensek tömbjeként.
További alakzat geometria testreszabási lehetőségek eléréséhez konvertálhatod a GeometryPath‑ot java.awt.Shape‑ra.
Használd a geometryPathToGraphicsPath és a graphicsPathToGeometryPath metódusokat (a ShapeUtil osztályból) a GeometryPath és a java.awt.Shape közötti átalakításhoz oda és vissza.

Egyszerű szerkesztési műveletek

Ez a JavaScript kód megmutatja, hogyan

Sor hozzáadása egy út végéhez

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

Sor hozzáadása egy megadott pozícióra az úton:

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

Köbös Bézier-görbe hozzáadása egy út végéhez:

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

Köbös Bézier-görbe hozzáadása a megadott pozícióra az úton:

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

Másodfokú Bézier-görbe hozzáadása egy út végéhez:

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

Másodfokú Bézier-görbe hozzáadása a megadott pozícióra az úton:

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

Adott ív hozzáfűzése egy útvonalhoz:

arcTo(width, heigth, startAngle, sweepAngle);

Az aktuális alakzat lezárása egy útvonalon:

closeFigure();

A következő pont pozíciójának beállítása:

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

Az út szegmensének eltávolítása egy megadott indexnél:

removeAt(index);

Egyéni pontok hozzáadása egy alakzathoz

Hozz létre egy GeometryShape példányt, és állítsd be a ShapeType.Rectangle típust.
Szerezz egy GeometryPath példányt az alakzatról.
Adj hozzá egy új pontot a két felső pont között az útvonalon.
Adj hozzá egy új pontot a két alsó pont között az útvonalon.
Alkalmazd az útvonalat az alakzatra.

Ez a JavaScript kód megmutatja, hogyan lehet egyéni pontokat hozzáadni egy alakzathoz:

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

Pontok eltávolítása egy alakzatról

Hozz létre egy GeometryShape példányt, és állítsd be a ShapeType.Heart típust.
Szerezz egy GeometryPath példányt az alakzatról.
Távolítsd el az útvonal szegmensét.
Alkalmazd az útvonalat az alakzatra.

Ez a JavaScript kód megmutatja, hogyan lehet pontokat eltávolítani egy alakzatról:

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

Egyéni alakzat létrehozása

Számold ki az alakzat pontjait.
Hozz létre egy GeometryPath példányt.
Töltsd fel az útvonalat a pontokkal.
Hozz létre egy GeometryShape példányt.
Alkalmazd az útvonalat az alakzatra.

Ez a JavaScript megmutatja, hogyan hozhatsz létre egy egyéni alakzatot:

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

Összetett egyéni alakzat létrehozása

Hozz létre egy GeometryShape példányt.
Hozz létre egy első GeometryPath példányt.
Hozz létre egy második GeometryPath példányt.
Alkalmazd az útvonalakat az alakzatra.

Ez a JavaScript kód megmutatja, hogyan lehet összetett egyéni alakzatot létrehozni:

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

Egyéni alakzat létrehozása görbe sarkokkal

Ez a JavaScript kód megmutatja, hogyan lehet egyéni alakzatot létrehozni görbe sarkokkal (befelé);

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();
    }
}

Megállapítás, hogy egy alakzat geometria zárt‑e

A zárt alakzat olyan, amelynek minden oldala összekapcsolódik, egyetlen határt képezve rés szakadások nélkül. Egy ilyen alakzat lehet egyszerű geometriai forma vagy összetett egyéni körvonal. A következő kódrészlet megmutatja, hogyan ellenőrizheted, hogy egy alakzat geometria zárt‑e:

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

GeometryPath konvertálása java.awt.Shape objektummá

Hozz létre egy GeometryShape példányt.
Hozz létre egy java.awt.Shape példányt.
Konvertáld a java.awt.Shape példányt a GeometryPath példányra a ShapeUtil segítségével.
Alkalmazd az útvonalakat az alakzatra.

Ez a JavaScript kód – a fenti lépések megvalósítása – bemutatja a GeometryPath‑ról GraphicsPath‑ra történő konverzió folyamatát:

var pres = new aspose.slides.Presentation();
try {
    // Új alakzat létrehozása
    var shape = pres.getSlides().get_Item(0).getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 100, 100, 300, 100);
    // Az alakzat geometriai útvonalának lekérése
    var originalPath = shape.getGeometryPaths()[0];
    originalPath.setFillMode(aspose.slides.PathFillModeType.None);
    // Új grafikus útvonal létrehozása szöveggel
    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();
    }
    // Grafikus útvonal konvertálása geometriai útra
    var textPath = aspose.slides.ShapeUtil.graphicsPathToGeometryPath(graphicsPath);
    textPath.setFillMode(aspose.slides.PathFillModeType.Normal);
    // Az új geometriai út és az eredeti geometriai út kombinációjának beállítása az alakzatra
    shape.setGeometryPaths(java.newArray("com.aspose.slides.IGeometryPath", [originalPath, textPath]));
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

example5_image

GYIK

Mi történik a kitöltéssel és a körvonallal a geometria cseréje után?

A stílus az alakzaton marad; csak a körvonal változik. A kitöltés és a körvonal automatikusan alkalmazásra kerül az új geometriára.

Hogyan tudom helyesen elforgatni egy egyéni alakzatot a geometriai adataival együtt?

Használd az alakzat setRotation metódusát; a geometria az alakzattal együtt forog, mert az alakzat saját koordináta‑rendszeréhez van kötve.

Átalakíthatom‑e egy egyéni alakzatot képpé, hogy “lezárjam” az eredményt?

Igen. Exportáld a szükséges slide területet vagy magát a shape raszteres formátumba; ez leegyszerűsíti a nehéz geometriákkal való további munkát.

Csatlakozók kezelése prezentációkban JavaScript használatával Ellipszisek hozzáadása prezentációkhoz JavaScript-ben