DrawerJs

Drawerjs

Drawerjs는 HTML5 캔버스 요소를 그리기 및 쓸 수있는 HTML5 위젯입니다. 모바일 장치는 완전히 지원됩니다.

프리 핸드 드로잉 및 간단한 모양으로 스케치를 만드는 사용자 정의 가능한 wysiwyg html 캔버스 편집기입니다.

Drawerjs는 무엇입니까? 어떻게 사용할 수 있습니까?

여기에서는 기능과 짧은 FAQ : Drawerjs에 대한 더 많은 정보를 찾을 수 있습니다.

그리고 여기에서 몇 가지 예를 찾을 수 있으며 라이브를 테스트 할 수 있습니다 : Github의 Drawerjs

여기에는 사용법 및 구성에 대한 자세한 설명서가 있습니다 : DrawerJS-Docs

릴리스 노트

다음은 2015 년 이후 배치의 릴리스 노트입니다. DrawerJS 릴리스 노트

기여하다?

PR에 기여하거나 도움을주고 싶다면 저에게 연락하십시오!

다른 JavaScript 라이브러리를 알고 있습니까?

이미저 업 로더 이미지를 확인하십시오!

선적 서류 비치:

배포 버전

구성 옵션

개발 환경 설정

소스 코드 파일 및 빌드 시스템 개요

소스 코드 아키텍처 개요

플러그인 버전

이 플러그인은 두 가지 버전으로 배포됩니다.

편집자 편집기 플러그인

다음과 같이 페이지에 포함시킬 수 있습니다.

 <link rel="stylesheet" href="dist/drawerJs.css"/>

<script src="dist/drawerJs.redactor.js"></script>

<!-- or minified version: -->

<script src="dist/drawerJs.redactor.min.js"></script>

dist 폴더에 모든 것을 빌드하는 방법에 대한 자세한 내용은 개발 방법을 참조하십시오.

그런 다음 plugins 섹션으로 편집자 구성에 drawer 이름을 제공 할 수 있습니다.

 $('.redactor').redactor({
    buttons: [
        'bold',
        'html',
        'image'
    ],
    plugins: [
        'video',
        'drawer', // << here we specify that redactor should load this plugin
        'opensave',
        'contexttoolbar'
    ],
    drawer: {
        // drawer config section here
        activeColor: '#19A6FD' // default drawing color
    }
});

작업 예를 보려면 demo 폴더를 참조하십시오.

서랍 구성 섹션에 대한 자세한 내용은 구성을 참조하십시오.

독립형 버전

다음과 같이 페이지에 포함시킬 수 있습니다.

 <link rel="stylesheet" href="dist/drawerJs.css"/>

<script src="dist/drawerJs.standalone.js"></script>

<!-- or minified version: -->

<script src="dist/drawerJs.standalone.min.js"></script>

dist 폴더에 모든 것을 빌드하는 방법에 대한 자세한 내용은 개발 방법을 참조하십시오.

그런 다음 서랍을 다음과 같은 HTML 컨테이너에 추가 할 수 있습니다.

 var canvas = new DrawerJs.Drawer(null, {
    // drawer config section here
    activeColor: '#19A6FD' // default drawing color
}, 600, 600); // height and width of drawer will be 600x600

$('#some_id').append(canvas.getHtml());
canvas.onInsert();

여기서 #some_id 는 모든 dom 요소 ID입니다.

작업 예제는 examples/standalone 폴더를 참조하십시오.

서랍 구성 섹션에 대한 자세한 내용은 구성을 참조하십시오.

구성

개발 환경 설정을 마치면 모든 것을 쌓아 놓은 폴더가 있습니다. docs 폴더를 찾아서 index.html 찾아서 엽니 다.

아래 링크가 작동합니다.

옵션 설명은 Canvaselement 문서를 참조하십시오.

개발 방법 :

요구 사항 : node.js, npm, git

모든 NPM/Bower 종속성을 설치하려면 npm install .

npm start dist

이것은 또한 src 디렉토리의 변경 사항을 감시하고 모든 것을 다시 컴파일 할 것입니다.