今日から、HTML5 Canvas トポロジ グラフ アプリケーションを構築する方法を最も基本的なレベルから分析していきます。HT は、最も豊富な 2D 機能を持つコンポーネントであるトポロジ グラフ コンポーネント ht.graph.GraphView (以下、GraphView と呼びます) を内部的にカプセル化します。 HT フレームワークとその関連クラス ライブラリはすべて ht.graph パッケージの下にあります。 GraphView は、基本的なグラフィックス表示と編集機能、トポロジカル ノード接続と自動レイアウト機能、電力や通信などの業界での定義済みオブジェクト、アニメーション レンダリングなどの特殊効果を備えているため、幅広い用途があり、アプリケーションとして使用できます。描画ツールや監視分野での人的資源の管理に使用でき、マシンインターフェースを備えており、一般的なグラフィカル編集ツールとして使用でき、ワークフローや組織図などのエンタープライズアプリケーションにも拡張できます。簡単に言うと、トポロジ図とは、通信ネットワーク管理のネットワークトポロジ図、電力網トポロジ図、産業制御監視図、ワークフロー図、思考脳マップなどを総称したもので、簡単に言うとノードの接続で構成されています。これらは、ここで参照されるトポロジ図です。
HT を使用してネットワーク トポロジ図を開発するのは非常に簡単です。数行のコードを記述するだけで、単純なサーバーとクライアントのトポロジ図が完成します。
この例は非常に基本的なもので、サーバーとクライアントのほぼすべてのトポロジ機能を完了します。早速ですが、この例では、HTML タグのすべての部分を含めて、合計で何行のコードが必要だったと思いますか?空白行を除くと、わずか 50 行しかありません。結局のところ、私が見せたいサンプルはあまり醜いものではありません。
コードは tuputu_jb51.rar から自分でダウンロードできます。json ファイルがあるため、画像に関してクロスドメインの問題が発生することに注意してください。実行するには Firefox またはローカル サーバーを使用する必要があります。
冒頭で説明しますが、HT は HTML5 標準に基づいたエンタープライズ アプリケーション グラフィカル インターフェイスのワンストップ ソリューションであり、一般コンポーネント、トポロジ コンポーネント、3D レンダリング エンジンなどの豊富なグラフィカル インターフェイス開発ライブラリが含まれています。ユーザーは ht を導入するだけで済みます。 .js であり、HT はグローバル変数 ht を宣言するだけなので、他のものとはまったく競合しません。
次に、コード部分を分析します。まず、トポロジ マップ シーンを構築します。
dm = new ht.DataModel();//データ コンテナ gv = new ht.graph.GraphView(dm);//トポロジ コンポーネント パラメータは dm によってバインドされたデータ モデルです gv.addToDOM();//トポロジ グラフを追加します体内に
HT のすべてのコンポーネントのルートは、getView() メソッドを通じて取得される div です。このメソッドを addToDOM メソッドで使用します。
addToDOM = function(){ var self = this, view = self.getView(), //コンポーネントの基になる div を取得します style = view.style.appendChild(view); // 基になる div を追加します。ボディ style.left = '0'; //HT は通常、コンポーネントを絶対配置に設定します style.right = '0'; style.top = '0'; window.addEventListener('resize', function () { self.iv(); }, false); //イベント リスニング ウィンドウ サイズの変更、iv は遅延更新コンポーネント}次に、サーバー ノードとクライアント ノードをトポロジ シーンに追加します。
var server = new ht.Node();server.setName('server');//ノード名を設定し、ノードの下に表示しますserver.setImage('serverImage');//ノード画像を設定しますserver.setSize( 20, 60 );//ノード サイズを設定します dm.add(server);//データ コンテナにノードを追加します dm server.setPosition(100, 100);//ノード座標を設定します (x, y) var group = new ht.Group();//グループ、グループ内に複数のノードが存在する可能性があります group.setImage('groupImage');//画像 dm を設定します.add (グループ);var client = new ht.Node();//このノードはグループに追加されます client.setName('client');client.setImage('clientImage');dm.add(client);group.addChild(client);//追加グループの子 group.setExpanded(true);// グループを拡張モードに設定 client.setPosition(200, 100);//グループ内にノードが 1 つだけある場合は、このノードの位置をグループの位置に設定します。サーバーとクライアント間の接続? 2行のコードが完成しました！実際、HT でノードを追加する方法は非常に簡単です。通常、必要なコードは 2 行だけです。最初にインスタンス変数を宣言し、次にそのインスタンス変数をデータ コンテナに追加します。
varedge = new ht.Edge(サーバー, クライアント);dm.add(edge);
点線がどのように作られるのか興味がありますか?点線の形成は接続線に基づいて構築され、次の 3 つのステップがあります。
とてもシンプルではないでしょうか！次に、設定方法を見てみましょう。
edge.s({//ノード設定スタイル属性'edge.dash': true,//点線を表示'edge.dash.flow': true,//点線フローを有効にする'edge.dash.color': ' yellow ', //破線の色'edge.dash.pattern': [8, 8],//破線のスタイル'label': 'flow',//ノードの注釈 'label.background': 'pink',//ノード注釈の背景色 });このようにして、すべての表示パーツが導入されました～ちょっと、何か足りないような気がしませんか？ところで、HT で ht.Group クラスを導入するのを忘れていましたが、その名前が示すように、グループには多数のノードを含めることができます。上記のコードは、グループ内のすべてのノードを表示または非表示にします。 , しかし、それでも私は少し手を加えました。つまり、グループの右上隅にある表示部分は、実際には指示を促すために使用されるマークです。
group.s({ 'group.background': 'rgba(255, 255, 0, 0.1)',//グループの背景色を設定します'note': Double click me!,//表示されたコンテンツに注釈を付けます'note .position ': 13,//注釈位置 'note.offset.y': 10,//注釈位置の Y 軸オフセット});注釈の位置は、note.position を通じて変更できます (特定の位置情報については、HT for Web の位置マニュアルを参照してください)。または、note.offset.x および note.offset.y を使用して注釈の位置を変更できます。注釈。
すべてのコード解析が完了しました。進捗が遅いと感じた場合は、公式 Web サイト (HT for Web) にアクセスして学習してください。この記事の内容を自分の知識に変えましょう！
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。