H5 Canvas を使用して 3D 動的チャートを実装する方法-H5 チュートリアル-php.cn

H5 Canvas を使用して 3D 動的チャートを実装する方法

php中世界最好的语言

リリース： 2018-01-29 10:01:03

オリジナル

3998 人が閲覧しました

今回は、H5 Canvasを使用して 3D Dynamic Chart を実装する方法と、H5 Canvas を使用して 3D Dynamic Chart を実装するための注意事項を説明します。実際の事例を見てみましょう。

産業用 SCADA や電気通信ネットワーク管理で多くのチャートが使用されていることがわかりましたが、ほとんどの人はチャートの作成に echart を使用していますが、現時点では他のプラグインを呼び出すことができない場合があります。この美しいチャートは私が自分で書きましたが、美しいチャートを作るのは簡単ではありません。。。ウェブサイトで販売されているチャートを見て、とても良さそうだと思ったので、Web 3D 用の HT を使用して小さなサンプルを作成しました。非常にシンプルで美しいです (笑)。まず、このサンプルは HT を使用して実装するのが非常に簡単です。最も基本的な dm データモデルを HT で作成し、そのデータモデルを g3d 3d コンポーネントに追加し、3d でパースペクティブを設定し、3d コンポーネントを body 要素に追加します:

dm = new ht.DataModel();
g3d = new ht.graph3d.Graph3dView(dm);
g3d.setEye(0, 185, 300);
g3d.addToDOM();
g3d.getView().style.background = &#39;#000&#39;;

ログイン後にコピー

次にこれを作成します。 5 つのグラフがあります私のアイデアはこれです。内側のレイヤーにノードがあり、外側のレイヤーに透明なノードがあり、下部に現在のパーセンテージを表示する 3D テキストがあります。

内層のノードは非常に簡単です。HT によってカプセル化された ht.Node を直接使用して新しいノードオブジェクトを作成し、node.s メソッドを通じてノードノードのスタイルを設定します。

どちらを説明するかはい、「shape3d」:cylinderModel スタイルの設定です。まず、shape3d

attribute

は 3D モデルとして表示されるアイコンの効果を指定します。HT でカスタマイズされた 3D モデルです。モデリングマニュアル:

var node = new ht.Node();
node.s({
    &#39;shape3d&#39;: cylinderModel,
    &#39;shape3d.color&#39;: color,
    &#39;3d.movable&#39;: false
});
node.a({
    &#39;myHeight&#39;: s3[1],
});
node.p3([p3[0], s3[1]/2, p3[2]]);
node.s3(s3);
dm.add(node);

ログイン後にコピー

次に、動的に変化する属性 myHeight が設定されます。HT では、node.a メソッドは、ユーザーがビジネスデータを保存するために予約されています。ここに任意の数の属性を追加できます。次に作成する必要があるのは、外部透明ノードです。このノードの構造は基本的に内部ノードと同じですが、もう少し「透明」なスタイル設定が必要です:

cylinderModel = ht.Default.createCylinderModel(1000, 0, 1000, false, false, true, true);

ログイン後にコピー

最初に ' を設定する必要があります。 shape3d.transparent ' が true の場合、'shape3d.opacity' の透明度を設定します。

最後は 3D テキストです。3D テキストをレンダリングするには、json 形式の書体フォントが必要で、ht.Default.loadFontFace を通じて json 形式のフォントをメモリに読み込みます。詳細については、Web 3D の HT を参照してください。マニュアル:

var cNode = new ht.Node();
cNode.s({
    &#39;shape3d&#39;: cylinderModel,
    &#39;shape3d.transparent&#39;: true,
    &#39;shape3d.opacity&#39;: 0.2,   
    &#39;label.color&#39;: &#39;#fff&#39;,
    &#39;3d.movable&#39;: false
});
cNode.p3([p3[0], 50, p3[2]]);
cNode.s3(20, 100, 20);
dm.add(cNode);

ログイン後にコピー

使用している書体フォントは、1つの単語が無数の三角形で構成されるように描画されており、メモリを多く消費するため、グラフィックの曲線の細かさを調整しましたより低いレベルですが、それでも非常に明確です。よりパフォーマンスの高いフォントを使用できるので、メモリ使用量が少ないフォントが見つからない場合はお知らせください。

最後に、グラフ内の棒グラフを動的に変更するには、アニメーションを設定し、3D フォント値を同期的に更新する必要があります:

ht.Default.loadFontFace(&#39;./wenquanyi.json&#39;, function(){
    //......
    var text = new ht.Node();
    text.s3([5, 5, 5]);
    text.p3(cNode.p3()[0]-5, -10, 0);
    dm.add(text);
    text.s({
        &#39;shape3d&#39; : &#39;text&#39;,
    &#39;shape3d.text&#39;: node.a(&#39;myHeight&#39;)+&#39;%&#39;,
    &#39;shape3d.text.curveSegments&#39;: 1,
    &#39;3d.movable&#39;: false
    });
});

ログイン後にコピー

ここでは、カスタム属性「myHeight」が決定的な役割を果たします。変数を格納し、変数
の値を自由に変更できるため、動的バインディングの効果を実現できます。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

HTML5ページをiPhoneに適応させる問題について

以上がH5 Canvas を使用して 3D 動的チャートを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。