[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

그림 도형

SpreadJS는 워크시트에 그림을 도형으로 추가하고 서식 지정하는 기능을 제공합니다.

그림 객체는 ShapeBase 클래스를 사용하여 생성되며 도형의 속성을 상속합니다. 이를 통해 그림의 서식을 지정하고 도형과 상호작용할 수 있습니다.

image.png

addPictureShape 메서드를 사용하여 그림 도형을 추가할 수 있습니다. 이 메서드는 이름, 이미지 소스, 위치(x 및 y 좌표), 크기(너비 및 높이) 등의 매개변수를 받습니다.

// 통합 문서 및 워크시트 구성
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 클래스는 그림 도형의 모양을 제어할 수 있는 다양한 메서드를 제공합니다. 예를 들어, 아래 이미지는 회전된 그림이 타원형 도형 형태로 추가된 모습을 보여줍니다.

image.png

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

참고: 워크시트에서 이미지 파일을 복사 및 붙여넣기 하면 기본적으로 그림 도형이 생성됩니다. shape 플러그인이 추가되어 있어야 하며, 그렇지 않으면 그림 도형 대신 움직이는 개체 그림이 생성됩니다.

그림 서식 지정

SpreadJS는 그림 도형의 서식을 지정하기 위한 다양한 조정 옵션을 제공합니다. pictureFormat 메서드에서 다음과 같은 옵션이 포함된 서식 배열을 설정할 수 있습니다.

옵셥

설명

예

blackAndWhite

number

이분법 효과를 지정합니다. 값 범위는 [0, 1]입니다.

휘도가 임계값 이상이면 흰색, 미만이면 검정으로 설정됩니다.


brightness number

그림의 밝기를 조정합니다. 값 범위는 [-1, 1]입니다.

모든 색상을 흰색 또는 검정에 더 가깝게 선형 이동합니다.


contrast number

그림의 대비를 조정합니다. 값 범위는 [-1, 1]입니다.

모든 색상을 더 가깝거나 멀어지게 조정합니다.

crop

IPictureCropInfo

이미지에서 채우기에 사용될 영역을 지정합니다.


duotone Object

듀오톤 효과를 지정합니다.

color1과 color2를 선형 보간하여 각 픽셀의 새 색상을 결정합니다.


transparency number

투명도 수준을 조정합니다. 값 범위는 [0, 1]입니다.


grayscale boolean

그레이스케일 적용 여부를 지정합니다.

기본값은 false입니다.

모든 색상을 휘도에 따라 회색 음영으로 변환합니다.


다음 코드는 SpreadJS 워크시트에서 그림 도형에 각각의 서식 옵션을 적용하는 예제입니다.

// 흑백 설정
   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 });