今回は、H5 の WebGL を使用して、同じインターフェイス上で json チャートと echarts チャートを作成する方法を説明します。注意点は何ですか? 以下は実際のケースを見てみましょう。 突然、いくつかの異なる知識ポイントを同じインターフェース上に配置してボックスに入れることができれば、何かを見たい場合にそれを直接表示でき、このボックスを開くことができるはずだと思いつきました。私は HT を使用してアイデアを実現しましたが、100 行を超えるコードでこれほどの効果を実現できるのは素晴らしいことだと思います。
この例で最も基本的なのは最も外側のボックスなので、最初にそれを実装する方法を見てみましょう:
var box = new ht.CSGBox(); dataModel.add(box);
このボックスは、多くの基本的なプリミティブ型が HT でカプセル化されています。使用した ht.Node もその 1 つで、同じコードを繰り返し書かずに基本的な実装を完了できます。
この例で使用されているカプセル化された基本プリミティブは、
ボックス モデルである ht.CSGBox です。マニュアルを見ると、このボックスはあらゆる面で CSGBox でのみ操作できることがわかります。特殊な機能を自分で設定したい場合は、ht.Style(HT for Webスタイルマニュアル)を操作するだけです。 を設定し、この json を使用してインターフェイスをすぐに更新します。そうしないと、アニメーションが設定されていても画面が表示されません。変わらない。ht.Default.xhrLoad('displays/demo/pump.json', function(text){ const json = ht.Default.parse(text); pumpDM.deserialize(json); var currentRotation = 0; var lastTime = new Date().getTime(); setInterval(function(){ var time = new Date().getTime(); var deltaTime = time - lastTime; currentRotation += deltaTime * Math.PI / 180 * 0.3; lastTime = time; pumpDM.getDataByTag('fan1').setRotation(currentRotation); pumpDM.getDataByTag('fan2').setRotation(currentRotation); box.iv(); // g3d.iv();这边也可以刷新g3d,但是局部刷新更省 pumpGV.validateImpl(); }, 10); }, 10);
pumpGV.getWidth = function() { return 600;} pumpGV.getHeight = function(){ return 600;} pumpGV.getCanvas().dynamic = true;//设置这个是为了让canvas能动态显示
ht.Default.setImage('echart', charts(option)); ht.Default.setImage('pump', pumpGV.getCanvas());
HTMLのtitle属性を使用してマウスホバー時にテキストを表示する方法
タグのhref属性とonclickイベントを使用する方法 input 入力ボックスの表示に一貫性がない 解決方法以上がH5 WebGL を使用して、同じインターフェイスで json グラフと echarts グラフを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。