Sailfish OS開発：D3.jsとQML Canvasを使用してグラフを表示する

こんにちは この記事は、Sailfish OSモバイルプラットフォーム向けのアプリケーション開発に関する一連の記事の続きです。 今回は、Sailfishアプリケーションでチャートを操作することに焦点を当てます。 ライブラリの検索と接続、および数学関数のグラフの表示方法について説明します。 提案されたソリューションはSaiflsh OSプラットフォームに限定されるものではなく、一般にQtQuickアプリケーションに適していることに注意してください。

タスクの説明

Sailfish OSを実行しているデバイスで作業するエンジニア、学生、学童のニーズを満たす計算機アプリケーションを作成することにしました。 アプリケーションには次のコンポーネントが含まれている必要があります。

• シンプルな操作と高度な操作の2つの操作モードを備えた電卓。
• 行列の加算、乗算、ランクと行列式の計算、および転置をサポートする行列の計算のサブシステム。
• 次の方程式を解くブロック：最大4度の累乗方程式、指数方程式および三角方程式。

方程式を解くためのブロックに、グラフを表示する機能を追加することにしました。 QMLアプリケーションのフレームワーク内でこの問題を解決するには、次のアプローチを適用できます。

1. QuickQanavaなどの外部ライブラリを接続します。
2. QML Canvasオブジェクトを使用します。
3. C ++で独自のコンポーネントを実装し、アプリケーションに接続します。

QuickQanavaライブラリは、Sailfish OSプラットフォームではまだ利用できないQt 5.8で動作します。 QML Canvasオブジェクトを使用すると、高レベルのJavaScript言語を使用でき、W3C標準と互換性のあるAPIも提供します。これにより、サードパーティライブラリを使用できる可能性が広がります。



グラフの表示には深刻な計算は必要なく、シーンを頻繁に再描画する必要がないため、外部JavaScriptライブラリを使用してプロジェクトでQML Canvasを使用することにしました。

QML CanvasおよびContext2D

QML Canvas要素を使用すると、直線や曲線、シンプルで複雑な形状、グラフィックス、グラフィック画像へのリンクを描画できます。 また、テキスト、色、影、グラデーション、パターンを描画したり、ピクセルレベルで画像を操作したりすることもできます。 Canvas出力は、画面に表示されるほか、画像ファイルとして保存したり、URLにシリアル化することができます。



キャンバスのレンダリングは、通常はペイント信号の処理の結果として、 Context2Dオブジェクトを使用して実行されます。 オブジェクト自体は、 HTML Canvas 2D Context仕様を実装します 。これは、 HTML Canvasオブジェクトにも実装されており、QMLアプリケーションのWebブラウザーで使用するために設計されたJavaScriptライブラリを使用できます。 現在、3次元コンテキストはContext2Dオブジェクトではサポートされていません。



QML Canvasをアプリケーションに接続する最も単純な例を考えてみましょう。

