JointJS - 多彩な図を描けるJavaScriptライブラリ
Web上での表現力を向上させるためのライブラリが多数存在します。多くはグラフを描くものであったり、より複雑なチャートを描くものです。さらにWebGLを使ったり、Canvasに複雑な描画を行うものもあります。 今回紹介するJointJSはCanvas上に図形を描くのですが、JavaScriptと連携したインタラクティブな図を描けます。
JointJSの使い方
デモです。まずは回転する図形。
こんな図形も描けます。なお、緑と赤のポイントはドラッグでラインを接続できます。
各オブジェクトはマウスでドラッグできます。
図はグルーピングされていたり、コネクトされている場合は線も一緒に動きます。
デモです。赤いポイントがアニメーションしています。
パイチャートともちょっと違う図形です。
各要素にエフェクトを適用したものです。
グラデーション。
こんな複雑な図形も。
線や図形をカスタマイズしたもの。
クリックするとボールが移動します。
線をジャンプしています。
ドラッグ&ドロップで自分でラインを引けます。
オブジェクト同士が繋がっている例。
変わった接続の仕方です。
ネストしたオブジェクト。
ラインがパイプになっています。
循環している例。
線の描き方も多数用意されています。
手書き風。
太陽と地球。楕円も描けます。これはマウスでドラッグして移動できます。
テキストを囲むような矢印。
JointJSはオブジェクトが繋がるような描画が得意なようです。Visioのようなドローを実現したり、ビジュアルプログラミング環境のベースに使うこともできそうです。
JointJSはJavaScript製のオープンソース・ソフトウェア(Mozilla Public License)です。
Rappid Diagramming Framework clientIO/joint: JavaScript diagramming library