DrawerJs

Cajón

DrawerJS es un widget HTML5 que permite dibujar y escribir en elementos de lona HTML5. Los dispositivos móviles son totalmente compatibles.

Es un editor de lona WYSIWYG HYSIWYG personalizable para dibujar a mano alzada y crear bocetos con formas simples.

¿Qué es el cajón? ¿Cómo puedo usarlo?

Aquí encontrará más información sobre las funciones y las preguntas frecuentes a las preguntas frecuentes: los cajones

Y aquí encontrarás algunos ejemplos y puedes probarlo en vivo: Drawerjs en Github

Aquí encontrará una documentación detallada sobre el uso y su configuración: DrawerJS-Docs

Notas de lanzamiento

Aquí están las notas de lanzamiento de la implementación desde 2015: Notas de liberación de cajones

¿Contribuir?

Si desea contribuir o simplemente ayudar con las relaciones públicas, ¡contácteme!

¿Conoces nuestra otra biblioteca de JavaScript?

¡Echa un vistazo a nuestro cargador de imágenes ImagerJs!

Documentación:

Versiones de distribución

Opciones de configuración

Configuración del entorno de desarrollo

Archivos de código fuente y Descripción general del sistema

Descripción general de la arquitectura del código fuente

Versiones de complemento

Este complemento distribuye en dos versiones:

Complemento del editor de redactores

Podría integrarse en la página de la siguiente manera:

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

Para obtener información sobre cómo construir todo en la carpeta dist , consulte el desarrollo de desarrollo

Luego se puede proporcionar el nombre drawer a la configuración de Redactor en la sección 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
    }
});

Para un ejemplo de trabajo, consulte la carpeta demo .

Para obtener más información sobre la sección de configuración del cajón, consulte la configuración

Versión independiente

Podría integrarse en la página de la siguiente manera:

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

Para obtener información sobre cómo construir todo en la carpeta dist , consulte el desarrollo de desarrollo

Entonces el cajón podría agregarse a cualquier contenedor HTML como este:

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

Donde #some_id es cualquier ID de elemento DOM.

Para un ejemplo de trabajo, consulte examples/standalone .

Para obtener más información sobre la sección de configuración del cajón, consulte la configuración

Configuración

Cuando termine con la configuración del entorno de desarrollo, tendrá una carpeta DIST con todo construido. Busque la carpeta docs , busque index.html y ábrala.

Entonces el siguiente enlace funcionará.

Por favor, mire la documentación de Canvaselement para obtener la descripción de opciones.

Desarrollo de cómo hacerlo:

Requisitos: node.js, npm, git

npm install para instalar todas las dependencias de NPM/Bower.

npm start a compilar todo a la carpeta dist .

Esto también observará cambios en el directorio src y recompilará todo.