How to use qml to implement a navigation pad?
-
the navigation pad have five buttons:left, right,up,down,select. select button in center, other four buttons surround select button. looks like the picture in this address:http://jerk66.blog.163.com/album/#m=2&aid=240084932&pid=7707752037
-
I use QML and extension plugin to achieve the polygon navigation.
Using QML to display the image changing effect, and use c++ extension plugin inherited from "QDeclarativeItem":http://qt-project.org/doc/qt-4.8/qdeclarativeitem.html to import each parts of region of images to verify which part I navigate on.
Try to store those images , and use mousePressEvent, mouseReleaseEvent, hoverMoveEvent virtual function from "QGraphicsItem":http://qt-project.org/doc/qt-4.8/qgraphicsitem.html to catch mouse event. Then using the the QPointF of event::pos() and put into the "QImage::pixel()":http://qt-project.org/doc/qt-4.8/qimage.html#pixel to verify whether part of image it right on that. (Use "qAlpha()":http://qt-project.org/doc/qt-4.8/qcolor.html#qAlpha to verify it) (The image size should be the same with total panel, and the part of image's has alpha value, the rest of that is 0)
If match is occurs, then signal the identify of part image to QML. The QML try to display its correspondent effective image.
-
Well, I guess it wont work with just QML. You have to write your own extension Plugin in C++ if you want to be able to determine if the exact shape of a button is selected. A MouseArea in QML does unfortunately only support a rectangular region.
I would however just place 4 rectangular MouseAreas over it, the result will not be perfect but I think it will be good enough for most use cases.