DrawerJs

drawerjs

Drawerjs是一个HTML5小部件，允许在HTML5画布元素上绘图和写作。移动设备得到充分支持。

它是可自定义的Wysiwyg HTML帆布编辑器，用于徒手绘图，并用简单的形状创建草图。

什么是drawerjs？我该如何使用它？

在这里，您将找到有关功能和简短常见问题的更多信息：drawerjs

在这里您会找到一些示例，您可以实时测试它：github上的drawerjs

在这里，您将找到有关用法及其配置的详细文档：drawerjs-docs

发行说明

以下是自2015年以来部署的发行说明：drawerjs-release笔记

贡献？

如果您想贡献或只是帮助PR，请与我联系！

您知道我们的其他JavaScript库吗？

查看我们的Imager上传器Imagerjs！

文档：

分销版本

配置选项

开发环境设置

源代码文件和构建系统概述

源代码体系结构概述

插件版本

该插件分别以两个版本分发：

编辑器编辑器插件

可以嵌入到页面上，如下所示：

 <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文件夹的信息，请参阅开发方法

然后，可以将drawer名称提供给Relector的配置到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
    }
});

有关工作示例，请参阅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文件夹。

有关抽屉配置部分的更多信息，请参阅配置

配置

完成设置开发环境时，您将拥有DIST文件夹，并构建所有内容。在那里查找docs文件夹，查找index.html并打开它。

那么下面的链接将起作用。

请查看CanvasElement文档以获取选项描述。

开发方法：

要求：node.js，npm，git

npm install以安装所有NPM/Bower依赖关系。

npm start将所有内容编译到dist文件夹。

这也将注意src目录的更改并重新编译所有内容。