# 그림 도형
## Content
SpreadJS는 워크시트에 그림을 도형으로 추가하고 서식 지정하는 기능을 제공합니다.
그림 객체는 ShapeBase 클래스를 사용하여 생성되며 도형의 속성을 상속합니다. 이를 통해 그림의 서식을 지정하고 도형과 상호작용할 수 있습니다.
addPictureShape 메서드를 사용하여 그림 도형을 추가할 수 있습니다. 이 메서드는 이름, 이미지 소스, 위치(x 및 y 좌표), 크기(너비 및 높이) 등의 매개변수를 받습니다.
```JavaScript
// 통합 문서 및 워크시트 구성
var spread = new GC.Spread.Sheets.Workbook("ss");
var sheet = spread.getActiveSheet();
// 그림을 도형으로 추가
var originalPic = sheet.shapes.addPictureShape("Apple", '/apple.png', 20, 50, 200, 200);
```
[PictureShape ](/spreadjs/api/classes/GC.Spread.Sheets.Shapes.PictureShape)클래스는 그림 도형의 모양을 제어할 수 있는 다양한 메서드를 제공합니다. 예를 들어, 아래 이미지는 회전된 그림이 타원형 도형 형태로 추가된 모습을 보여줍니다.
```JavaScript
var pic = sheet.shapes.addPictureShape("Apple", '/apple.png', 280, 60, 200, 200);
// 스타일 설정
var style = pic.style();
style.fill.type = GC.Spread.Sheets.Shapes.ShapeFillType.solid;
style.fill.color = 'rgb(14, 242, 200)';
style.line.color = 'rgb(255, 204, 0)';
style.line.width = 3;
pic.style(style);
// 도형 모양 변경
pic.geometryType(GC.Spread.Sheets.Shapes.AutoShapeType.oval);
// 그림 회전
var n = pic.rotate();
pic.rotate(n + 30);
```
>type=warning
> **참고**: 워크시트에서 이미지 파일을 복사 및 붙여넣기 하면 기본적으로 그림 도형이 생성됩니다. shape 플러그인이 추가되어 있어야 하며, 그렇지 않으면 그림 도형 대신 움직이는 개체 그림이 생성됩니다.
## 그림 서식 지정
SpreadJS는 그림 도형의 서식을 지정하기 위한 다양한 조정 옵션을 제공합니다. pictureFormat 메서드에서 다음과 같은 옵션이 포함된 서식 배열을 설정할 수 있습니다.
| 옵셥 | 설명 | 예 |
| --- | --- | --- |
| blackAndWhite
number | 이분법 효과를 지정합니다. 값 범위는 [0, 1]입니다.
휘도가 임계값 이상이면 흰색, 미만이면 검정으로 설정됩니다. |  |
| brightness number | 그림의 밝기를 조정합니다. 값 범위는 [-1, 1]입니다.
모든 색상을 흰색 또는 검정에 더 가깝게 선형 이동합니다. | @rows=2: |
| contrast number | 그림의 대비를 조정합니다. 값 범위는 [-1, 1]입니다.
모든 색상을 더 가깝거나 멀어지게 조정합니다. |
| crop
IPictureCropInfo | 이미지에서 채우기에 사용될 영역을 지정합니다. |  |
| duotone Object | 듀오톤 효과를 지정합니다.
color1과 color2를 선형 보간하여 각 픽셀의 새 색상을 결정합니다. |  |
| transparency number | 투명도 수준을 조정합니다. 값 범위는 [0, 1]입니다. |  |
| grayscale boolean | 그레이스케일 적용 여부를 지정합니다.
기본값은 false입니다.
모든 색상을 휘도에 따라 회색 음영으로 변환합니다. |  |
다음 코드는 SpreadJS 워크시트에서 그림 도형에 각각의 서식 옵션을 적용하는 예제입니다.
```JavaScript
// 흑백 설정
pic.pictureFormat({ blackAndWhite: 0.5 });
// 밝기 및 대비 설정
var format = pic.pictureFormat();
// Set Brightness and Contrast
format.brightness = 0.4;
format.contrast = 0.4;
pic.pictureFormat(format);
// 자르기 설정
var format = pic.pictureFormat();
// 그림 자르기
format.crop = { left: -.015, right: -0.15, top: -0.15, bottom: -0.15 };
pic.pictureFormat(format);
// 듀오톤 설정
pic.pictureFormat({ duotone: { color1: "black", color2: "red" } });
// 투명도 설정
var format = pic.pictureFormat();
// 투명도 설정
format.transparency = 0.5;
pic.pictureFormat(format);
// 그레이스케일 설정
pic.pictureFormat({ grayscale: true });
```