qt - How to make a resizable rectangle in QML? -

-

i'm looking simple way create rectangle in qquickitem. want resize, , drag borders of rectangle (found @ resizable qrubberband)

enter image description here

has idea?

there several ways achieve desired result. since i've considered implementation of similar component cropping tool software of mine, i'm going share toy example uses part of code.

differently rubber band in example, rectangle resizable on single axis @ time. i'm confident can build on , customise code meet needs.

the basic idea of code exploit drag property of mousearea. can used move around rectangle and, combined mousex , mousey properties, resize it.

dragging active inside rectangle whereas resizing active on knobs set on sides of rectangle (no mouse cursor change set sake of brevity).

import qtquick 2.4 import qtquick.controls 1.3  applicationwindow {     title: qstr("test crop")     width: 640     height: 480     visible: true     property var selection: undefined      image {         id: image1         anchors.fill: parent         source: "http://cdn.cutestpaw.com/wp-content/uploads/2013/01/l-kitty-attack.jpg"          mousearea {             anchors.fill: parent             onclicked: {                 if(!selection)                     selection = selectioncomponent.createobject(parent, {"x": parent.width / 4, "y": parent.height / 4, "width": parent.width / 2, "height": parent.width / 2})             }         }     }      component {         id: selectioncomponent          rectangle {             id: selcomp             border {                 width: 2                 color: "steelblue"             }             color: "#354682b4"              property int rulerssize: 18              mousearea {     // drag mouse area                 anchors.fill: parent                 drag{                     target: parent                     minimumx: 0                     minimumy: 0                     maximumx: parent.parent.width - parent.width                     maximumy: parent.parent.height - parent.height                     smoothed: true                 }                  ondoubleclicked: {                     parent.destroy()        // destroy component                 }             }              rectangle {                 width: rulerssize                 height: rulerssize                 radius: rulerssize                 color: "steelblue"                 anchors.horizontalcenter: parent.left                 anchors.verticalcenter: parent.verticalcenter                  mousearea {                     anchors.fill: parent                     drag{ target: parent; axis: drag.xaxis }                     onmousexchanged: {                         if(drag.active){                             selcomp.width = selcomp.width - mousex                             selcomp.x = selcomp.x + mousex                             if(selcomp.width < 30)                                 selcomp.width = 30                         }                     }                 }             }              rectangle {                 width: rulerssize                 height: rulerssize                 radius: rulerssize                 color: "steelblue"                 anchors.horizontalcenter: parent.right                 anchors.verticalcenter: parent.verticalcenter                  mousearea {                     anchors.fill: parent                     drag{ target: parent; axis: drag.xaxis }                     onmousexchanged: {                         if(drag.active){                             selcomp.width = selcomp.width + mousex                             if(selcomp.width < 50)                                 selcomp.width = 50                         }                     }                 }             }              rectangle {                 width: rulerssize                 height: rulerssize                 radius: rulerssize                 x: parent.x / 2                 y: 0                 color: "steelblue"                 anchors.horizontalcenter: parent.horizontalcenter                 anchors.verticalcenter: parent.top                  mousearea {                     anchors.fill: parent                     drag{ target: parent; axis: drag.yaxis }                     onmouseychanged: {                         if(drag.active){                             selcomp.height = selcomp.height - mousey                             selcomp.y = selcomp.y + mousey                             if(selcomp.height < 50)                                 selcomp.height = 50                         }                     }                 }             }               rectangle {                 width: rulerssize                 height: rulerssize                 radius: rulerssize                 x: parent.x / 2                 y: parent.y                 color: "steelblue"                 anchors.horizontalcenter: parent.horizontalcenter                 anchors.verticalcenter: parent.bottom                  mousearea {                     anchors.fill: parent                     drag{ target: parent; axis: drag.yaxis }                     onmouseychanged: {                         if(drag.active){                             selcomp.height = selcomp.height + mousey                             if(selcomp.height < 50)                                 selcomp.height = 50                         }                     }                 }             }         }     } }

a screenshot of example: enter image description here


Comments

Post a Comment

Popular posts from this blog

node.js - Mongoose: Cast to ObjectId failed for value on newly created object after setting the value -

-
this question has answer here: what's mongoose error cast objectid failed value xxx @ path “_id”? 7 answers even though has been asked many times because entity has no valid objectid field. i came across situation objectid set value can casted objectid still error. the schema: var serviceschema = parammongoose.schema({ servicename:{ type: parammongoose.schema.types.objectid , ref: 'servicenames',required:true } }); pseudo code: servicefromdb=new service({servicename:'some name'}); servicefromdb.servicename='000000000000000000000001'; servicefromdb.save(function(paramerror,paramdata){ if(paramerror){ console.log('but but...',servicefromdb,paramerror) } }); the output of code is: but but... { servicename: 000000000000000000000001, _id: 55079a90286f49280364f78b } { [casterror: cast objectid faile...
Read more

gradle error "Cannot convert the provided notation to a File or URI" -

-
i have defined 2 system properties in gradle.properties: systemprop.builddir=build systemprop.cfgdir=build\\cfg and have following task defined in build.gradle: task clean(group:'clean',description:'clean project') << { ant.sequential { delete(dir: system.properties.builddir) mkdir(dir: system.properties.builddir) delete(dir: system.properties.cfgdir) mkdir(dir: system.properties.cfgdir) } } this generates following error: execution failed task ':clean'. > cannot convert provided notation file or uri: {dir=build}. following types/formats supported: - string or charsequence path, e.g 'src/main/java' or '/usr/include' - string or charsequence uri, e.g 'file:/usr/include' - file instance. - uri or url instance. but equivalent block of code not generate error , works expected: task clean(group:'clean',description:'clean project') << { ...
Read more

python - NameError: name 'subprocess' is not defined -

-
i'm trying make rng website: http://jamesdotcom.com/?p=417 . when run following code: captureimage = subprocess.popen( [ "fswebcam", "-r", "356x292", "-d", "/dev/video0", "static.jpg", "--skip", "10" ], stdout=devnull, stderr=devnull) captureimage.communicate() i following error message: nameerror: name 'subprocess' not defined what should do? thanks have imported first? import subprocess captureimage = subprocess.popen(["fswebcam", ...) subprocess included in python standard library since python 2.4. should not necessary install it.
Read more