[PySide] SVGファイルで四角じゃないボタンを作る GraphicsItem版

前回はSVGファイルをそのまま使うのをやってみましたが、
今回は描画する部分も書いて、ホバーしたりクリックしたりするときに
色が変わるようにしてみました。

heart_test

実行結果はこんな感じに。
SVGファイルは → これ
ファイルはPhotoShopでシェイプを作成→画像アセット作成機能を利用して作成しています。

前回、ベジェ曲線が上手くできなかったのですが、それの原因は

スタートの座標をendにミスってただけでした ダメーポorz

前回からの大きな修正点は、PainterPathのオブジェクトを返す部分を関数にしたところ
Clickしたときに動作する Signal を作成したところ。

Signalを作る時に1つ悩んだのが、

AttributeError: ‘PySide.QtCore.Signal’ object has no attribute ‘connect’

このエラー。
Signalちゃんと書いたのに何でだよ…と、調べたら QObject を継承していないから というのが原因でした。
QGraphicsItemはQObjectを継承していないんですね(汗
なので、今回は QGraphicsItem だけではなく、QObjectも継承してます。

新しい追加は、 hoverEnterEvent LeaveEvent , mousePressEvent,ReleaseEvent を追加。
↑を利用して、色を変更する というのを実現しています。
Eventで色を変更した場合は、 update() をしないと、再描画が行われないのに注意が必要です。また、mousePressなどのイベントはデフォルトで使用できるのですが
hover系のイベントはデフォルトではOffになっているため、

このようにEventをTrueにしてあげます。
ReleaseEventは、マウスがオブジェクトの外か中かで色が変わるので
isUnserMouse() でマウス位置を判定して色を変更しています。

SvgItem を使用した場合は、SVGファイルの見た目そのまま使えるので
それはそれでメリットがあるなーと思いました。
今回のは、カーブの数値のみしか使っていないので見た目の制御は
スクリプト内でやらなければいけないので…一長一短ですね。

今回は、ドラッグして動かすとかの仕組みは入れていないですが、前にやった仕組みと構造は同じなので、組み合わせれば問題なく動作するはず。

とりあえず、特殊なボタンまわりはコレをベースにすれば出来ないことはなさそう…かな?

次はなにしようズサーc⌒っ゚Д゚)っ

コメントを残す

メールアドレスが公開されることはありません。


*