@rscc/rcanvas

v1.0.22

Published

4 months ago

웹 페이지에 임베드해서 사용할 수 있는 HTML5 캔버스 기반 판서/주석(annotation) 위젯입니다. 호스트 엘리먼트만 넘겨주면 자체 툴바·서브메뉴·컬러 피커까지 그 안에 그려 넣습니다. Vanilla JS로 작성되어 있으며 별도의 프레임워크 의존성이 없습니다.

0High
0Medium
0Low

vxxv123

r-canvas

Package: @rscc/rcanvas
Entry: dist/rCanvas.js (ES Module)
License: CC BY-NC-ND

주요 기능

펜 / 붓펜 / 형광펜 / 지우개
직선, 사각형, 원, 삼각형 도형 도구
텍스트 입력, 이미지 불러오기
선택 / 이동 / 8방향 리사이즈
Undo / Redo (전체 캔버스 스냅샷 기반)
색상·굵기·투명도 조절, 채우기 / 윤곽선 토글
내장 색상 피커 + 최근 사용 색상 5개 히스토리
CANVAS(래스터) ↔ SVG(벡터) 모드 전환
캡처 저장 (커스텀 save 핸들러로 교체 가능)
툴바 위치 4방향(EAST / WEST / SOUTH / NORTH) 배치
func 플래그로 버튼별 노출/비노출 제어

설치 & 빌드

npm install
npx webpack

webpack.config.js가 index.js를 엔트리로 받아 dist/rCanvas.js를 ES 모듈 한 파일로 산출합니다. SVG/PNG 등은 dist/images/로 복사되고, CSS는 style-loader로 런타임에 주입됩니다.

사용법

호스트 엘리먼트(예: <div id="base-element">)와 옵션 객체를 넘겨 인스턴스를 생성한 뒤, open()을 호출해서 위젯을 표시합니다.

import RCanvas from './dist/rCanvas.js'

const baseElement = document.querySelector('#base-element')

const setting = {
    direction: 'WEST',
    func: {
        undo: true, redo: true,
        pointer: true, selector: true,
        gatherLine: true, gatherStyle: true,
        new: true, image: true, fullimage: true,
        capture: true, minimize: true, text: true,
        pen: true, brush: true, highlighter: true, eraser: true,
        line: true, rect: true, circle: true, triangle: true,
        fill: true, border: true,
        color: true, weight: true, opacity: true,
    },
    btnGridCount: { sec1: 2, sec2: 2, sec3: 1, sec4: 2 },
    imgUrl: './',
    isTest: false,
}

const rCanvas = new RCanvas(baseElement, setting)

// 저장 동작을 커스터마이즈
rCanvas.customHandler = {
    save: (url) => console.log('CUSTOM SAVE HANDLER', url)
}

document.querySelector('#canvas-open-btn')
    .addEventListener('click', () => rCanvas.open())

전체 동작 예제는 examples/index.html + examples/main.js에서 확인할 수 있습니다. (예제는 빌드된 dist/rCanvas.js를 import 하므로 코드를 수정한 뒤에는 다시 webpack을 돌려야 합니다.)

API

`new RCanvas(baseElement, option)`

| 옵션 | 타입 | 설명 | |-------------------|----------|----------------------------------------------------------------------| | direction | string | 툴바 배치 위치. 'EAST' \| 'WEST' \| 'SOUTH' \| 'NORTH' (기본 'WEST') | | func | object | 버튼/기능별 활성화 플래그. 명시하지 않은 키는 자동으로 true로 채워짐 | | btnGridCount | object | 메뉴 섹션별 그리드 칸 수 (sec1–sec4) | | imgUrl | string | 이미지 베이스 경로 | | isTest | boolean | 테스트 모드 플래그 |

func에서 사용 가능한 키: undo, redo, pointer, selector, gatherLine, gatherStyle, new, image, fullimage, capture, minimize, text, pen, brush, highlighter, eraser, line, rect, circle, triangle, fill, border, color, weight, opacity.

플래그를 false로 두면 해당 버튼은 DOM에서 아예 빠집니다(숨김 처리가 아님).

인스턴스 메서드 / 프로퍼티

| 멤버 | 설명 | |--------------------------|----------------------------------------------------------------------| | open() | 위젯을 표시 | | close() | 위젯을 숨김 | | customHandler = {...} | 내부 핸들러 교체. 현재 지원: save(url) (등록되지 않은 키는 무시됨) | | mode | 'CANVAS' ↔ 'SVG' 전환 | | style | 펜 종류·색상·굵기·투명도·채우기·윤곽선 등 런타임 도구 상태 |

기본 저장 동작

customHandler.save를 지정하지 않으면 캔버스 내용을 toDataURL()로 추출해 board라는 이름으로 다운로드합니다.

디렉터리 구조

src/
  rCanvas.js          # 위젯 본체 (단일 클래스, 모든 도구·이벤트·undo/redo 포함)
  r-colorpicker.js    # 독립 사용 가능한 RColorPicker (rCanvas.js 내장 피커와는 별개)
  rQueue.js           # 컬러 히스토리에 쓰이는 고정 크기 큐
  rHtmlConverter.js   # HTML → SVG/이미지 변환 유틸
  consts/             # 상수 (정규식 등)
  lib/                # 공용 유틸
assets/
  css/                # 위젯 스타일시트 (style-loader로 주입)
  icon/               # 툴바 아이콘 (svg)
examples/             # 사용 예제 (브라우저로 직접 열어서 동작 확인)
dist/                 # webpack 산출물

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme