Qt GUI で QPainterPath::angleAtPercent() 関数を使ってパスの接線方向を取得する

Qt GUI の QPainterPath::angleAtPercent() 関数解説

QPainterPath::angleAtPercent() 関数は、パス上の指定された点における接線の角度を取得します。これは、パスに沿って移動するオブジェクトの向きを制御したり、パスに沿ってテキストを描画したりするなど、さまざまな場面で役立ちます。

詳細

この関数は、以下の引数を受け取ります。

• t: パス上の点の割合を表す浮動小数点数です。0.0 はパスの開始点、1.0 はパスの終点です。

この関数は、以下の値を返します。

• 指定された点における接線の角度 (度単位)

コード例

#include <QPainterPath>

int main() {
  QPainterPath path;
  path.moveTo(0, 0);
  path.lineTo(100, 100);

  // パスの半分 (50%) の点における接線の角度を取得
  qreal angle = path.angleAtPercent(0.5);

  // 角度を出力
  qDebug() << "Angle at 50%: " << angle;

  return 0;
}

出力例

Angle at 50%: 45.0

注意事項

• パスが閉じていない場合、この関数は undefined な値を返します。
• パスが複数のサブパスで構成されている場合、この関数は最初のサブパスの角度のみを返します。

補足

• QPainterPath::angleAtPercent() 関数は、QPainterPath::slopeAtPercent() 関数と似ていますが、こちらは角度を度単位で返します。
• パスの接線は、その点におけるパスの方向を表します。
• パスの開始点と終点の接線は、常に 0 度と 180 度になります。

応用例

• パスの形状に合わせてオブジェクトを回転させる
• パスの形状に合わせてテキストを描画する
• パスの形状に合わせてアニメーションを作成する

Qt GUI の QPainterPath::angleAtPercent() 関数を使ったサンプルコード

#include <QPainterPath>
#include <QGraphicsScene>
#include <QGraphicsItem>

class MyItem : public QGraphicsItem {
 public:
  MyItem() {
    // パスを初期化
    path_.moveTo(0, 0);
    path_.lineTo(100, 100);
  }

  QRectF boundingRect() const override {
    return path_.boundingRect();
  }

  void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) override {
    // パスの形状に合わせてアイテムを回転
    painter->translate(boundingRect().center());
    painter->rotate(path_.angleAtPercent(0.5));
    painter->drawPath(path_);
  }

 private:
  QPainterPath path_;
};

int main() {
  QGraphicsScene scene;
  scene.setSceneRect(0, 0, 200, 200);

  // アイテムを作成してシーンに追加
  MyItem *item = new MyItem;
  scene.addItem(item);

  // シーンを表示
  QGraphicsView view(&scene);
  view.show();

  return 0;
}

パスの形状に合わせてテキストを描画する

#include <QPainterPath>
#include <QGraphicsScene>
#include <QGraphicsTextItem>

int main() {
  QGraphicsScene scene;
  scene.setSceneRect(0, 0, 200, 200);

  // パスを作成
  QPainterPath path;
  path.moveTo(0, 0);
  path.lineTo(100, 100);

  // テキストアイテムを作成
  QGraphicsTextItem *textItem = new QGraphicsTextItem("Hello, world!");
  textItem->setPos(path.pointAtPercent(0.5));

  // テキストをパスの形状に合わせて回転
  textItem->setRotation(path.angleAtPercent(0.5));

  // アイテムをシーンに追加
  scene.addItem(textItem);

  // シーンを表示
  QGraphicsView view(&scene);
  view.show();

  return 0;
}

パスの形状に合わせてアニメーションを作成する

#include <QPainterPath>
#include <QGraphicsScene>
#include <QGraphicsItem>
#include <QTimer>

class MyItem : public QGraphicsItem {
 public:
  MyItem() {
    // パスを初期化
    path_.moveTo(0, 0);
    path_.lineTo(100, 100);

    // タイマーを設定
    timer_ = new QTimer(this);
    timer_->setInterval(100);
    connect(timer_, &QTimer::timeout, this, &MyItem::update);
    timer_->start();
  }

  QRectF boundingRect() const override {
    return path_.boundingRect();
  }

  void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) override {
    // パスの形状に合わせてアイテムを回転
    painter->translate(boundingRect().center());
    painter->rotate(angle_);
    painter->drawPath(path_);
  }

 private:
  QPainterPath path_;
  qreal angle_ = 0.0;
  QTimer *timer_;

  void update() {
    // 角度を更新
    angle_ += 1.0;

    // アイテムを更新
    update();
  }
};

int main() {
  QGraphicsScene scene;
  scene.setSceneRect(0, 0, 200, 200);

  // アイテムを作成してシーンに追加
  MyItem *item = new MyItem;
  scene.addItem(item);

  // シーンを表示
  QGraphicsView view(&scene);
  view.show();

  return 0;
}

これらのサンプルコードは、QPainterPath::angleAtPercent() 関数を使ってさまざまなことができます。これらのコードを参考に、

Qt GUI でパスの接線方向を取得する他の方法

QVector2D::normal() 関数を使う

QVector2D クラスの normal() 関数は、ベクトルの法線ベクトルを取得します。パスの接線は、その点におけるパスの 2 つの接線の法線ベクトルです。

#include <QPainterPath>
#include <QVector2D>

int main() {
  QPainterPath path;
  path.moveTo(0, 0);
  path.lineTo(100, 100);

  // パスの半分 (50%) の点における接線の法線ベクトルを取得
  QVector2D normal = path.pointAtPercent(0.5).normal();

  // 角度を計算
  qreal angle = qRadiansToDegrees(atan2(normal.y(), normal.x()));

  // 角度を出力
  qDebug() << "Angle at 50%: " << angle;

  return 0;
}

QPainterPath::tangentAtPercent() 関数は、パス上の指定された点における接線ベクトルを取得します。

#include <QPainterPath>
#include <QVector2D>

int main() {
  QPainterPath path;
  path.moveTo(0, 0);
  path.lineTo(100, 100);

  // パスの半分 (50%) の点における接線ベクトルを取得
  QVector2D tangent = path.tangentAtPercent(0.5);

  // 角度を計算
  qreal angle = qRadiansToDegrees(atan2(tangent.y(), tangent.x()));

  // 角度を出力
  qDebug() << "Angle at 50%: " << angle;

  return 0;
}

数値微分を使う方法は、より複雑ですが、より精度の高い結果を得ることができます。

#include <QPainterPath>

int main() {
  QPainterPath path;
  path.moveTo(0, 0);
  path.lineTo(100, 100);

  // パスの半分 (50%) の点における接線の角度を数値微分を使って計算
  qreal angle = 0.0;
  for (qreal t = 0.49; t <= 0.51; t += 0.01) {
    QPointF p1 = path.pointAtPercent(t);
    QPointF p2 = path.pointAtPercent(t + 0.01);
    angle = qRadiansToDegrees(atan2(p2.y() - p1.y(), p2.x() - p1.x()));
  }

  // 角度を出力
  qDebug() << "Angle at 50%: " << angle;

  return 0;
}