import QtQuick 2.0 Canvas { id: mycanvas width: 100 height: 200 onPaint: { var ctx = getContext("2d"); ctx.fillStyle = Qt.rgba(1, 0, 0, 1); ctx.fillRect(0, 0, width, height); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

例の最初の行にはQtQuick 2.0が含まれています。次にCanvas要素を定義し、 id 、 widthおよびheightパラメーターを設定します。 要素自体には要素がなく、任意のスペースを占有できるという事実により、幅と高さを明示的に設定するか、要素の端をページ上の他の要素と接続することにより、寸法を指定する必要があります。 サイズを指定しない場合、アイテムは表示されません。 この例では、最初のアプローチを使用します。



キャンバス要素がアクティブになると、 ペイント信号がトリガーされます。 その処理はonPaintメソッドで行われます。 その中で、コンテキストを取得して表示し、 ctx変数に保存します。 getContextのパラメーターの詳細な説明は、たとえばここにあります 。 Qtは2次元の表示コンテキストへのアクセスのみを提供することに注意してください。



次に、コンテキストを使用して長方形を表示します。 ctx.fillStyleは、長方形の塗りつぶし色を設定します。 最初の3つのパラメーターは、赤、緑、青の成分によって色を決定し、4番目の成分は透明度を決定します。 ctx.fillRect（x、y、w、h）は、 xとyを開始の座標として、 wとhを幅と高さとして使用して描画します。



描画に使用できるコンテキストメソッドの一覧は、公式ドキュメントに記載されています 。 この記事のすべての方法を検討するわけではありません。画像の座標は左上隅から始まることに注意してください。 OX軸は右に伸び、OY軸は上下します。

外部ライブラリを使用する

もちろん、前に設定したタスクは、 Context2D APIを使用して直接解決できましたが、外部ライブラリを使用する可能性を検討することにしました。 このAPIはすべての主要なブラウザーで使用できるため、Sailfish OSの開発者は、ターゲット機能の実装を促進する多数の既存のライブラリーを使用できます。 このアプリケーションでは、 D3.jsライブラリを使用することにしました。

ショートレビューD3.js

D3.jsは、データを処理および視覚化するためのJavaScriptライブラリです。 現在、D3.jsは、グラフィカルデータ処理およびあらゆる種類のチャートとグラフの作成に使用される最も人気のあるフレームワークの1つです。



D3.js自体は、多くの問題を解決できる大規模なプロジェクトであるため、このライブラリをHTMLアプリケーションに統合する唯一の方法はありません。 かなり単純な統合アプローチを使用しましたが、他のアプリケーションでもうまく機能するはずです。

QMLアプリケーションでのD3.jsの統合

最初に、ライブラリをダウンロードして、ターゲットデバイスで使用可能にする必要があります。 Sailfish OS上のQMLコンポーネントはリソースにコンパイルされず、個別のファイルとして配信されることに注意してください。 その結果、すべてのJavaScript依存関係も個別のファイルとして望ましいものになります。



D3.jsは、d3.jsと呼ばれる別のファイルと、d3.min.jsにある縮小バージョンで提供されます。 開発中、縮小版はQMLエンジンによって正しくロードされないことがわかったため、完全版を使用することをお勧めします-苦情なしで動作します。



アプリケーションでは、プロジェクトのqml / pagesディレクトリにd3.jsファイルを配置しました。 このディレクトリの内容全体がターゲットデバイスにコピーされるため、ファイルはプロジェクトとともにコピーされます。 このファイルはQMLプロジェクトのDISTFILESリストにも含まれていたため、QtCreatorは他のファイルのリストに表示します。

グラフを表示するコンポーネントを作成する

アプリケーションの一部として、3つの関数のグラフを2次元平面に表示する必要があります。 考慮されるすべての関数は、横座標の値に依存します。 セグメントに定性的に表示するために、現在表示されているセグメントの中間値を計算することにしました。



構築の一般的なロジックを別のPlotコンポーネントに入れます。 次の機能を提供します。

• キャプション付きのグリッドを表示します。
• ジェスチャーを使用して表示される座標を変更します。
• 計算値によるグラフ表示。 使用場所に特定の機能を実装する必要があります。基本タイプはこの機能を提供しません。

特定の使用場所では、グラフの値を計算する関数を1つだけ決定する必要があります。



基本コンポーネントの構造を考慮してください。

 import QtQuick 2.0 import "d3.js" as D3 Canvas { //    onPaint { } //   //    Item { PinchArea {} //    MouseArea {} //   } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まず、必要なライブラリを接続します。QtQuickコンポーネントのセットと、D3.jsライブラリ自体です。 JavaScriptファイルの接続は、他のQMLファイルの接続に似ています。 この問題を解決するために、 importキーワードも使用されます。



JavaScriptファイルの接続に関する完全な情報は、 公式ドキュメントに記載されています 。 インポート時の主な側面は、このドキュメントで定義されているすべての関数が利用できる名前を指定することです。 コードでは、このオブジェクトの名前をD3に付けました 。



Plotのルート要素はCanvasであり 、その上に情報を表示します。 この要素で計算とジェスチャー処理を実行するために、一連のプロパティと関数を定義しました。 重要なのはonPaint-画像レンダリングイベントのハンドラーです。



Canvasに関する子要素はItemです 。これは、 PinchAreaおよびMouseAreaオブジェクトの単なるコンテナです 。 これらのオブジェクトは、ピンチジェスチャを処理し、近似のレベルを制御し、ドラッグして座標軸の位置を制御するために追加されました。 ジェスチャーデータハンドラーは、グラフの描画に使用される座標を更新します。

表示プロセスの概要

レンダリングプロセスは段階的に考慮されません。一方で、アプリケーションのソースコードを見て、詳細を自分で理解できるためです。 同時に、困難を引き起こす可能性のある重要なポイントに注目します。



主要な要素である座標グリッドと関数グラフを表示するには、 d3.line関数を使用します。 この関数を使用すると、任意のポリラインと直線を表示できます。 関数への入力はデータの配列です。 これを使用するには、次のパラメーターを構成する必要があります。

• 配列要素から縦座標と横座標を取得するようにジェネレーターを構成します。
• 線を相互に接続する方法を示します。
• 情報を表示するグラフィカルコンテキストを示します。

グラフ線の画像を形成する例を考えてみましょう。

 var context = plot.getContext('2d'); var xScale = d3.scaleLinear() .range([leftMargin, width]) .domain([minX, maxX]); var yScale = d3.scaleLinear() .range([height - bottomMargin, 0]) .domain([minY, maxY]); var line = d3.line().x(function (d) { return xScale(d[0]); }).y(function (d) { return yScale(d[1]); }).curve(d3.curveNatural).context(context);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まず、スケールd3.scaleLinearを設定します。これにより、グラフのスケーリングの作業が簡素化されます。 range（）メソッドの呼び出しで画像の物理的な境界を示し、 domain（）メソッドの呼び出しでグラフの境界を示すだけで十分です。 横座標、縦座標のスケールが形成され、それぞれxScaleおよびyScale変数に書き込まれます。



次に、グラフ値の配列をパラメーターとして使用する線について説明します。 メソッド呼び出しx（）で、配列の最初の要素を抽出し、 xScaleスケールを使用して変換する関数を渡します。 同様の関数も引数としてy（）メソッド呼び出しに渡され、配列の2番目の要素の呼び出しのみに渡されます。 次に、要素間の通信方法を設定します。この場合はd3.curveNaturalです。 D3.jsは、曲線を構築するための膨大な数のオプションをサポートしています 。それらについては、 公式ドキュメントで読むことができます 。 線の作成の最後に、画像のグラフィックコンテキストに関連付けます。



線を描くには、作成した線を呼び出して、必要な座標の配列を渡します。

 line([[1, 2], [2, 15], [3, 8], [4, 6]])
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

同様に、軸を表示するために線が描かれます。



各描画の開始時にキャンバスが完全にクリアされることに注意してください。 これは、前の画像が現在の状態の表示に干渉しないようにするために必要です。 また、ユーザーがグラフを拡大するか、要素の表示の境界が変更されると、新しい画像が表示されます。

プロットコンポーネントの使用

このコンポーネントを使用して、関数ごとに3つのグラフの表示を実装しました。 チャートごとに、ページを作成しました。 これらのページでは、値が計算されてグラフが表示されます。



各チャートの一般的な構造を以下に示します。

 Page { property var elem property var border property var rootLine id: page backNavigation: plot.controlNavigation() Plot { id: plot anchors.margins: Theme.horizontalPageMargin width: parent.width height: parent.height function drawPlot(line) { line(getPoints()); } function getPoints() { //    . } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ルート要素は、グラフを表示するためにスタックにプッシュされるページです。 パラメーターは、方程式の係数、グラフを表示するための初期境界、および関数の根の位置を示す線です。



次に、ユーザーがチャートを操作した場合、ナビゲーションをオフにします。 これにより、ジェスチャが誤ってページから戻るのを防ぎます。

ページ上の唯一の要素はPlot要素です。 使用可能なすべてのスペースを占有することを明示的に示し、グラフの表示に使用されます。 drawPlotメソッドも定義します。 このメソッドは、関数を再表示する必要があるたびに呼び出されます。



引数として、上に示すように、 Plot要素で構成された行が渡されます。 これを呼び出して、 getPoints（）メソッドの結果を渡します。 最後の方法は、個々のチャートに固有のポイントのセットを形成します。

マトリックス計算アプリ

この情報を使用して、アプリケーションに同様の機能を簡単に実装できることを願っています。 また、Matrix Calculatorアプリケーションの関数の実装について詳しくは、 OpenRepos.netリポジトリからインストールするか、 BitBucketリポジトリで利用可能なソースコードでライブラリを操作することをご覧ください 。



アプリケーションのスクリーンショットを以下に示します。





UPD ：アプリケーションのスクリーンショットを追加しました。