Solved now they want a pattern...
-
Hi all -
Working on an app that makes extensive use of QML Rectangles. The customer has decided that, under certain circumstances, they'd like these rectangles to be cross-lined, like this:
Before I tell them that this isn't natively supported in Qt (this will mean something to them, as they specifically asked for Qt to be used on this project), does anyone have any tricks up their sleeve?Thanks...
-
@mzimmers Hi. I faced a similar problem in the past. The ways I found:
- Load an image.
- Use Canvas to draw black lines over a red rectangle.
- Use QQuickPaintedItem to do the same as item 2 but in C++ (You can use a Qt::BrushStyle).
I hope it helps.
-
You could also draw a bunch of rectangles vertically inside a rectangle. Then rotate them. Set clipping to true on outside rectangle.
-
Wiggle timer is optional. I just did it for the lols.
import QtQuick 2.15 import QtQuick.Window 2.15 Window { width: 480 height: 480 visible: true title: qsTr("pattern") Timer { id: wiggletimer interval: 1000 running: true repeat: false property real wiggle: 0.0 onTriggered: { interval = (Math.random() + 0.5) * 5000; wiggle = Math.random() * 0.5 start() } } Rectangle { id: masterrect anchors.centerIn: parent width: 400 height: 400 border.width: 1 Item { anchors.fill: parent anchors.margins: 1 clip: true Rectangle { width: parent.width * 1.5 height: parent.height * 1.5 anchors.centerIn: parent rotation: 45 + wiggletimer.wiggle Repeater { id: rmodel model: 20 Rectangle { property real size: parent.width / rmodel.count height: parent.height * 1.5 width: size * 0.2 x: size * 0.5 + size * index - width/2 color: "black" } } } } } }
-
I don't know how performant it will be. It might be dog slow.
-
Lots of good suggestions...I went with what was easiest (for me), which was using an image:
Rectangle { ... Image { id: highlight source: resourceHelper.imageSourcePrefix + "images/hatch.png" visible: (cellText === "S1") height: parent.height width: parent.width fillMode: Image.Pad }
Produces this:
Thanks for all the good ideas.
Oh, fcarney: the wiggle performance wasn't terrible, but it was quite subtle -- it took me a while to realize that anything was even changing.
mz
-
@mzimmers That looks really nice.
-
@mzimmers Hi. I like the UI style. If all your items have round corners, maybe the cross-lined rectangle should have too, in order to maintain consistency.
-
@oria66 oh man...I completely overlooked that. Good catch...thanks!
EDIT:
But...how does one radius an Image? I wonder if a different fill mode is the answer...?
-
@mzimmers Also. All your rectangles have separations (5 px?) and S3 and S2 don't have one. In the name of consistency too, lol. By the way, really love the color selection. Is it for an industry application? Kind of HMI?
-
@oria66 said in now they want a pattern...:
@mzimmers Also. All your rectangles have separations (5 px?) and S3 and S2 don't have one. In the name of consistency too, lol.
Yep...that's actually a faithful representation of the rack. Bottles S2 and S3 share a long slot because there just wasn't room for a separator.
By the way, really love the color selection. Is for an industry application? Kind of HMI?
It's a medical research application. The customer supplied the colors. They're fine for the UI, but our attempt to use them for QR barcode symbols was not successful, so we're looking at alternatives.
-
@mzimmers mmm, I see. I don't think a fill mode property works for that kind of use. Maybe two options here: 1. Edit the image in an external editor (the easy way I believe). 2. Maybe, some crop function following a shape. I know this can be achieved with QPainter and QImage on the C++ side, but on the QML side, I don't know.
-
I don't think editing the image is the right approach, as the image is applied to bottles of multiple sizes (though I suppose I could create multiple files, one for each bottle size). Also, I'd have to do the radiusing by hand, and I don't have any editing tools for that.
-
@mzimmers Maybe this can help you.
https://stackoverflow.com/questions/42432456/circular-image-in-qt-qml/42432691
-
@oria66 oh, that is a thing of beauty:
Rectangle { id: bottle property int radiusValue: 5 * bottleScaleFactor radius: radiusValue Image { id: highlight source: resourceHelper.imageSourcePrefix + "images/hatch.png" visible: (cellText.charAt(0) == "S") height: parent.height width: height fillMode: Image.Pad layer.enabled: true layer.effect: OpacityMask { maskSource: opacityMask } } Rectangle { id: opacityMask height: parent.height width: height visible: false radius: parent.radiusValue }
(I changed it so the entire group is highlighted.)Thank you SO much for finding that!
-
@mzimmers glad to help.