PDF 그래픽 그리기

개념

PdfDocument 는 벡터 그래픽 API를 제공합니다. 사용자는 일련의 그리기 메서드(예: moveTo, lineTo, rect)를 사용하여 그래픽 경로를 구성하고, 이를 stroke, fill, fillAndStroke 또는 clip 메서드를 사용하여 채우거나, 선을 그리거나, 자를 수 있습니다.

각 그리기 영역(예: 헤더, 본문, 푸터)은 PdfPaths 클래스에 의해 표현되는 paths 속성을 가지며, 이 클래스는 그래픽 경로를 생성하고 이를 그리거나 자르는 데 사용할 수 있는 메서드를 제공합니다. 모든 그리기 메서드는 체이닝 방식으로 호출할 수 있습니다.

예를 들어, 다음 코드는 선과 사각형을 그립니다:

import * as wjPdf from '@grapecity/wijmo.pdf';

doc.paths
    .moveTo(0, 0)
    .lineTo(30, 30)
    .rect(30, 30, 50, 50)
    .stroke();

브러시와 펜

펜은 선과 윤곽이 있는 경로를 그리는 데 사용됩니다. 브러시는 원이나 사각형과 같은 닫힌 경로를 채우는 데 사용됩니다.

펜은 PdfPen 클래스의 인스턴스이며, 브러시는 PdfBrush클래스를 상속한 클래스의 인스턴스입니다. PdfDocument는 여러 가지 브러시 클래스를 제공합니다: PdfSolidBrush, PdfLinearGradientBrush, PdfRadialGradientBrush.

경로 채우기와 선 그리기

경로를 선으로 그리려면 경로 구성이 완료된 후에 펜을 전달하여 stroke 메서드를 호출해야 합니다. 경로를 채우려면 경로 구성이 완료된 후에 브러시를 전달하여 fill 메서드를 호출해야 합니다. 닫힌 경로를 동시에 채우고 선을 그리려면 fillAndStroke 메서드를 사용해야 합니다.

예를 들어, 다음 코드는 빨간색 브러시로 10x10 크기의 사각형을 채웁니다:

doc.paths.rect(0, 0, 10, 10).fill(new wjPdf.PdfSolidBrush("#ff0000"));

펜/브러시 인수가 생략되면, 기본 문서 펜/브러시가 사용됩니다. 이러한 기본 값은 문서의 setPen 및 setBrush 메서드를 통해 변경할 수 있습니다.

doc.setBrush(new wjPdf.PdfSolidBrush("#ff0000"));
doc.paths.rect(0, 0, 10, 10).fill();

이 메서드들은 또한 wijmo.Color 또는 wijmo.Color.fromString 메서드에서 허용하는 문자열을 인수로 받아, PdfPen 및 PdfSolidBrush 클래스 인스턴스의 축약형으로 사용할 수 있습니다. 다음의 코드들은 동일합니다:

doc.paths.stroke(new wjPdf.PdfPen("#ff0000");
doc.paths.stroke(wijmo.Color.fromRgba(255, 0, 0));
doc.paths.stroke("#ff0000");

doc.paths.fill(new wjPdf.PdfSolidBrush("#ff0000");
doc.paths.fill(wijmo.Color.fromRgba(255, 0, 0));
doc.paths.fill("#ff0000");

경로 자르기

경로를 자르려면, 경로 구성이 끝난 후 clip 메서드를 호출해야 합니다. 그 후에 자르기 경로 밖에 위치한 모든 그리기는 보이지 않게 됩니다.

doc.paths.circle(100, 100, 50).clip();

변환

또한, 그리기 영역은 경로의 크기나 방향을 변경하거나, 한 좌표 공간에서 다른 좌표 공간으로 경로를 이동시키는 데 사용되는 여러 가지 변환 메서드를 제공합니다. 예를 들어, rotate, translate, scale 등이 있습니다.

다음 코드는 사각형을 2배 크기로 확대합니다:

doc.scale(2);
doc.paths.rect(0, 0, 50, 50).stroke();

그래픽 상태 저장 및 복원

그래픽 상태는 현재 문서의 기본 펜, 브러시 및 변환에 대한 스냅샷입니다.

saveState 메서드는 그래픽 상태의 복사본을 생성하고 이를 스택에 푸시합니다. restoreState 메서드는 스택에서 복사본을 팝하여 그래픽 상태를 원래 값으로 복원합니다.

예를 들어, saveState 를 호출한 후 문서의 펜을 변경하고, 변경된 펜을 사용해 경로에 선을 그린 뒤, restoreState 를 호출하여 문서의 펜을 이전 값으로 복원할 수 있습니다. 또한, 이 방법은 변환이나 자르기가 적용된 일련의 그리기 메서드가 다른 그리기와 격리되어야 할 때 매우 유용합니다.

다음 예제에서는 스케일링 변환이 saveState 와 restoreState 메서드 사이에 적용되어, restoreState 호출 이후의 그리기에는 영향을 미치지 않습니다:

doc.saveState();

doc.scale(2);
doc.paths.rect(0, 0, 50, 50).stroke();

doc.restoreState();