[]
SpreadJS는 도형 간에 선, 화살표, 연결점을 사용하여 두 개 이상의 도형을 연결할 수 있는 연결선 도형을 지원합니다. 연결선 도형을 통해 워크시트 내에서 도형 간의 흐름이나 관계를 명확하게 표현할 수 있습니다.
워크시트에 연결선 도형을 추가할 때는 다음과 같은 다양한 화살표 스타일을 사용할 수 있습니다: 일반 화살표(끝이 뾰족하지 않음), 기본 화살표(양쪽이 뾰족함), 열린 화살표, 스텔스 화살표, 타원형 화살표, 마름모형 화살표 등.
기본적으로 연결선 도형은 다음 두 가지 유형으로 구분됩니다:
직선 연결선 도형(Straight connector shape): 두 개 이상의 도형을 직선으로 연결합니다.
꺾은선 연결선 도형(Elbow connector shape): 두 개 이상의 도형을 꺾인 선으로 연결합니다.
아래 스크린샷은 사각형과 원형을 연결선 도형으로 연결한 예시입니다.
다음은 워크시트에 연결선 도형을 추가하는 코드 샘플입니다:
// 워크시트에 연결선 도형 추가
window.onload = function ()
{
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();
// 연결선 도형을 연결할 두 개의 도형 추가
var shape1 = sheet.shapes.add("myShape1", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 150, 100, 100, 100);
var shape2 = sheet.shapes.add("myShape2", GC.Spread.Sheets.Shapes.AutoShapeType.oval, 700, 100, 100, 100);
// 두 도형을 연결할 직선 연결선 도형 추가
var connectorShape = sheet.shapes.addConnector("myConnectorShape", GC.Spread.Sheets.Shapes.ConnectorType.straight, 250, 150, 700, 150);
// 연결선 도형의 스타일 설정
var oldStyle = connectorShape.style();
oldStyle.line.color = 'red';
oldStyle.line.lineStyle = GC.Spread.Sheets.Shapes.PresetLineDashStyle.dot;
oldStyle.line.width = 10;
oldStyle.line.capType = GC.Spread.Sheets.Shapes.LineCapStyle.square;
oldStyle.line.joinType = GC.Spread.Sheets.Shapes.LineJoinStyle.miter;
oldStyle.line.beginArrowheadStyle = GC.Spread.Sheets.Shapes.ArrowheadStyle.triangle;
oldStyle.line.beginArrowheadWidth = GC.Spread.Sheets.Shapes.ArrowheadWidth.narrow;
oldStyle.line.beginArrowheadLength = GC.Spread.Sheets.Shapes.ArrowheadLength.short;
oldStyle.line.endArrowheadStyle = GC.Spread.Sheets.Shapes.ArrowheadStyle.triangle;
oldStyle.line.endArrowheadWidth = GC.Spread.Sheets.Shapes.ArrowheadWidth.medium;
oldStyle.line.endArrowheadLength = GC.Spread.Sheets.Shapes.ArrowheadLength.medium;
connectorShape.style(oldStyle);
// 연결선 시작점 연결 설정
var startConnector = connectorShape.startConnector();
connectorShape.startConnector({ name: shape1.name(), index: 3 });
// 연결선 끝점 연결 설정
var endConnector = connectorShape.endConnector();
connectorShape.endConnector({ name: shape2.name(), index: 2 });
};
참고: SpreadJS에서 연결선 도형을 사용할 때 다음과 같은 제한사항이 있습니다:
곡선 및 자유형 연결선 도형은 지원되지 않습니다. Excel과 비교했을 때 연결선 도형의 배치 레이아웃이 다르게 보일 수 있습니다. 굽은 화살표로 도형을 연결할 경우 Excel에서는 채워진 형태의 결과를 표시할 수 있지만, SpreadJS에서는 해당 영역이 채워지지 않습니다.
풍선, 직사각형 설명선, 타원형 설명선, 구름 설명선 등의 일부 도형은 크기 조정 시 잘림 현상이 발생할 수 있으며, 정육면체나 대각선 줄무늬 등은 포인트가 최대값으로 조정될 경우 예기치 않은 결과를 나타낼 수 있습니다.
Ask ChatGPT