Skip to content

3. Advanced Method options

Jump to bottom
hyeongi-park edited this page Jul 27, 2026 · 1 revision

addMark(square, type, options)

addMark는 createSvgElement를 통해 여러가지 마크를 체스판 위에 구현하는 기능입니다.

모양은 type으로 지정 가능하며 'circle', 'square', 'cross' 3종류가 있습니다. 세 게의 type은 공통적으로 color, opacity, size, strokeWidth, fill의 5개의 옵션을 가집니다. 옵션 지정의 순서는 상관 없으며, 모든 옵션들은 이미 기본값이 지정되어 있으므로 몇몇 옵션을 생략하더라도 괜찮습니다.

color 옵션은 마크 바깥 stroke의 색깔을 지정하며 기본적으로 # $\color{#6d9f58}{6d9f58}$ 색깔을 사용합니다.

opacity 옵션은 stroke와 fill의 투명도를 지정하며 기본적으로 0.75로 설정되어 있습니다.

size 옵션은 마크의 크기를 지정하며 기본적으로 체스판 한 칸의 0.92배가 기본값이며 이는 기본 보드(400px)에서 52px 정도 되는 크기입니다.

strokeWidth는 stroke 두께를 지정하며 기본적으로는 체스판 한 칸의 0.05배가 기본값이며 최솟값은 2px입니다.

fill은 마크 안쪽 내부 색깔을 지정하며 기본적으로 none 값을 가집니다. type = 'cross' 일 때는 색갈을 칠할 수 없어 none이 기본값입니다.

기본적으로 우클릭 시 나오는 마크의 설정을 바꾸고 싶다면 toggleMark 함수에서 타입과 옵션들을 조정해주면 됩니다.

// Initialize Chessboard widget
var board = Chessboard('myBoard', 'start');

// Adds a circle mark onto square d4
board.addMark('d4', 'circle', { color: '#000000', fill:  });

addArrow(fromsquare, tosquare, options)

  • Arguments: fromsquare (String), tosquare (String), options (Object, optional)
  • Description: Draws an arrow overlay from one square to another using a non-blocking SVG layer (pointer-events: none). Supports options: color, opacity, width, and headSize. Automatically maintains correct coordinates after flip() and resize().
  • Example: board.addArrow('e2', 'e4', { color: 'blue', width: 4 })

highlightSquare(square, styleOptions)

  • Arguments: square (String), styleOptions (Object, optional)
  • Description: Highlights a specific square on the board. Supports options such as backgroundColor, border, opacity, and className. Multiple simultaneous square-specific styles are supported and persist across redraws (resize, flip, orientation redraw, etc.).
  • Example: board.highlightSquare('e4', { backgroundColor: 'yellow' })

옵션 설정할 때 rem 단위로 해야지 px 단위로 하면 다른 브라우저에서 다른 크기로 보이므로 권장하지 않는다.

Clone this wiki locally