皆さんこんにちは！底辺プログラマーのヤスです！
今回はVue.jsにmxGraphを乗せてみたいと思います。
どなたかの参考になれば幸いです！
Contents
まずはmxGraphをインストール！
まず最初にnpmでmxGraphをインストールします。
|
1 |
npm install mxgraph |
これでnode_moduleフォルダにmxgraphフォルダが出来上がっているはずです。
ここは問題ないと思います！
うまくインストールできない方は一度uninstallコマンドを実行、もしくはnode_moduleフォルダを削除してからnpm install コマンドを実行してい見て下さい。
mxImageBasePath/mxBasePathを指定する
環境によってはここで躓く方もいるかもしれません。
mxGraphライブラリを使用する際にmxImageBasePathとmxBasePathを指定する必要があります。
mxGraphを使用する.vueファイルに以下のコードを記載します。
|
1 2 3 4 |
var mxgraph = require("mxgraph")({ mxImageBasePath: "./src/images", mxBasePath: "./src" }) |
パスの指定は以上です。では実際にmxGraphが使えるかどうか試してみましょう。
mxGraphでお絵かきする！
ではさっそく絵を書いてみましょう！
下記のコードを先ほどmxGraphのパスを指定したファイルに書いていきます。
とりあえずmountedの中に書いておけば問題ないと思います！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<template> <div id="app"> <div id="graphContainer"> </div> </div> </template> <script> var mxgraph = require("mxgraph")({ mxImageBasePath: "./src/images", mxBasePath: "./src" }) export default { name: 'App', }, mounted () { var container = document.getElementById('graphContainer') var graph = new mxgraph.mxGraph(container) var parent = graph.getDefaultParent() graph.getModel().beginUpdate() try { var v1 = graph.insertVertex(parent, 'aaa', 'Hello,', 0, 0, 80, 30) var v2 = graph.insertVertex(parent, 'bbb', 'World,', 200, 100, 80, 30) graph.insertEdge(parent, null, null, v1, v2) } finally { graph.getModel().endUpdate() } } } </script> |
すげーシンプルなシェイプを2つとそれを線で結んだ絵を書きました！
実際はこんな感じで表示されていればOKです！
無料のライブラリでここまで簡単に動かせるなんて。。。
制作してくれた方には感謝です！
カスタマイズについて
実際にどこまでのカスタムができるのかを知るためには公式のサンプルを見るのが早いです。
こちらのページに公式のサンプルがあるので是非ご覧下さい。
このページに載っていることは全て実現することができますが、
実はサンプルコードを見てみると意外とゴリゴリとコードを書いている部分が多いです。
実際にいろんなことを試してみることをオススメします。
もしかしたらこのブログで少しづつmxGraphの使い方を記事にするかもしれません。
もしご希望があればコメント欄で連絡ください。
まとめ
今回はVue.jsにmxGraphを乗せる方法について記事にしました。
公式ページが全て英語になっているので英語が苦手な方は少しハードルが高いかもしれません。でもGoogle先生に聞けば何となく英語が読める気になるので大丈夫です(笑)
現場でもかなりmxGraphでいろんなことを実現しています。
あまりmxGraphの日本語の記事がなかったのでこの記事を読んで
少しでも誰かの役にたてばいいなと思います。
今回の記事は以上となります。
最後まで読んで頂きありがとうございます！
