[PySide] GraphicsViewのテスト その1 タイル状に並べる

イメージ結合ツールの見栄え向上のために、
タイル状表示+ドラッグ&ドロップで画像を並べ替え的な事をできないものかと調べてみました。

GraphicsView周りはまだ手探り状態…とりあえず、入れ替えるのは置いておいて、タイル状に配置しつつ
移動→元の位置に戻る という動作をする所まで調べてみました。
この動作は、TableViewでも良いのかな?と思ったのですが、描画周りに小回りがきくので
今回はGraphicsViewでやってみることにしました。

まずソース。

graphics_view_test

クリックすると□が追加され、1行5つ(↑的には4つですが)□が並ぶようになります。
ドラッグ&ドロップすると動かす事ができるが、ドロップすると元の位置に戻ります。

GraphicsItemのオブジェクトに、何番目かの情報を持たせて
それを元にオフセットをかけています。
最初は、ShapeとBoundingRectでオフセットをしていたのですが
それだと、作成したところが、オブジェクトの位置の0地点になってしまうため
元に戻る処理がイマイチ…だったので、□の描画は0位置で行い、QTransformを使用して
位置を移動させるようにしてみました。
これで self.num の変更で位置をずらせるようになりました。
self.scenePos が、Mayaで言うところのTransformNodeの値、boundingRectやshapeでの数値が
Shapeノードの頂点座標的なのかなぁと脳内変換しています。
これは、マトリクスの勉強に使えそう(汗

次はこれに+して、ドラッグ&ドロップで並びかえをできるようにしたいです。
ドラッグしてるオブジェクトをドロップ先のところに挿入する感じでしょうか。
さらに、この□のなかに画像とファイル名を表示して、おしゃれな感じにしてみます。

こういうUI作ってると、市販ツールのすごさを感じます。
ツールの使いやすさというか、稼働率って、見た目の良さ・わかりやすさに比例すると思うんですよね。
やっぱりさわりたくなるツール・使いやすいツールのためには
面倒でもUIの工夫は必須だと思う今日この頃…もっと勉強がんばろう。

ツールの動作をキャプチャ→GIFにしてみた。
AVIはいろいろめんどうだったけど、これなら比較的に使いやすいかも?

コメントを残す

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


*