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

도형 그룹화

SpreadJS는 워크시트에 그룹 도형을 추가하고 사용자 정의할 수 있는 기능을 제공합니다.

그룹 도형은 특히 유사한 종류의 작업(예: 두 개 이상의 도형에 동일한 스타일 추가, 함께 회전 또는 이동 등)을 빠르고 효율적으로 통합하여 관리하고 전체 실행 과정을 최적화해야 할 때 유용합니다.

이 기능은 상당한 시간과 노력을 절약할 수 있을 뿐 아니라, 모든 도형에 대해 원하는 일관성을 유지하는 데도 도움이 됩니다.

예제

예를 들어, 워크시트에 삽입된 두 개 이상의 도형에 동일한 도형 채우기 효과를 적용하거나 단순히 회전 또는 이동을 하고자 할 때, 하나씩 각각의 도형에 스타일을 적용하는 방법이 있을 수 있습니다. 그러나 이러한 작업은 번거롭고 시간이 오래 걸릴 수 있습니다. 대신, 워크시트의 모든 도형을 그룹화한 후 그룹 도형에 채우기 효과나 회전을 적용하면 됩니다.

아래는 그룹 도형의 예시 스크린샷입니다.




그룹화된 도형은 언제든지 그룹 해제를 할 수도 있습니다.

다음 코드는 워크시트에 그룹 도형을 추가하는 방법을 보여줍니다:

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.isoscelesTriangle,
  150, 100, 100, 100);
  var shape2 = sheet.shapes.add
  ("myShape2", GC.Spread.Sheets.Shapes.AutoShapeType.oval,
  300, 100, 100, 100);               

  // 도형 그룹화
  var groupShape = sheet.shapes.group([shape1, shape2]);
  groupShape.isSelected(true);
  
  // 그룹 도형 회전
  groupShape.rotate(340);
  // 그룹 해제를 원할 경우 다음 코드를 사용할 수 있음
  // sheet.shapes.ungroup(groupShape);
};

참고 : SpreadJS에서 그룹 도형을 통합할 때 다음과 같은 시나리오는 지원되지 않습니다:

  • 그룹 도형의 경우 도형 다중 선택 동작만 지원됩니다.

  • 그 외의 모든 UI 동작은 단일 도형만 지원합니다.

  • 그룹 도형은 사용자 지정 여백을 지원하지 않습니다.