! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

Offset 관련 좌표 구하는 법 > Q&A | 토론

본문 바로가기

ReactJS Offset 관련 좌표 구하는 법

페이지 정보

작성자 yhs1997 작성일 2023-03-15 10:56 조회 767회 댓글 0건
제품 버전 : 16

본문

안녕하세요 
Cell의 좌표값 (x, y) 값을 구하는 방법이 있을까요 ?

sheet.shapes.addPictureShape 메소드를 통해 이미지를 삽입하려고 하는데, 넣고자하는 셀이 동적으로 바뀌어서

좌표를 얻어서 해당 셀에 넣으려고 합니다.

  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

2 답변

ReactJS Re: Offset 관련 좌표 구하는 법

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 GCK다이애나 작성일 2023-03-16 10:53 댓글 2건

본문

안녕하세요. 그레이프시티입니다.


getCellRect 메서드를 이용하여 특정 위치의 셀에 대한 x 및 y 좌표 값을 가져올 수 있습니다.

이때, 가져온 x 및 y 좌표 값은 셀의 왼쪽 상단 모서리를 기준으로 계산된 값임을 참고해 주시기 바랍니다.

아래에 샘플 및 도움말 문서를 공유해드리니 참고해 보시기 바랍니다.

샘플의 "개발자 도구(F12)>Console 탭"에서 B2 셀에 대한 x 및 y 좌표 값과 셀의 너비 및 높이 값을 확인해 보실 수 있습니다.


- getCellRect 도움말 문서


감사합니다.

그레이프시티 드림

댓글목록

삭제된 댓글

yhs1997 작성일

삭제된 댓글 입니다.

yhs1997님의 댓글

yhs1997 작성일

해당 내용 확인했습니다.
그런데 getCellRect 로 얻은 좌표값이 왼쪽 상단 모서리 기준이라고 하셨는데 addPictureShapes 메소드에 해당 x,y 좌표로 이미지를 넣게 되면 그 셀에 이미지가 생성이 되는 것이 아닌 조금 더 좌표가 이동된 곳에서 생성이 됩니다.

```

const cell = sheet.getCellRect(1, 1);
sheet.shapes.addPictureShape('test', 'image', cell.x, cell.y, 100, 81);
```

감사합니다.

ReactJS Re: Offset 관련 좌표 구하는 법

추천0 이 글을 추천하셨습니다 비추천0 채택채택

페이지 정보

작성자 GCK다이애나 작성일 2023-03-16 17:21 댓글 0건

본문

안녕하세요. 그레이프시티입니다.


먼저, 답변이 조금 부족했던 것 같아 죄송하다는 말씀과 함께 추가 설명 드립니다.


getCellRect 메서드를 통해 셀의 x 및 y 좌표 값 계산 시, 기준이 되는 점(0,0)은 Workbook 인스턴스를 호스팅하는 div 요소의 가장 왼쪽 상단 모서리입니다.

460aa9cdd901bf3d13b81a4d40c29986_1678954482_8456.png

또한, addPictureShape 메서드를 통해 이미지 도형을 추가하는 경우, 이미지 도형의 위치는 시트의 viewport 영역의 가장 왼쪽 상단 모서리를 기준으로 지정됩니다.

460aa9cdd901bf3d13b81a4d40c29986_1678954498_2001.png

따라서, getCellRect 메서드를 통해 가져온 셀의 x 및 y 좌표 값으로 이미지 도형이 추가된 경우, x 좌표는 행 헤더의 너비 만큼, y 좌표는 열 헤더의 높이 만큼의 편차를 가지게 됩니다. 셀의 가장 왼쪽 상단 모서리를 기준으로 이미지를 추가하려면 getCellRect 메서드를 통해 얻은 셀의 좌표 값에서 각 편차를 뺀 값을 이미지 도형의 위치 값으로 지정하시면 됩니다.

이때, 행 헤더의 너비와 열 헤더의 높이는 다음과 같은 코드를 이용하여 구할 수 있습니다.

  var rowHeader_width = sheet.getColumnWidth(0,GC.Spread.Sheets.SheetArea.rowHeader); // 열 헤더의 너비
  var colHeadder_Height = sheet.getRowHeight(0,GC.Spread.Sheets.SheetArea.colHeader); // 행 헤더의 높이


추가적으로, 위와 같이 좌표 편차를 조정하여 이미지를 추가하더라도 이미지가 추가된 이후에, 셀의 너비 혹은 높이 변경 시, 변경된 정도에 따라 이미지의 위치와 크기 또한 변경됩니다.

하여 이미지가 위치한 셀의 너비 혹은 높이가 변경되더라도 이미지의 위치와 크기를 유지하시려면 dynamicMove 혹은 dynamicSize 속성을 false 로 지정하여 동적으로 변경되는 이미지의 위치 및 크기를 고정하시면 됩니다.

아래에 샘플 및 도움말 문서를 공유해 드리오니 참고해 보시기 바랍니다.


- getColumnWidth 도움말 문서

- getRowHeight 도움말 문서

- SheetArea Enumeration 도움말 문서

- dynamicMove 도움말 문서

- dynamicSize 도움말 문서


감사합니다.

그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.