👨‍👨‍👧 🕎 🕺🏽 Qt Mobilityを使用した、C ++ / Qtでの地図作成モバイルアプリケーションの開発 🔕 🤸🏿 🚍

この投稿は、コンテスト「 Smart Phones for Smart Posts 」に参加しています

前の記事では、QMLでマッピングアプリケーションを作成する方法を学びました。今日は、APIモジュールQtLocationを使用して、グラフィカルな表現Qt Graphics Viewのアーキテクチャに基づくアプリケーションの開発を検討します。この記事は、理論と実用の2つの部分に分けることができます。理論部分では、 グラフィックスビューのアーキテクチャとQtLocationモジュールを使用する主なポイントについて説明します。実際の部分では、プロジェクトを最初から作成することは説明しませんが、マップの慣性運動、特定の座標へのアニメーション化された遷移、 GPS位置、テキスト情報のスケーリングと表示のための要素など、プロジェクトの最も興味深い機能のコードを提供します。

前の記事から追加のプラグインを収集した場合、このプロジェクトでそれらを使用できます。

グラフィックスビューアーキテクチャ

グラフィック表現のアーキテクチャは、 QGraphicsSceneデータを保存するクラスと、このデータQGraphicsViewを視覚化するクラスを持っているという意味で、モデル/ビューのアーキテクチャに似ています。必要に応じて、同じシーンを異なるビューで視覚化できます。グラフィックシーンには、要素-抽象クラスQGraphicsItemから派生したクラスのオブジェクトが含まれます。

最初から、速度の向上と機能の拡張を目的としたグラフィック表現のアーキテクチャの開発に多くの努力が注がれました。シーンはスケーリング、回転、印刷できます。表示するには、組み込みのQtエンジンとOpenGLライブラリの両方を使用します。このアーキテクチャは、アニメーションとドラッグアンドドロップもサポートしています。グラフィックシーンは、ユニットから数万個の要素までの表示に適しています。40,000チップの例が良い例です。 QWidgetから派生したウィジェットもステージに配置できます。そのためには、ウィジェットをQGraphicsProxyWidgetクラスのコンストラクターに渡し、プロキシウィジェットをステージに配置する必要があります。プロキシウィジェット（またはQWidgetオブジェクト自体）は低速ですが、この速度低下が顕著になるかどうかはアプリケーションによって異なります（詳細については、 QtLabs [En]を参照してください）。

グラフィック要素の紹介

QGraphicsItemクラスは、すべてのグラフィック要素の基本クラスです。 2つの純粋に仮想的なメソッド、 boundingRect（）およびpaint（）があるため、そのインスタンスを作成することはできません。 paint（）メソッドはQWidget :: paintEvent（）メソッドに対応し、その実装は要素を描画する必要があります。 boundingRect（）メソッドは、インフラストラクチャに要素の境界矩形について通知します-衝突を検出し、見えない要素を再描画しないために使用されます。このクラスは、マウスおよびキーボードイベント、ドラッグアンドドロップ、要素のグループ化をサポートします。イベント処理は次のように機能します。ビューはマウスイベントとキーボードイベントを受信し、それらをシーンのイベントに変換し、シーンの座標に従って座標を変更し、イベントを目的の要素に渡します。

QtLocationモジュール

QtLocationモジュールは、位置情報にアクセスするための便利なインターフェースを開発者に提供します。 APIを使用すると、衛星のリストや他のソースからのデータなどの情報ソースから抽象化できます。

QtLocationには、ナビゲーションのさまざまな側面に関連する一連のクラスが付属しています。グローバルポジショニングシステム（GPS）または他の位置情報源を使用してユーザーの位置に関する情報を提供するQGeoPositionInfoSourceなどのハードウェア関連のクラス、および衛星測位情報を取得するために使用されるQGeoSatelliteInfoSourceが含まれます。

このモジュールには、緯度、経度、高度を含むQGeoCoordinateなど、位置情報を記述することを主な目的とする多くのクラスも含まれています。 QtLocationは、 QGeoBoundingAreaのような抽象的な形式で、またはより正確に、 QGeoBoundingBoxやQGeoBoundingCircleのように、地理的領域を表す方法も提供します。

地図とサービス

マップ、シーン、およびビューの操作を開始する前に、最初に地理データのソースにアクセスする必要があります。これを行う一般的な方法は、 QGeoServiceProviderを使用することです。利用可能なサービスを調べるには、 QGeoServiceProvider :: availableServiceProviders（）を使用します。利用可能なサービスがない場合は空のQStringListを返すため、開発者はこのオプションをチェックする必要があります。

