ユーザーマウスが移動すると、この需要は非常に一般的です。これは、HTML要素を扱うときは簡単ですが、HTML5キャンバスで構成されるグラフィックスで処理されている場合、キャンバスはキャンバスに描かれているため、キャンバスが描かれているため、この方法は適用されなくなります。全体で1つ。グラフィック自体は実際にはキャンバスの一部であるため、javascriptイベントを直接追加することはできません。ただし、WebのHTでは、この需要は簡単に実現でき、シーンは次のとおりです。
このシーンは、WebのJSONファイルに基づいています拡張されており、私のニーズを満たすトポロジエディターを満たすためにカスタマイズするのは簡単です。それだけでなく、このデモでは、3種類の爆弾フレーム「Tips1.json」、「Tips2.json」、「Tips3.json」のベクトルチャートは、このベクターエディター（http：//www.hightopo。comを介してあります。 /demo/vector-editor/index.html）は単純に描画されており、非常に使いやすいです。上記のシナリオでは、ユーザーがマウスを草や他のオブジェクトに移動すると、それを表示するポップアップボックスの詳細情報があります。
特定の実装は次のとおりです。
準備HTを紹介します（http://www.hightopo.com/）:)：
<スクリプトsrc = 'ht.js'> </script> new ht.datamodel（）;
HTは、HT標準で定義されたJSONベクター形式でカスタマイズされた形式を提供し、フィクターモードとして使用できます。ここでは、3つの形のJSONポップアップボックスを写真に登録して、次の通話を登録してください。
ht.default.setimage（ 'Tips1'、 'Symbols /tips1.json'）;
次に、インタラクティブな効果を持つオブジェクトを取得します。オブジェクトの属性名は、各画像のラベル名です。
// tree var time = {'time1'：true、 'tree2'：true、 'tree3'：true}; }; // Mountain var Mountain = {'Mountain'：true};ポップアップボックス実際、ポップアップボックスの本質は、ユーザーマウスが移動するときです。
1.制御ノードの隠されたディスプレイは、爆弾フレームの効果を実現できます。
2。マウスの位置の変更には、ノードの位置の変更が伴います。
3.マウスが異なるオブジェクトに移動すると、ノードのテクスチャも変更されます。
4.ノードの属性値は、マウスの位置によっても変化します。
したがって、弾丸フレームを実現するには、最初に新しいノードを作成し、その前にレベルを「高」に設定します。
ht.default.xhrload（ 'meadow.json'、function（text）{const json = ht.default.parse（text）; if（json.tital）document.title = json.title（json）; //// Hierarchical DataModel.each（function（data）{data.setlayer（ 'lower'）;}）; ;; 'Higher'）;次に、下層のムセモブ事件を聞くために、マウスの位置が3つのオブジェクトの上にあるかどうかを判断し、オブジェクトタイプに従ってノードのレイアウトにレイアウト（）関数を呼び出します。
graphview.getView（）。 （！hoverdata）return; if（holddata.gettg（）]）{node、 'tips1'）;} tips2 '）;} else if（mountain [holddata.gettg（）]）{layout（node、pos、' tips3 '）;}}）;}）;レイアウト（）関数は詳細に行われます。 。
1。関数を直接呼び出し、関連データを渡し、パラメーター値、つまりfunc（data、view）が決定されます。
2。文字列タイプ：
sty@***で始まると、data.getStyle（***）値が返されます。これはスタイルの属性名です。
att@***の開始時に、data.getattr（***）値が返されます。ここで、***はattribute名を表します。
フィールド@***の開始では、データが返されます。
上記の状況が一致しない場合、文字列タイプはデータ***（ビュー）と呼ばれ、データオブジェクトの関数名と呼ばれ、戻り値はパラメーター値として使用されます。
FUNC属性に加えて、対応するFUNCが未定義またはnullによって取得される場合、値属性によって定義されたデフォルト値を使用することもできますWebデータバインディングマニュアルのHT（http：//www.hightopo.pom/guide/guide/core/datamodel/htamodel-guide.html）。たとえば、ここでは、「tips1.json」ファイルの日光値のデータバインディングの結果は次のとおりです。
テキスト：{func：art@sunshine、value：sunlight value}、レイアウト（）関数のソースコードを配置します。
関数レイアウト（ノード、PO、タイプ）{node.s（ '2d.visible'、true）; getWidth（）/2、pos.y -node.getheigh（）/2）; ： '雨の露の値：'+（pos.y/1000）.tofixed（2）、 'love'： '：love value：***'}）;} else if（type == 'tips2'）{node .setposition（pos.x、pos.y -node.getheight（）/2）; x // 100）+'％'}）;} else if（type == 'tips3'）{node.setposition（pos.x -node.getWidth（）/2、pos.y -node.getheigh（）/ 2）; node.a（ 'hight'： '：' + rown（pos.y） + 'mi'、 'landscapes'： 'landform：karster'}）;}}クラウドモバイル最後に、デモには、HTによって駆動されるデータモデルのデザインアーキテクチャもあります。 。
フレームベースのメソッドユーザーは、フレームアニメーションフレームの数と、間隔アニメーションフレームの間隔間隔パラメーターを指定することにより、アニメーション効果を制御します。
時間ベースのメソッドユーザーは、指定されたタイムサイクル内でアニメーションを完了するために、ミリ秒のアニメーションサイクルを指定する必要があります。
詳細については、WebのHTを参照してください。
ここでは、時間ベースのメソッドを使用します。
var cloud = datamodel.getDatabytag（ 'Cloud'）; .getPosition（） end == round1：round1; * v、py）;}}; ht.default.startanim（animparam）;
最後に、リファレンスのためにデモをもう一度履きます。