JavaScript에서 프레젠테이션 모양 사용자 정의

개요

이 문서는 편집 포인트와 기하학 경로를 통해 모양 기하학을 편집하여 Aspose.Slides에서 프레젠테이션 모양을 사용자 정의하는 방법을 설명합니다. GeometryPath를 사용하여 기존 모양을 수정하고, 기본 경로 편집 작업을 수행하며, 포인트를 추가하거나 제거하고, 업데이트된 기하학을 모양에 적용하는 방법을 보여줍니다.

또한 사용자 정의 및 복합 모양을 만드는 방법, 곡선 모서리가 있는 모양을 구축하는 방법, 모양 기하학이 닫혀 있는지 여부를 판단하는 방법, 그리고 추가 기하학 사용자 정의 시나리오를 위해 GeometryPath와 java.awt.Shape 간에 변환하는 방법을 보여줍니다.

편집 포인트를 사용하여 모양 변경

정사각형을 생각해 보세요. PowerPoint에서 편집 포인트를 사용하면

정사각형 모서리를 안쪽이나 바깥쪽으로 움직일 수 있습니다
모서리 또는 포인트의 곡률을 지정할 수 있습니다
정사각형에 새로운 포인트를 추가할 수 있습니다
정사각형의 포인트를 조작할 수 있습니다 등.

본질적으로, 이러한 작업은 모든 모양에 대해 수행할 수 있습니다. 편집 포인트를 사용하면 기존 모양을 변경하거나 기존 모양에서 새로운 모양을 만들 수 있습니다.

모양 편집 팁

overview_image

편집 포인트를 통해 PowerPoint 모양을 편집하기 전에, 모양에 대해 다음 사항을 고려해 보세요:

모양(또는 그 경로)은 닫힌 형태이거나 열린 형태일 수 있습니다.
모양이 닫혀 있으면 시작점이나 끝점이 없습니다. 모양이 열려 있으면 시작점과 끝점이 있습니다.
모든 모양은 최소 2개의 앵커 포인트가 선으로 서로 연결되어 구성됩니다.
선은 직선이거나 곡선일 수 있습니다. 앵커 포인트가 선의 형태를 결정합니다.
앵커 포인트는 코너 포인트, 스트레이트 포인트, 스무스 포인트로 존재합니다:
- 코너 포인트는 두 직선이 각도로 만나고 있는 포인트입니다.
- 스무스 포인트는 두 핸들이 직선 상에 존재하고 선의 구간이 부드러운 곡선으로 연결되는 포인트입니다. 이 경우 모든 핸들은 앵커 포인트와 동일한 거리만큼 떨어져 있습니다.
- 스트레이트 포인트는 두 핸들이 직선 상에 존재하고 그 선의 구간이 부드러운 곡선으로 연결되는 포인트입니다. 이 경우 핸들은 앵커 포인트와 동일한 거리로 떨어질 필요가 없습니다.
앵커 포인트를 이동하거나 편집(선의 각도를 변경)함으로써 모양의 모양새를 바꿀 수 있습니다.

편집 포인트를 통해 PowerPoint 모양을 편집하려면 Aspose.Slides가 GeometryPath 클래스를 제공합니다.

GeometryPath 인스턴스는 GeometryShape 객체의 기하학 경로를 나타냅니다.
GeometryShape 인스턴스에서 GeometryPath를 가져오려면 GeometryShape.getGeometryPaths 메서드를 사용할 수 있습니다.
모양에 GeometryPath를 설정하려면 다음 메서드를 사용할 수 있습니다: 단일 모양(solid shapes)에는 GeometryShape.setGeometryPath, 복합 모양(composite shapes)에는 GeometryShape.setGeometryPaths.
세그먼트를 추가하려면 GeometryPath 아래의 메서드를 사용할 수 있습니다.
GeometryPath.setStroke 및 GeometryPath.setFillMode 메서드를 사용하여 기하학 경로의 외형을 설정할 수 있습니다.
GeometryPath.getPathData 메서드를 사용하면 GeometryShape의 기하학 경로를 경로 세그먼트 배열로 가져올 수 있습니다.
추가 모양 기하학 사용자 정의 옵션에 접근하려면 GeometryPath를 java.awt.Shape으로 변환할 수 있습니다.
geometryPathToGraphicsPath 및 graphicsPathToGeometryPath 메서드(ShapeUtil 클래스에서)를 사용하여 GeometryPath를 java.awt.Shape으로, 그리고 다시 변환할 수 있습니다.

간단한 편집 작업

다음 JavaScript 코드는 다음과 같이 수행하는 방법을 보여줍니다.

선 추가 경로 끝에

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

선 추가 경로의 지정된 위치에:

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

삼차 베지어 곡선 추가 경로 끝에:

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

삼차 베지어 곡선 추가 경로의 지정된 위치에:

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

이차 베지어 곡선 추가 경로 끝에:

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

이차 베지어 곡선 추가 경로의 지정된 위치에:

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