QStringList services = QGeoServiceProvider::availableServiceProviders(); if (services.isEmpty()) { //      }

サービスプロバイダーを受け取ると、 QGeoMappingManagerを取得できます。これにより、マップイメージを取得できます。

  QGeoMappingManager *manager = service.mappingManager();

マップまたはルーティングでオブジェクトを検索するようマネージャーに要求するには、 searchManager（）またはroutingManager（）を呼び出す必要があります。

ユーザーのマップを描画するために、 QtLocationはQGraphicsGeoMapクラスを提供してQGeoMappingManagerからのデータを表示します。必要なのは、通常の方法でビューとシーンを作成し、シーンにマップを追加することです。

  QGraphicsScene scene; QGraphicsView view; view.setScene(&scene); QGraphicsGeoMap *geoMap = new QGraphicsGeoMap(manager); scene.addItem(geoMap);

GPS座標の取得

GPS座標を取得するには、 QGeoPositionInfoSource :: createDefaultSource（）を呼び出してQGeoPositionInfoSourceを作成する必要があります。これにより、 QGeoPositionInfoの座標に関するさまざまな情報にアクセスできます。ロケーションデータを必要とするクライアントは、 positionUpdated（）シグナルに接続して、 QGeoPositionInfoSourceがstartUpdates（）またはrequestUpdate（）を呼び出してこのシグナルの送信を開始できるようにします。

ロケーションデータを受信するクライアントの例：

  class MyClass : public QObject { Q_OBJECT public: MyClass(QObject *parent = 0) : QObject(parent) { QGeoPositionInfoSource *source = QGeoPositionInfoSource::createDefaultSource(this); if (source) { connect(source, SIGNAL(positionUpdated(QGeoPositionInfo)), this, SLOT(positionUpdated(QGeoPositionInfo))); source->startUpdates(); } } private slots: void positionUpdated(const QGeoPositionInfo &info) { qDebug() << "Position updated:" << info; } };

定期的な位置の更新が必要な場合、 setUpdateInterval（）を使用して、これらの更新が発生する頻度を決定できます。間隔が指定されていない場合、更新は利用可能になったときに行われます。たとえば、クライアントアプリケーションが30秒ごとに更新する必要がある場合：

  // Emit updates every 30 seconds if available QGeoPositionInfoSource *source = QGeoPositionInfoSource::createDefaultSource(someParent); if (source) source->setUpdateInterval(30000);

特定の座標へのアニメーション化された遷移

それで、私たちはすべてがどのように機能するかについての一般的なアイデアを得ました、今、私たちはコードに行くことができます。特定の座標へのスムーズなマップの動きを作成するには、 QGraphicsGeoMapクラスによって提供される機能を拡張する必要があります。

 class GeoMap : public QGraphicsGeoMap { Q_OBJECT Q_PROPERTY(double centerLatitude READ centerLatitude WRITE setCenterLatitude) Q_PROPERTY(double centerLongitude READ centerLongitude WRITE setCenterLongitude) public: GeoMap(QGeoMappingManager *manager, QGraphicsItem *parent = 0); void animatedPanTo(const QGeoCoordinate& center); double centerLatitude() const { return center().latitude(); } void setCenterLatitude(double lat); double centerLongitude() const { return center().longitude(); } void setCenterLongitude(double lon); //...

および実装：

 void GeoMap::animatedPanTo(const QtMobility::QGeoCoordinate ¢er) { QGeoCoordinate curStart(this->center()); if (curStart == center) return; //        setStatusBarText(QString("Panning to %1").arg(center.toString(QGeoCoordinate::Degrees))); QPropertyAnimation *latAnim = new QPropertyAnimation(this, "centerLatitude"); latAnim->setEndValue(center.latitude()); latAnim->setDuration(300); QPropertyAnimation *lonAnim = new QPropertyAnimation(this, "centerLongitude"); lonAnim->setEndValue(center.longitude()); lonAnim->setDuration(300); QParallelAnimationGroup *group = new QParallelAnimationGroup; group->addAnimation(latAnim); group->addAnimation(lonAnim); group->start(QAbstractAnimation::DeleteWhenStopped); } void GeoMap::setCenterLatitude(double lat) { QGeoCoordinate c = center(); c.setLatitude(lat); setCenter( c); } void GeoMap::setCenterLongitude(double lon) { QGeoCoordinate c = center(); c.setLongitude(lon); setCenter( c); }

ここで、 animatedPanTo（）を呼び出すと、マップは指定された座標に、希望する角度で、つまり新しい座標が現在の中心に対して相対的に高い場合、マップは上に移動します。 QPropertyAnimationはデフォルトではQGeoCoordinateで動作しないため、アニメーションで使用できる2つのプロパティでマップを補完しました（サポートされているタイプのリスト）。もちろん、インターポ レーターを登録し、 QVariantにQGeoCoordinateを登録することもできますが、プロパティを使用すると、はるかにわかりやすくエレガントになります。

ピンチジェスチャー

Qtには、入力方法に関係なく、一連のイベントからイベントを生成するジェスチャプログラミングフレームワークが含まれています。ジェスチャは、マウスの動き、タッチスクリーンのタッチ、または他のソースからの一連のイベントです。 Qtでは、ジェスチャー処理はQPanGesture 、 QPinchGesture、およびQSwipeGestureのクラスで表されます。スライバは、画像を増減するために使用されます。この場合、地図の縮尺を変更します。クラスに実装するには、 grabGesture（Qt :: PinchGesture）メソッドを呼び出してこのジェスチャーの処理を有効にし、マップのsceneEvent（）で処理する必要があります。

 bool GeoMap::sceneEvent(QEvent *event) { switch (event->type()) { case QEvent::Gesture: { if (QGestureEvent *gesture = static_cast<QGestureEvent *>(event)) { if (QPinchGesture *pinch = static_cast<QPinchGesture *>(gesture->gesture(Qt::PinchGesture))) { qreal scale = qLn(pinch->scaleFactor())/qLn(2); qreal zoom = 0; zoom = scale > 0 ? 1 : -1; setZoomLevel(zoomLevel() + zoom); return true; } } } default: break; } return QGraphicsGeoMap::sceneEvent(event); }

Qtでは、画面上のタッチイベントに加えて、ジェスチャーを処理できます。これらをウィジェットで受け入れるには、 Qt :: WA_AcceptTouchEvents属性を設定する必要があり、グラフィック要素の場合はacceptTouchEvents（true）を呼び出します。

キネティックスクロール

キネティックスクロールは地図の慣性運動であり、この機能を言葉でより正確に伝える方法がわからないので、動画を投稿しました。100回読むよりも一度見たほうがいいです。この機能を実装しています。ヘッダーファイルの残りの部分：

 protected: void mousePressEvent(QGraphicsSceneMouseEvent *event); void mouseMoveEvent(QGraphicsSceneMouseEvent *event); void mouseReleaseEvent(QGraphicsSceneMouseEvent *event); void mouseDoubleClickEvent(QGraphicsSceneMouseEvent *event); void wheelEvent(QGraphicsSceneWheelEvent *event); void keyPressEvent(QKeyEvent * event); void keyReleaseEvent(QKeyEvent * event); bool sceneEvent(QEvent *event); private slots: void kineticTimerEvent(); private: void panFloatWrapper(const QPointF & delta); void applyPan(const Qt::KeyboardModifiers & modifiers); void setStatusBarText(const QString &text); private: bool panActive; bool panDecellerate; // Fractional pan, used by panFloatWrapper QPointF remainingPan; // current kinetic panning speed, in pixel/msec QPointF kineticPanSpeed; QPoint panDir; QTimer kineticTimer; QTime lastMoveTime; // An entry in the mouse history. first=speed, second=time typedef QPair<QPointF, QTime> MouseHistoryEntry; // A history of the last (currently 5) mouse move events is stored in order to smooth out // movement detection for kinetic panning QList<MouseHistoryEntry> mouseHistory; StatusBarItem *m_statusBar; };

もちろん、実装で最も興味深いのは、最初に動きを制御するための設定を検討することです。

 //////////////////////////////////////////////////////////////////////////////// // TODO: Some of these could be exposed in a GUI and should probably be put elsewhere in that case // (and made non-const) // Kinect annimation properties static const bool enableKineticPanning = true; // time until kinetic panning speed slows down to 50%, in msec static const qreal kineticPanningHalflife = 160.0; // keyboard panning speed without modifiers, in pixels/msec static const qreal panSpeedNormal = 0.3; // keyboard panning speed with shift, in pixels/msec static const qreal panSpeedFast = 1.0; // minimum panning speed, in pixels/msec static const qreal kineticPanSpeedThreshold = 0.005; // temporal resolution. Smaller values take more CPU but improve visual quality static const int kineticPanningResolution = 20; // maximum time between last mouse move and mouse release for kinetic panning to kick in static const int holdTimeThreshold = 100; ////////////////////////////////////////////////////////////////////////////////

何も説明する必要はないと思います。コメントからすべてが明らかです。

実装の残り：

 void GeoMap::mousePressEvent(QGraphicsSceneMouseEvent *event) { setFocus(); if (event->button() == Qt::LeftButton) { panActive = true; // When pressing, stop the timer and stop all current kinetic panning kineticTimer.stop(); kineticPanSpeed = QPointF(); lastMoveTime = QTime::currentTime(); } event->accept(); } void GeoMap::mouseMoveEvent(QGraphicsSceneMouseEvent *event) { if (panActive) { setCursor(Qt::ClosedHandCursor); // Calculate time delta QTime currentTime = QTime::currentTime(); int deltaTime = lastMoveTime.msecsTo(currentTime); lastMoveTime = currentTime; // Calculate position delta QPointF delta = event->lastPos() - event->pos(); // Calculate and set speed if (deltaTime > 0) { kineticPanSpeed = delta / deltaTime; mouseHistory.push_back(MouseHistoryEntry(kineticPanSpeed, currentTime)); mouseHistory.pop_front(); } // Pan map panFloatWrapper(delta); } event->accept(); } void GeoMap::mouseReleaseEvent(QGraphicsSceneMouseEvent * event) { if (event->button() == Qt::LeftButton && panActive) { panActive = false; setCursor(Qt::OpenHandCursor); if (!enableKineticPanning || lastMoveTime.msecsTo(QTime::currentTime()) > holdTimeThreshold) { return; } kineticPanSpeed = QPointF(); int entries_considered = 0; QTime currentTime = QTime::currentTime(); foreach(MouseHistoryEntry entry, mouseHistory) { // first=speed, second=time int deltaTime = entry.second.msecsTo(currentTime); if (deltaTime < holdTimeThreshold) { kineticPanSpeed += entry.first; entries_considered++; } } if (entries_considered > 0) kineticPanSpeed /= entries_considered; lastMoveTime = currentTime; // When releasing the mouse button/finger while moving, // start the kinetic panning timer kineticTimer.start(); panDecellerate = true; } event->accept(); } void GeoMap::mouseDoubleClickEvent(QGraphicsSceneMouseEvent * event) { setFocus(); animatedPanTo(screenPositionToCoordinate(event->pos())); event->accept(); } // ... void GeoMap::kineticTimerEvent() { QTime currentTime = QTime::currentTime(); int deltaTime = lastMoveTime.msecsTo(currentTime); lastMoveTime = currentTime; if (panDecellerate) kineticPanSpeed *= qPow(qreal(0.5), qreal(deltaTime / kineticPanningHalflife)); QPointF scaledSpeed = kineticPanSpeed * deltaTime; if (kineticPanSpeed.manhattanLength() < kineticPanSpeedThreshold) { // Kinetic panning is almost halted -> stop it. kineticTimer.stop(); return; } panFloatWrapper(scaledSpeed); } // Wraps the pan(int, int) method to achieve floating point accuracy, // which is needed to scroll smoothly. void GeoMap::panFloatWrapper(const QPointF & delta) { // Add to previously stored panning distance remainingPan += delta; // Convert to integers QPoint move = remainingPan.toPoint(); // Commit mouse movement pan(move.x(), move.y()); // Store committed mouse movement remainingPan -= move; }

キーボード処理の実装を省略しました。プロジェクト全体をダウンロードすることで、キーボード処理の実装を理解できます。慣性運動の実装は、優れたドキュメンテーションと優れた例に対する開発者のおかげで、この例から完全にはほどほどではありません。

ステータスバーのアイテム

次に、ステータス行にさまざまなテキスト情報を表示するための要素を見てみましょう。

テキストを表示すると、要素は最初にスムーズに表示され、設定された時間だけ遅れて徐々に非表示になります。それでは、発表から始めましょう。

 // An animated status bar item that appears at the bottom // of the map class StatusBarItem : public QObject, public QGraphicsRectItem { Q_OBJECT Q_PROPERTY(int offset READ offset WRITE setOffset) public: explicit StatusBarItem(); ~StatusBarItem(); int offset() const; void setRect(qreal x, qreal y, qreal w, qreal h); public slots: void setText(QString text); void showText(QString text, quint32 timeout=3000); void show(); void hide(); void setOffset(int offset); private: int m_offset; QGraphicsSimpleTextItem *m_textItem; };

まず、要素自体はQGraphicsSimpleTextItemを含む長方形であり、単純にそれを制御します。このクラスの実装を見てみましょう。

 StatusBarItem::StatusBarItem() { m_offset = 0; setPen(QPen(QBrush(), 0)); setBrush(QBrush(QColor(0,0,0,120))); m_textItem = new QGraphicsSimpleTextItem(this); m_textItem->setBrush(QBrush(Qt::white)); setText(""); } StatusBarItem::~StatusBarItem() { } void StatusBarItem::setText(QString text) { m_textItem->setText(text); QRectF rect = m_textItem->boundingRect(); QPointF delta = this->rect().center() - rect.center(); m_textItem->setPos(delta.x(), delta.y()); } int StatusBarItem::offset() const { return m_offset; } void StatusBarItem::setRect(qreal x, qreal y, qreal w, qreal h) { QGraphicsRectItem::setRect(x, y + m_offset, w, h); QFont f; f.setFixedPitch(true); f.setPixelSize(h/1.1); m_textItem->setFont(f); setText(m_textItem->text()); } void StatusBarItem::setOffset(int offset) { this->setY(this->y() - m_offset + offset); m_offset = offset; } void StatusBarItem::showText(QString text, quint32 timeout) { setText(text); show(); QTimer::singleShot(timeout, this, SLOT(hide())); } void StatusBarItem::show() { QPropertyAnimation *anim = new QPropertyAnimation(this, "offset"); anim->setStartValue(0); anim->setEndValue(-1 * rect().height()); anim->setDuration(500); anim->start(QAbstractAnimation::DeleteWhenStopped); } void StatusBarItem::hide() { QPropertyAnimation *anim = new QPropertyAnimation(this, "offset"); anim->setStartValue(m_offset); anim->setEndValue(0); anim->setDuration(500); anim->start(QAbstractAnimation::DeleteWhenStopped); }

アニメーションは要素の位置を制御し、メソッドに応じて、要素を上下に動かします。 Qt のモットーは「コードレス」です。 さらに作成します。」完全に機能します。

スケール要素

ここで、スケーリングのためのボタンの実装を検討したかったのですが、最後に気が変わり（結果の記事のボリュームを見て）、その操作の基本原理のみを説明しました。したがって、これは通常のQGraphicsRectItemであり、これには+と-を表示するための2つのテキスト要素、および視覚的な分離のためのQGraphicsLineItemが含まれます。要素はユーザーのアクションに応答し、押されると、マップのスケールを拡大または縮小します。

  //       //  ,      0      m_geoMap->setZoomLevel(m_geoMap->zoomLevel() + zoomLevel(event->pos()));

原則として、要素はQGraphicsItemからの単一の継承で実装でき、必要な情報を描画するだけでしたが、さまざまなグラフィック要素の操作はより視覚的だと思いました。誰でもこのクラスを変更できます。その後、少しだけメモリを消費します。

ヒントとコツ

QGraphicsViewがレンダリングにOpenGL を使用するには、次のようにQGLWidgetを設定するだけです。

 #ifndef QT_NO_OPENGL setViewport(new QGLWidget(QGLFormat(QGL::SampleBuffers))); viewport()->setMouseTracking(true); setRenderHint(QPainter::HighQualityAntialiasing, true); #endif

QGLWidgetは部分的な画面更新をサポートしていないため、 QGraphicsViewの フラグを設定します。

  graphicsView->setViewportUpdateMode(QGraphicsView::FullViewportUpdate);

また、シーン内にアニメーション化または移動する要素が多数ある場合は、パフォーマンスを向上させるために、要素のインデックス付けを無効にできます。

  graphicsScene->setItemIndexMethod(QGraphicsScene::NoIndex);

インデックスは静的なシーン要素に最適です; items（）やitemAt（）などの関数でシーン要素の検索を強化します。 QGraphicsViewのフラグを最適化することも検討できます。

おわりに

この記事は大規模であることが判明し、無限に拡張できるように思えます。オブジェクトの検索、ルートのレイアウト、およびLandmark APIの操作のためのAPIは考慮しませんでした（興味がある場合は、例1および2を参照してください）。この記事では、 QtLocation APIを使用する際の主要なポイントであるGraphics View Frameworkに精通し、 Animation Frameworkの操作方法を学び、マップの慣性運動の実装、マップを管理し、テキスト情報を表示するためのさまざまな要素を調べました。一般に、それは本格的なナビゲーターに拡張できる地図を表示するための良いコンポーネントであることが判明しました。アプリケーションを実際に試すには、 Qt SDKをインストールし、Qtエミュレーターのプロジェクトをコピーする必要があります。最後に、いくつかの便利なリンク。

参照資料

PS記事へのコメントを歓迎します。これは、私のような経験の浅い著者にとって非常に役立ちます。事前に感謝します。

Qt Mobilityを使用した、C ++ / Qtでの地図作成モバイルアプリケーションの開発