[]
        
(Showing Draft Content)

연결선 도형

SpreadJS는 도형 간에 선, 화살표, 연결점을 사용하여 두 개 이상의 도형을 연결할 수 있는 연결선 도형을 지원합니다. 연결선 도형을 통해 워크시트 내에서 도형 간의 흐름이나 관계를 명확하게 표현할 수 있습니다.

워크시트에 연결선 도형을 추가할 때는 다음과 같은 다양한 화살표 스타일을 사용할 수 있습니다: 일반 화살표(끝이 뾰족하지 않음), 기본 화살표(양쪽이 뾰족함), 열린 화살표, 스텔스 화살표, 타원형 화살표, 마름모형 화살표 등.

기본적으로 연결선 도형은 다음 두 가지 유형으로 구분됩니다:

  1. 직선 연결선 도형(Straight connector shape): 두 개 이상의 도형을 직선으로 연결합니다.

  2. 꺾은선 연결선 도형(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