この連載では、AutoCAD JavaScript API と連携してご利用いただける HTML5 ベースのオープンソースライブラリをご紹介いたします。
これまで、AutoCAD JavaScript API をご活用いただく上で知っておいて頂きたい前提知識と、ベクタ・ラスタ形式のグラフィックスを扱えるオープンソースのグラフィックスライブラリ Paper.js についてご紹介いたしました。
今回は Isomer をご紹介いたします。
Isomer は、HTML5 Canvas 上で、アイソメトリックな図形を描画できるオープンソースのグラフィックスライブラリです。
ポイント、パス、シェイプの3つの基本構成要素からなります。ポイントからパスを形成し、パスからシェイプを作ります。
それぞれの要素は、移動、回転、スケールのベーシックなメソッドを持っております。
今回は、AutoCAD から 3D ソリッドのバウンディングボックスに関する情報を JSON で取得して、シェイプで形状をCanvas 上に再現するサンプルを作成してみました。
Isomer の特徴として、描画する順序を指定できるという点があります。アイソメ図の場合、要素の奥行き方向の距離によって重なり方が異なりますので、これをコントロールしなければなりません。
たとえば、AutoCAD から取得したソリッドの配列に対して、順序でソートするロジックを組み込むことができます。要素の手前側の面の中心点とカメラの距離を計算する方法が考えられるでしょう。
AutoCAD 上でソリッドが追加されたり編集された際には、これを Canvas 上のシェイプに即座に反映させることもできます。
ご興味のある方は、ぜひ一度お試しください。
By Ryuji Ogasawara
Leave a Reply