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

도형 스냅

SpreadJS에서는 snapMode 메서드를 사용하여 도형을 그리드라인 또는 워크시트 내 다른 도형의 가장자리에 맞춰 정렬, 드래그, 크기 조정할 수 있습니다.

도형은 워크시트의 수평 또는 수직 스냅 라인을 기준으로 그리드 또는 다른 도형에 정렬됩니다. 아래 이미지는 수직 스냅 라인을 보여줍니다:


도형에 스냅

워크시트 내 다른 도형의 가장자리와 정렬하려면 snapMode.shape 옵션을 사용할 수 있습니다. 도형을 수평 또는 수직 방향으로 이동할 때, 스냅 라인에 맞춰 정렬됩니다.


var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
// 현재 snap 모드 가져오기
var snap = spread.getActiveSheet().shapes.snapMode();
// 도형에 스냅 설정
spread.getActiveSheet().shapes.snapMode(GC.Spread.Sheets.Shapes.SnapMode.shape);

그리드에 스냅

워크시트의 가장 가까운 그리드 교차점(보이지 않더라도)에 도형을 정렬하려면 snapMode.grid 옵션을 사용할 수 있습니다. 도형을 수평 또는 수직 방향으로 이동할 때, 스냅 라인에 맞춰 정렬됩니다.

마우스로 드래그하는 대신 방향키(↑, ←, ↓, →)로 도형을 이동시킬 수도 있습니다.



var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
// 현재 snap 모드 가져오기
var snap = spread.getActiveSheet().shapes.snapMode();
// 그리드에 스냅 설정
spread.getActiveSheet().shapes.snapMode(GC.Spread.Sheets.Shapes.SnapMode.grid);

여러 도형도 snapMode 메서드를 통해 한 번에 스냅 설정할 수 있습니다.




snapMode.shape와 snapMode.grid 옵션을 함께 사용하면 도형을 그리드와 다른 도형 모두에 정렬할 수 있습니다.



var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
// 도형과 그리드 모두에 스냅 설정
spread.getActiveSheet().shapes.snapMode(GC.Spread.Sheets.Shapes.SnapMode.grid | GC.Spread.Sheets.Shapes.SnapMode.shape);