H5 WebGL を使用して、同じインターフェイスで json グラフと echarts グラフを作成する方法-H5 チュートリアル-php.cn

H5 WebGL を使用して、同じインターフェイスで json グラフと echarts グラフを作成する方法

php中世界最好的语言

リリース： 2018-01-29 10:14:13

オリジナル

2432 人が閲覧しました

今回は、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スタイルマニュアル）を操作するだけです。

ボックスの面にテクスチャを追加するには、HT によってカプセル化された ht.Default.setImage 関数しか思いつきません。ここで実装したメソッドは、HT のエディターに基づいており、graphview コンポーネントと datamodel データモデルを再宣言し、ht.Default.xhrLoad メソッドを通じて json を呼び出し、ht.Default.parse を使用してテキストを解析しました。メソッドを json 形式に変換し、デシリアライズして json 内のコンテンツをビジュアルインターフェイスに表示します。その後、animation

を設定し、この json を使用してインターフェイスをすぐに更新します。そうしないと、アニメーションが設定されていても画面が表示されません。変わらない。

ht.Default.xhrLoad(&#39;displays/demo/pump.json&#39;, 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(&#39;fan1&#39;).setRotation(currentRotation);
        pumpDM.getDataByTag(&#39;fan2&#39;).setRotation(currentRotation);
        box.iv();
        // g3d.iv();这边也可以刷新g3d，但是局部刷新更省
        pumpGV.validateImpl();
    }, 10);
}, 10);

ログイン後にコピー

現時点では、pumpGV と g3d の両方を基になる div に追加することはできません。私の目的は、pumpGV を g3d の CSGBox の片側に追加することです。そのため、pumpGV が表示されるようにするには、pumpGV の幅と高さが必要です。を設定する必要があり、幅と高さはjsonで描いた絵が占める領域より大きくなければなりません。そうしないと表示が不完全になります。この幅と高さがディスプレイに与える影響を確認したい場合は、自分で変更して楽しんでください。

pumpGV.getWidth = function() { return 600;}
pumpGV.getHeight = function(){ return 600;}
pumpGV.getCanvas().dynamic = true;//设置这个是为了让canvas能动态显示

ログイン後にコピー

echarts チャートの表示も、canvas.dynamic = true を追加してリアルタイムで gv を更新するだけです。

最後に、返された 2 つのキャンバスを ht.Default.setImage に渡すだけで済みます。

ht.Default.setImage(&#39;echart&#39;, charts(option));
ht.Default.setImage(&#39;pump&#39;, pumpGV.getCanvas());

ログイン後にコピー

ht.Default.drawImage 関数は、実際にキャンバス上に描画する新しい画像を生成するため、必要なのは描画したキャンバスのみです。 ht.Default.setImage に渡して画像を生成できます。

改善する必要があることが 1 つあります。フォントを設定するときに同時に半透明を設定するため、ボックスの線、グラフィック、テキストの周囲にギザギザの円が表示されます。半透明の場合は「blend」でスタイルを制御することはできませんが、通常は「all.transparent」をtrueにする必要があります。これらの事例を読んで方法をマスターしてください。さらに興味深い内容については、中国語の Web サイトの他の関連記事に注目してください。