# はじめに
自分で撮ったスクリーンショットに矢印を入れてみたくなりました
矢印は自由変形でも劣化しないようにベクター系にしたい
そうなるとペイント系とドロー系の2種類の画像を扱うことになります
Qtの画像処理には様々なものがあり、他のライブラリを頼らずにQtだけで十分イケますが、すっきりしたチュートは見つけることが出来なかったので、書いてみることにしました
Qtの画像処理には様々なものがあり、他のライブラリを頼らずにQtだけで十分イケますが、簡単なチュートは見つけることが出来なかったので、書いてみることにしました
間違いがあったら指摘いただけると嬉しいです
よろしくお願いします
- 環境
win7sp1-64　 Python 3.72　 PyQt 5.12
## コード
まずコードを全て乗せます
解説的なものはそのあとで書かせていただきます
まずコードを全て載せます
----------code-------
pyファイルは一つです
すぐ実行委出来るように、素材の矢印ファイルも書いておきます
背景画像は自分で用意してください
600*400 くらいが良いと思います
すぐ実行出来るように、素材の矢印ファイル(svg)も書いておきます
テキストです、拡張子を.svgにして保存して下さい
背景画像は何でも良いけど何もなければこれを使ってください
----------fig-------------

---コード----


## 基本的な仕組みについて
Qtにおける画像処理について、今回のように複数の画像オブジェクトを扱う場合は、QgaphicsItem・QGraphicsScene・QGraphicsViewの仕組みを使うのが良いと思います
これらの関係の簡単な概念図を私なりに書いてみました
---------figure-------------
ちょっと面倒に見えますがコードをご覧いただいたように、全然面倒ではないです
この仕組みを使わず、適当なwidgetを用意してそこにpaintしても同じ事は出来るはずです
でもこの仕組みを利用した方が色んな事が簡単に出来る、生産性が高いってことです
この仕組みを使わず、適当なwidgetを用意してそこにpaintしても同じ事は出来ますが、この仕組みを利用した方が色んな事が簡単に出来る、生産性が高いってことです
## コードの全体像
メインのウインドウはQGraphicsViewになります
画像と矢印はQgaphicsItemとしてファイルから読み込んで、QGraphicsSceneに追加して、QGraphicsViewで表示します
矢印の属性を選択可・移動可にしておくだけで、マウスで簡単に移動できるようになります
矢印を拡大・回転出来るようにします
この操作はViewでもQgaphicsItem自身でも出来ます
Itemでやる場合はサブクラスを作ってコードを書くことになります
Sceneに登録するアイテムが少なければviewで操作しても良いと思うけど、多くなると管理が大変なので、アイテム自身にやらせた方が良いと思い、私はサブクラスを作って操作することにしてます
画像と矢印はQgaphicsItemとしてファイルから読み込んで作り、QGraphicsSceneに追加して、QGraphicsViewで表示する流れです
アイテムの属性を選択可・移動可にしておくだけで、マウスで簡単に移動できるようになります
矢印をキーで拡大・回転出来るようにしましたが、この操作はViewでもQgaphicsItem自身でも出来ます
Itemでやる場合はサブクラスを作ってそこにコードを書くことになります
Sceneに登録するアイテムが少なければviewで操作しても良いと思うけど、多くなると管理が大変なので、アイテム自身にやらせた方が良いと思い、私はサブクラスを作って操作することにしました
## 細かい解説
コードの中で気がついたところを簡単に解説します
①
②
③
## svgについて
矢印のベクタデータはsvg形式としました
Qt環境でベクタデータを扱う場合、基本はPathを使うべきだと思いますが、私には今ひとつ理解できてないのと、保存して再利用する方法がわからなかったのでsvgにしました。しかしpathデータでも同じやり方で出来るはずです
矢印以外のオブジェクトを作成したければ、オンラインのsvgエディタも豊富ですし、InkScapeでも簡単に作れます
ただし自由な図形を描けるようになるには少し勉強が必要かもしれません