주어진 호 추가 경로에:

arcTo(width, heigth, startAngle, sweepAngle);

현재 도형 닫기 경로의:

closeFigure();

다음 포인트 위치 설정:

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

경로 세그먼트 제거 지정된 인덱스에서:

removeAt(index);

모양에 사용자 정의 포인트 추가

GeometryShape 클래스의 인스턴스를 만들고 ShapeType.Rectangle 유형을 설정합니다.
모양에서 GeometryPath 클래스의 인스턴스를 가져옵니다.
경로의 두 상단 포인트 사이에 새로운 포인트를 추가합니다.
경로의 두 하단 포인트 사이에 새로운 포인트를 추가합니다.
경로를 모양에 적용합니다.

다음 JavaScript 코드는 모양에 사용자 정의 포인트를 추가하는 방법을 보여줍니다:

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

모양에서 포인트 제거

GeometryShape 클래스의 인스턴스를 만들고 ShapeType.Heart 유형을 설정합니다.
모양에서 GeometryPath 클래스의 인스턴스를 가져옵니다.
경로의 세그먼트를 제거합니다.
경로를 모양에 적용합니다.

다음 JavaScript 코드는 모양에서 포인트를 제거하는 방법을 보여줍니다:

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

사용자 정의 모양 만들기

모양의 포인트를 계산합니다.
GeometryPath 클래스의 인스턴스를 만듭니다.
포인트로 경로를 채웁니다.
GeometryShape 클래스의 인스턴스를 만듭니다.
경로를 모양에 적용합니다.

다음 JavaScript 코드는 사용자 정의 모양을 만드는 방법을 보여줍니다:

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

복합 사용자 정의 모양 만들기

GeometryShape 클래스의 인스턴스를 만든다.
GeometryPath 클래스의 첫 번째 인스턴스를 만든다.
GeometryPath 클래스의 두 번째 인스턴스를 만든다.
경로들을 모양에 적용한다.

다음 JavaScript 코드는 복합 사용자 정의 모양을 만드는 방법을 보여줍니다:

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

곡선 모서리가 있는 사용자 정의 모양 만들기

다음 JavaScript 코드는 곡선 모서리(안쪽)로 사용자 정의 모양을 만드는 방법을 보여줍니다;

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

모양 기하학이 닫혔는지 확인하기

닫힌 모양은 모든 면이 연결되어 틈 없이 단일 경계선을 형성하는 형태로 정의됩니다. 이러한 모양은 단순한 기하학 형태이거나 복잡한 사용자 정의 외곽선일 수 있습니다. 다음 코드 예제는 모양 기하학이 닫혀 있는지 확인하는 방법을 보여줍니다:

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를 java.awt.Shape로 변환

GeometryShape 클래스의 인스턴스를 만든다.
java.awt.Shape 클래스의 인스턴스를 만든다.
ShapeUtil 을 사용하여 java.awt.Shape 인스턴스를 GeometryPath 인스턴스로 변환합니다.
경로를 모양에 적용한다.

다음 JavaScript 코드는 위 단계들의 구현으로, GeometryPath를 GraphicsPath로 변환하는 과정을 보여줍니다:

var pres = new aspose.slides.Presentation();
try {
    // 새 모양 만들기
    var shape = pres.getSlides().get_Item(0).getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 100, 100, 300, 100);
    // 모양의 기하학 경로 가져오기
    var originalPath = shape.getGeometryPaths()[0];
    originalPath.setFillMode(aspose.slides.PathFillModeType.None);
    // 텍스트가 포함된 새로운 그래픽 경로 만들기
    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();
    }
    // 그래픽 경로를 기하학 경로로 변환
    var textPath = aspose.slides.ShapeUtil.graphicsPathToGeometryPath(graphicsPath);
    textPath.setFillMode(aspose.slides.PathFillModeType.Normal);
    // 새 기하학 경로와 원래 기하학 경로의 조합을 모양에 설정
    shape.setGeometryPaths(java.newArray("com.aspose.slides.IGeometryPath", [originalPath, textPath]));
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

example5_image

FAQ

기하학을 교체한 후 채우기와 외곽선은 어떻게 되나요?

스타일은 모양에 그대로 남으며, 컨투어만 변경됩니다. 채우기와 외곽선은 새 기하학에 자동으로 적용됩니다.

사용자 정의 모양을 기하학과 함께 올바르게 회전하려면 어떻게 해야 하나요?

setRotation 메서드를 사용하십시오. 기하학은 모양의 좌표계에 연결되어 있기 때문에 모양과 함께 회전합니다.

사용자 정의 모양을 이미지로 변환하여 결과를 ‘고정’할 수 있나요?

예. 필요한 slide 영역이나 shape 자체를 래스터 형식으로 내보내면, 복잡한 기하학을 다루는 작업을 단순화할 수 있습니다.

JavaScript를 사용한 프레젠테이션 연결선 관리 JavaScript에서 프레젠테이션에 타원 추가