DrawerJs

Gavetas

Drawerjs é um widget HTML5 que permite desenhar e gravar nos elementos da tela HTML5. Os dispositivos móveis são totalmente suportados.

É um editor personalizável do Wysiwyg HTML Canvas para desenho à mão livre e criando esboços com formas simples.

O que é gaveta? Como posso usá -lo?

Aqui você encontrará mais informações sobre os recursos e uma curta FAQ: gavetas

E aqui você encontrará alguns exemplos e poderá testá -lo ao vivo: gavetas no github

Aqui você encontrará uma documentação detalhada sobre o uso e sua configuração: gavetas-docs

Notas de liberação

Aqui estão as notas de lançamento da implantação desde 2015: Notas de liberação de gavetas

Contribuir?

Se você deseja contribuir ou apenas ajudar com o PR, entre em contato comigo!

Você conhece nossa outra biblioteca JavaScript?

Confira o nosso Imager Uploader Imagerjs!

Documentação:

Versões de distribuição

Opções de configuração

Configuração do ambiente de desenvolvimento

Arquivos de código -fonte e criação de visão geral do sistema

Visão geral da arquitetura do código -fonte

Versões do plug -in

Este plug -in distribui em duas versões:

Plugin do editor de redatores

Pode ser incorporado à página da seguinte maneira:

 <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 obter informações sobre como construir tudo para a pasta dist

Em seguida, o nome drawer pode ser fornecido à configuração do redator na seção 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 o exemplo de trabalho, consulte a pasta demo .

Para obter mais informações sobre a seção de configuração de gavetas, consulte Configuração

Versão independente

Pode ser incorporado à página da seguinte maneira:

 <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 obter informações sobre como construir tudo para a pasta dist

Em seguida, a gaveta pode ser anexada a qualquer contêiner 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();

Onde #some_id é qualquer ID do elemento DOM.

Para exemplo de trabalho, consulte examples/standalone .

Para obter mais informações sobre a seção de configuração de gavetas, consulte Configuração

Configuração

Quando você terminar com a configuração do ambiente de desenvolvimento, você terá pasta Dist com tudo o que é construído. Procure a docs Docs, encontre index.html e abra.

Então o link abaixo funcionará.

Por favor, consulte a documentação do CanvaSelement para obter a descrição das opções.

Desenvolvimento de instruções:

Requisitos: Node.js, NPM, Git

npm install para instalar todas as dependências NPM/Bower.

npm start a compilar tudo para a pasta dist .

Isso também deve procurar mudanças no diretório src e recompilar tudo.