DrawerJs

引き出し

Drawerjsは、HTML5キャンバス要素の描画と書き込みを可能にするHTML5ウィジェットです。モバイルデバイスは完全にサポートされています。

これは、シンプルな形状のスケッチを描画して作成するためのカスタマイズ可能なwysiwyg htmlキャンバスエディターです。

引き出しとは何ですか？どうすれば使用できますか？

ここでは、機能に関する情報と短いFAQについての情報を見つけることができます。

そして、ここでいくつかの例を見つけて、あなたはそれをライブでテストすることができます：githubの引き出し

ここでは、使用法とその構成に関する詳細なドキュメントがあります：drawerjs-docs

ノートをリリースします

2015年以降の展開のリリースノートは次のとおりです。

貢献する？

貢献したい場合、またはPRを手伝いたい場合は、私に連絡してください！

他のJavaScriptライブラリを知っていますか？

Imager Uploader Imagerjsをご覧ください！

ドキュメント：

配布バージョン

構成オプション

開発環境のセットアップ

ソースコードファイルとシステムの概要を構築します

ソースコードアーキテクチャの概要

プラグインバージョン

このプラグインは、2つのバージョンに分配されます。

編集者エディタープラグイン

次のようにページに埋め込むことができます。

 <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名を編集者の設定に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ディレクトリの変更を監視し、すべてを再コンパイルします。