🔲 Rectangle Area Handler
The RectangleAreaHandler
allow easy manipulation of a start
and end
vector2d. It can be used as an handler to select a particular area, to crop an image, etc…
start
and end
are always normalized for easy manipulation (ie value are in between 0 and 1). The real coordinate are available with realStartX
, realStartY
, realEndX
, realEndY
.
By default the size of the handler is undefined. It should fill a parent.
import QtQuick
import Qaterial as Qaterial
Rectangle
{
width: 200
height: 200
Qaterial.RectangleAreaHandler
{
// Selected area will be render in 200x200 parent
anchors.fill: parent
// Default start point will be 50px, 50px
start: Qt.vector2d(0.25, 0.25)
// Default end point will be 150px, 150px
end: Qt.vector2d(0.75, 0.75)
onMoved: (start, end) => console.log(`moved start: ${start}, end: ${end}`)
}
}
Behavior
The RectangleAreaHandler
behavior can be customized in many ways.
- Grabbing area that can be controlled with
inMargin
,outMargin
,handleSize
- Allow to reverse the rectangle with
reverseAllowed
,horizontalReverseAllowed
,verticalReverseAllowed
. - Specify a minimum area with
minSize
. Note: When usingminSize
, it automatically disablereverse
behavior.
Grabbing Area
Grabbing Area can be controlled with 3 parameters:
handleSize
: Control the visible render size of handles. Rendered in green in example.outMargin
: Margin to allow easy grab outside of visual handle. Rendered in cyan in example.inMargin
: Margin inside visual handles before grabbing the full rectangle for move. Rendered in orange in the example.
import Qaterial as Qaterial
Qaterial.RectangleAreaHandler
{
inMargin: 8
outMargin: 16
handleSize: 32
}
Reverse Allowed
By default the selection will reversed itself if user try to do a negative rectangle. This can be disabled by settings reversedAllowed
to false. This can be finer tuned by using horizontalReverseAllowed
or verticalReverseAllowed
to only disable on a particular axis.
import Qaterial as Qaterial
Qaterial.RectangleAreaHandler
{
horizontalReverseAllowed: true
verticalReverseAllowed: true
}
Minimum Size
By default the minimum size of made with start/end is 0. This behavior can be changed by setting minSize
.
import Qaterial as Qaterial
Qaterial.RectangleAreaHandler
{
minSize: Qt.vector2d(0.1, 0.1)
}
When using
minSize
, it automatically disablereverse
behavior
Customization
A RectangleAreaHandler
is made a 4 handle
and 4 handleLinker
that can be customized.
handle
: x, y, width, height are set by the loader. It should have ahovered
property.handleLinked
: x, y are set by the loader. It should have ahovered
andhorizontal
property.- When
horizontal
is true,width
is set by loader,height
should be set by the item. - When
horizontal
is false,height
is set by loader,width
should be set by the item.
- When
import QtQuick
import Qaterial as Qaterial
import QtQuick.Shapes 1.14
Qaterial.RectangleAreaHandler
{
id: root
handle: Rectangle
{
property bool hovered
color: "#FF9800"
width: 10
height: 10
scale: hovered ? 2 : 1
Behavior on scale { NumberAnimation { duration: 100 } }
rotation: 45
antialiasing: true
}
handleLinker: Item
{
id: _linker
property bool horizontal
property bool hovered
Shape
{
ShapePath
{
strokeWidth: hovered ? 4 : 2
Behavior on strokeWidth { NumberAnimation { duration: 50 } }
strokeColor: "#FF9800"
strokeStyle: ShapePath.DashLine
dashPattern: [ 1, 4 ]
PathLine
{
x: horizontal ? _linker.width : 0
y: horizontal ? 0 : _linker.height
}
}
}
}
}