[Interest] QML version of QRubberBand

Jason H jhihn at gmx.com
Wed Apr 13 16:24:43 CEST 2016

> > You'll want a background MouseArea, and onMouseDown, you locate the Rectangle x,y, and on mouseMove, you adjust the height and width per the new mouse   > location minus, the y and x.
> > I've not one a "rubberband" per se, just a background swipe gesture, but it should work the same.
> Thank you for quick reply, but do I _have_to_ create separate
> invisible top-level QML Window as it can be done in other way? Lets
> say I have small window 200x200 px
> with a button which should make rubberband visible and screen with
> resolution 1024x768. After appearing rubberband should allow to select
> any part of the whole screen and not only 200x200 area.

If you click a button to make the rubber band visible, how is it initialized on the screen? Seems like then you have to provide drag handles? And managing that selection via handles is not a good user experience. Maybe just change the mouse cursor?

If you have a button, then yes, you can have a top-level. It's pretty easy:
Window {
   <your app elements?>
   fucntion handleSelecttion(x,y,width, height) { ...your code... }
  Item {
    onStartSelectionEvent: selLayer.visible = true
  <wrap below in an Item and modify visible as needed if you have a toggle for this ability>
  MouseArea { 
    property int startX: -1
    property int startY: -1
    signal areaSelected(int x, int y, int width, int height);
    id: selLayer
    anchors.fill: parent
    onPressed: {mouseX = x; mouseY =y }
    onReleased: { areaSelected(mouseX, mouseY, x-mouseX, y-mouseY) }
    onAreaSelected: {
       handleSelection(x,y,width, height)
       visible = false

However note that if you move the selLayer to BEFORE <your app elements?> you can leave it visible, and the user always has the selection ability as things stack vertically the lower in the file you go. 

More information about the Interest mailing list