# PDF 그래픽 그리기 

## Content

## 개념 

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

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

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

```javascript
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 크기의 사각형을 채웁니다:

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


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

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

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

```javascript
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** 메서드를 호출해야 합니다. 그 후에 자르기 경로 밖에 위치한 모든 그리기는 보이지 않게 됩니다.

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

## 변환 

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

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

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

## 그래픽 상태 저장 및 복원

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

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

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

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

```javascript
doc.saveState();

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

doc.restoreState();
```