연결선 도형

연결선 도형은 선, 화살표 및 미리 정의된 연결점을 사용하여 두 개 이상의 도형을 연결하는 데 사용됩니다. SpreadJS는 워크시트에서 연결선 도형을 만들고 사용자 지정할 수 있는 기본 제공 기능을 제공합니다.

연결선을 사용하여 다이어그램 및 흐름 기반 레이아웃에서 도형 간의 관계를 시각적으로 나타낼 수 있습니다.

연결선 유형

SpreadJS는 다음과 같은 연결선 유형을 지원합니다.

직선 연결선: 직선을 사용하여 도형을 연결합니다.
꺾인 연결선: 꺾인 선분을 사용하여 도형을 연결합니다.
곡선 연결선: 곡선을 사용하여 도형을 연결합니다.

연결선에 적용되는 화살표 스타일도 다음과 같이 사용자 지정할 수 있습니다.

일반 화살표(화살촉 없음)
기본 화살표(양쪽 끝이 뾰족함)
열린 화살표
스텔스 화살표
타원형 화살표
다이아몬드 화살표

다음 이미지는 연결선 도형을 보여줍니다.

image-20260310.bfd676.png

연결 모델

연결선 도형은 정의된 연결점을 통해 도형에 연결됩니다.

각 연결선에는 다음이 포함됩니다.

시작 연결점
끝 연결점

이러한 끝점은 특정 도형 및 특정 연결점 인덱스에 바인딩할 수 있습니다.

connectorShape.startConnector({ name: shape1.name(), index: 3 });
connectorShape.endConnector({ name: shape2.name(), index: 2 });

연결선 상호 작용 및 맞춤 동작

SpreadJS는 워크시트에서 연결선을 사용할 때 기본 제공 상호 작용 로직을 제공합니다.

끝점 표시

연결선을 선택하면:
- 연결된 끝점은 채워진 녹색 원으로 표시됩니다.
- 연결되지 않은 끝점은 흰색 원으로 표시됩니다.
끄는 동안 시각적 방해를 줄이기 위해 끝점 원이 일시적으로 숨겨집니다.
끌기가 끝나면 끝점 표시가 다시 나타납니다.

자동 맞춤

연결선 끝점을 유효한 연결점 가까이로 끌면:

연결선이 가장 가까운 연결점에 자동으로 맞춰집니다.
이를 통해 연결 정확도와 사용자 작업 효율성을 높일 수 있습니다.

맞춰지는 동안:

대상 연결점이 녹색 광선 효과로 강조 표시되어 시각적 피드백을 제공합니다.
연결선 경로가 실시간으로 미리 표시되므로 마우스를 놓기 전에 최종 경로를 확인할 수 있습니다.

connector-20260309.42577d.gif

강조 표시 색상과 반경은 현재 고정되어 있으며 사용자 지정할 수 없습니다.

예제: 연결선 도형 추가

다음 예제에서는 두 도형 사이에 연결선을 추가하는 방법을 보여줍니다.

// Adding the connector shape to the worksheet
window.onload = function ()
{
   var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
   var sheet = spread.getActiveSheet();

   // Add two shapes
   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);

   // Add connector
   var connectorShape = sheet.shapes.addConnector(
       "myConnectorShape",
       GC.Spread.Sheets.Shapes.ConnectorType.straight,
       250, 150, 700, 150
   );

   // Set style
   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);

   // Bind connection points
   connectorShape.startConnector({ name: shape1.name(), index: 3 });
   connectorShape.endConnector({ name: shape2.name(), index: 2 });
};

제한 사항

SpreadJS는 다음 시나리오를 지원하지 않습니다.

자유형 연결선 경로 지정은 지원되지 않습니다.
연결선 레이아웃은 Excel과 다를 수 있습니다.
BentArrow 연결선을 사용하는 경우 Excel에서는 일부 영역이 잘려 표시될 수 있지만 SpreadJS에서는 채우기 렌더링이 유지됩니다.
특정 도형(Balloon, RectangularCallout, OvalCallout, CloudCallout 등)의 크기를 조정하면 일부가 잘려 표시될 수 있습니다.
Cube 및 DiagonalStrip과 같은 도형에서 조절점을 극단적인 값으로 조정하면 예상치 못한 결과가 발생할 수 있습니다.