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目錄的更改並重新編譯所有內容。