DrawerJs

Laci

DrawerJS adalah widget HTML5 yang memungkinkan menggambar dan menulis pada elemen kanvas HTML5. Perangkat seluler sepenuhnya didukung.

Ini adalah editor Wysiwyg HTML Canvas yang dapat disesuaikan untuk menggambar tangan bebas dan membuat sketsa dengan bentuk sederhana.

Apa itu laci? Bagaimana cara menggunakannya?

Di sini Anda akan menemukan lebih banyak informasi tentang fitur dan FAQ pendek: laci

Dan di sini Anda akan menemukan beberapa contoh dan Anda dapat mengujinya secara langsung: laci di github

Di sini Anda akan menemukan dokumentasi terperinci tentang penggunaan dan konfigurasinya: laci-laci-docs

Catatan Rilis

Berikut adalah catatan rilis dari penempatan sejak 2015: Laci-Release Notes

Menyumbang?

Jika Anda ingin berkontribusi atau hanya membantu dengan PR, silakan hubungi saya!

Apakah Anda tahu perpustakaan JavaScript kami yang lain?

Lihat imagerer Imagerjs Imager kami!

Dokumentasi:

Versi distribusi

Opsi Konfigurasi

Pengaturan Lingkungan Pengembangan

File kode sumber dan membangun ikhtisar sistem

Tinjauan Arsitektur Kode Sumber

Versi plugin

Plugin ini mendistribusikan dalam dua versi:

Plugin Editor Redactor

Bisa tertanam ke halaman sebagai berikut:

 <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>

Untuk informasi tentang cara membangun semuanya ke folder dist silakan lihat pengembangan cara

Kemudian nama drawer dapat disediakan untuk redactor's config ke bagian plugins :

 $('.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
    }
});

Untuk contoh yang berfungsi, silakan lihat folder demo .

Untuk informasi lebih lanjut tentang bagian konfigurasi laci silakan lihat konfigurasi

Versi mandiri

Bisa tertanam ke halaman sebagai berikut:

 <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>

Untuk informasi tentang cara membangun semuanya ke folder dist silakan lihat pengembangan cara

Kemudian laci dapat ditambahkan ke wadah HTML seperti ini:

 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();

Di mana #some_id adalah ID elemen dom.

Untuk contoh yang berfungsi, silakan lihat examples/standalone .

Untuk informasi lebih lanjut tentang bagian konfigurasi laci silakan lihat konfigurasi

Konfigurasi

Saat Anda selesai dengan pengaturan lingkungan pengembangan, Anda akan memiliki folder dist dengan semuanya dibangun. Cari di sana untuk folder docs , temukan index.html dan buka.

Maka tautan di bawah ini akan berfungsi.

Silakan lihat dokumentasi CanvasElement untuk deskripsi opsi.

Pengembangan How-to:

Persyaratan: node.js, npm, git

npm install untuk menginstal semua dependensi NPM/Bower.

npm start menyusun semuanya ke folder dist .

Ini juga akan menyaksikan perubahan dalam direktori src dan mengkompilasi ulang semuanya.