1.簡単な
<！DOCTYPE HTML > < HTML > < ヘッド> < タイトル>公交车（简略）</ タイトル> < スタイル> .view { 位置：絶対。 左：0 ; 右：0 ; トップ：0 ; 下：0 ; } 体{ 背景：黒; } </ スタイル> < スクリプトタイプ= "テキスト/ javascriptの" SRC = "../../../../のlib /コア/ ht.js" > </ スクリプト> < スクリプトタイプ= "テキスト/ javascriptの" SRC =" ../../../../のlib /プラグイン/ HT-flow.js " > </ スクリプト> < スクリプトタイプ= "テキスト/ javascriptの" SRC =" ../../。 ./../lib/plugin/ht-xeditinteractor.js」> </ スクリプト> < メタHTTP-当量= "Content-Typeの" < スクリプトタイプ= "テキスト/ javascriptの" > // 公交车 ht.Default.setImage（" バス" 、"データ：画像/ PNG、BASE64、iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADuUlEQVR4Xu2XS2hcVRzGf + EC + 8hMnaRJbNQkJVRIfZS0ahobRKHu + rIPROtK1AqSLmyrVhBcZKWb1EYXBdGF + NioEVqirlSM4itiKImVoNWpj5a2ah5tJ5nk3vN3LvfOIpQJc1dZmA +++ Z / NU / P9z8c5ZxZXiQhLCQ38vwMsB1gOoCJ2vTi02ck1fmpFEAEBkIW / UqTTtaqw3OylJ7493P06YAGciMH83D1rG33aGzMABFYIS5TYgtEqImEK3TMKrRRCAgFBODE6dwB4C5ghQaaj95O3j49NyrwVufXIqFyZF / lnRuRiIa7R / JAU + VR + Mdn3Xl4eeTcvj5XqXcdOiRWRpwb / kFXde5pJoAFH1VzT2ZhzuVwExzFcmoWpGVtiGNVojjEp9CIorenf3caRnW0c3dXG2qYV / PJvwN1r6mjd / fQLgFMO4OJlb26p9fj + 7CwZX1MMKVEW1Jo0egCeq5megcmCMF2IA41fKHLn6hzZuoYHgZpyAANCa63DlTlLjWcIQ7BWlRjXIArgaoIq9cif8Q1zIYSR38b + / + NQcjobN7Q2Zdc8ObAOUAyiNwgLnLs T812UAqM1WgSlVImQq0mp + y77P8wjAq6JL2vWLUbh2NiaY7Cx5UnguAKaNvaPnn9oU3PpCApopeJ / gQhlGKXQCqxQlR71AHhnTysTBXj5u7 / JTxVxtWJXez23NWe4 / 40xRg51rHQAMAa0Jus7gCCACAugVFmrTrciPDp4FgEcFd8JgA9OT + L7LmgD4DkABT / HrPHwvYD113rU + hpRigUQIQ2EhX5FfDyf / Rkw8BcUsg2U7wAjB1bT + 7XgukV + mghAa0SXUwI2BBvEVQAqhVGgiH1X + xEB4 + d47aLD9CGoA5xyO6vB91w0IGHI9GAf8 + fGAXBvuInaHQdRno / YsPJuKIXSpqJfHBetDZwCASgHWPfKBfZqMNkVaKM4 / 2YvG1pX0r33GQC ++ WKIkyeOct3DvUgQIhUCqCiAYxb1GwuHHxDeb5mEffVxgOfsADIUNQZtHMbzP9Kx8yB9fS8B0NPTw + df9rPpq1exYbDYDlThD0Epnjeax8s7MH46DwgQNTAEVijMzOK6HkA0jjR + PvM7NlxsB6rzl9ciedYDa5IK4GzdtuNYV1fXjRtuvwOAkyM / MDw8 / OvHHw3uBwIqIKV / AvgNwEtCNCVsA7q3bNl6Zvv2 + yRiNI605F1TBab11wMeVwMXuB7oBO5N2JloLhWQyl9lkzpgVcK6FOY0 / qXH8qfZkgdYDvAftC1Oc + 4ypOMAAAAASUVORK5CYII =NCVsA7q3bNl6Zvv2 + yRiNI605F1TBab11wMeVwMXuB7oBO5N2JloLhWQyl9lkzpgVcK6FOY0 / qXH8qfZkgdYDvAftC1Oc + 4ypOMAAAAASUVORK5CYII =NCVsA7q3bNl6Zvv2 + yRiNI605F1TBab11wMeVwMXuB7oBO5N2JloLhWQyl9lkzpgVcK6FOY0 / qXH8qfZkgdYDvAftC1Oc + 4ypOMAAAAASUVORK5CYII =" ）; 関数のinit（）{ VARのグラフ= window.graph = 新しいht.graph.GraphView（）// GraphView拓扑图形组件 DM = graph.dm（）、 ビュー= graph.getView（）; VARのノード1 = 新しいですht.Node（）、 ノード2 = 新しいht.Node（）、 edge3 = 新しいht.Edge（ノード1、ノード2）; view.className = " ビュー" 。 document.body.appendChild（ビュー）; // 。位置1 dm.add（ノード1）; // 位置2 node2.setPosition（0 、200である）; dm.add（ノード2）; // 車前方のラインが edge3.s（" edge.type " " 点" ）; edge3.s（" edge.points 」、新たな新ht.List（[ // エンドポイントなしのラインセットポイント（） {X：0 、Y：25 }、 {X：25 、Y：25 }、 {X：25 、Y：50 }、 {X：50 、Y：50 }、 {X：50 、Y：75 }、 {X：75 、Y：75 }、 {X：75 、Y：200である} ;]）） edge3.s（ " フロー" 、真の）; // このフローは、デフォルトは、falseに一般的な選択偽であるかどうかをtrueまたはfalse、制御又はht.Edge ht.Shapeの値 EDGE3 .S（"flow.count " 3 ）; // 制御フローグループの数、デフォルトいくつかの車両それぞれ edge3.s（" flow.step " 、4 ）; // 制御フローのステップ、デフォルトの速度3 edge3.s（「flow.element.image 」、「バス」）; // 文字列型、グループの写真の中の要素の流れを指定して、画像がht.Default.setImageによって事前に登録する必要があり edge3.s（" flow.element。マックス" 60 ）; //は、デフォルトでは、要素の最大のグループのサイズを流し7。 edge3.s（" flow.element.min 」、7。 ）; // デフォルト値は0であり、要素の最小のグループを流れ、flow.element.minするflow.element.maxから下降流で、各グループ内の要素の大きさ、所望であれば、整合素子のサイズ、2パラメータは同じに設定することができます。 edge3.s（" flow.element.count " 、2 ）; // 要素の各グループ内の流れの数は、デフォルト値は10である （edge3.s " flow.element.autorotate " 、真の）; // 値真または偽、一般デフォルトは偽偽で、パスと一致するグループ要素の流れ方向を制御 （edge3.s 「flow.element.shadow.visible 」、偽）; // trueまたはfalse、コントロールの値フローグループ要素のシェーディンググラデーションが表示され、デフォルトではtrueにある edge3.s（「shape.background" 、ヌル）; // 流セットにおける背景色要素、デフォルトはRGBA（255、255、114、である 0.4） 一般的にヌルである dm.add（EDGE3）; graph.translate（500 、300 ）; // 現在の両方向xの変換の値を大きく、yは（下方向Yに移動、右へのx現在のコンテンツ移動）に基づいて、座標 graph.setZoom（2 ）; // ズーム操作（現在のコンテンツの規模拡大及び縮小） graph.enableFlow （60 ）; //は、間隔（ヘッドの流動時間）フロー } </ スクリプト> </ ヘッド> < 本体のonload = "INITを（）;" > </ ボディ> </HTML >