[해피CGI][cgimall] ruler-js를 사용하여 웹 페이지에 사용자 정의 가능한 측정 눈금자 추가

- 소개

ruler-js는 여러 단위와 인터랙티브 십자선을 지원하는 가로 및 세로 눈금자를 생성하는 작은 JavaScript 플러그인입니다. 독립형 JavaScript 라이브러리와 jQuery 플러그인으로 모두 사용할 수 있습니다.

이 플러그인은 DPI 계산을 자동으로 처리하고 추가 구성 없이 창 크기 조절에 맞춰 조정됩니다. 디자인 도구 개발, 인터페이스 프로토타입 제작, 픽셀 단위의 정밀한 치수가 중요한 복잡한 레이아웃 디버깅을 수행하는 개발자에게 이상적입니다.

- 특징

- 다중 단위 지원 : 구성 가능한 소수점 정밀도로 인치, 센티미터, 밀리미터 및 픽셀 단위로 측정합니다.

- 대화형 크로스헤어 시스템 : 사용자 정의 가능한 색상과 선 스타일을 사용하여 마우스 움직임을 추적하는 실시간 크로스헤어 선을 표시합니다.

- 실시간 위치 피드백 : 뷰포트를 가로질러 이동할 때 동적으로 업데이트되는 떠 있는 상자에 현재 마우스 좌표를 표시합니다 .

- 자동 DPI 감지 : 브라우저 렌더링을 기반으로 인치당 픽셀을 계산하여 실제 측정값을 정확하게 근사합니다.

- 사용자 정의 가능한 모양 : 애플리케이션 디자인에 맞게 눈금자 크기, 눈금 색상, 조준선 스타일, 마우스 위치 상자 스타일을 구성합니다.

- 반응형 디자인 : 창 크기가 조절되면 눈금 표시를 자동으로 다시 계산하고 다시 그립니다.

 

- 라이센스

MIT





- 사용 방법


1. 소스 파일을 다운로드하고 문서에 ruler-js 라이브러리를 로드합니다.

2. 정적 Ruler.create()메서드를 호출하고 컨테이너 요소와 옵션 객체를 전달하여 눈금자를 만듭니다.

3. 다음 구성 옵션을 전달하여 눈금자를 구성합니다.

• vRuleSize: 세로 눈금자의 너비를 픽셀 단위로 설정합니다.
• hRuleSize: 가로 눈금자의 높이를 픽셀 단위로 설정합니다.
• showCrosshair: 마우스를 따라가는 조준선을 전환하는 부울( true또는 )입니다.false
• showMousePos: 마우스의 x/y 좌표를 표시하는 떠 있는 상자를 토글하는 부울( true또는 )입니다.false
• tickColor: 눈금자의 눈금 표시 색상을 정의하는 문자열(예: "#323232").
• crosshairColor: 조준선의 색상을 정의하는 문자열입니다.
• crosshairStyle: 크로스헤어의 선 스타일을 정의하는 문자열(예: "solid", "dotted", "dashed").
• mouseBoxBg: 마우스 위치 상자의 배경색을 정의하는 문자열입니다.
• mouseBoxColor: 마우스 위치 상자의 텍스트 색상을 정의하는 문자열입니다.
• unit: 측정 단위를 설정하는 문자열입니다. "in", "cm", "mm", 또는 를 사용할 수 있습니다 "px".
• unitPrecision: 표시된 측정값의 소수점 정밀도를 설정하는 숫자입니다.

 

4. API 메소드.

 

바닐라 자바스크립트

• Ruler.create(container, options): 지정된 containerDOM 요소 내에서 눈금자를 초기화하고 렌더링합니다. options매개변수는 위에 나열된 구성 옵션 중 하나를 가진 객체입니다.
• Ruler.clear(container): 지정된 .에서 눈금자, 관련 DOM 요소 및 이벤트 리스너를 제거합니다 container.

제이쿼리

• .Ruler("create", options): jQuery의 create 메서드와 동일합니다. jQuery 객체(예: $("#rulerContainer").Ruler("create", {...}))에서 호출합니다.
• .Ruler("clear"): jQuery의 clear 메서드와 동일합니다. 호출된 요소에서 눈금자를 제거합니다.

- 작동 화면