Dotted lines in QML

Soppe

Hi,
How to draw simple, dotted lines?
I have an application that streams video from a webcamera. On top of this video i need to draw 4 corners of either solid lines, or dotted lines, so they mark a rectangle.
I need to be able to change between solid lines and dotted lines dynamicly.
I also need to be able to move these corners dynamicly.
And i need to make the corners flash (draw, not draw, draw, not draw).

I assume that i'll be able to solve the other problems once i've figured out how to properly draw dotted lines, but I'm adding it to create a better picture of what i want to achieve.

The obvious way is to make a bunch of rectangles for each corner, and then make some of them transparent whenever i want a dotted line by setting some state property. As this is kind of hairy, I'm hoping there are better ways that does not drain a lot of resources.

Yakov Eremin

May be BorderImage helps?

Soppe

@Yakov-Eremin
Seems to only be for images. I'm afraid i need something i can use on top of a live webcam stream. It's not supposed to work as a border, just as a marker in the middle of the screen. Pretty much like the upper left crosshair here.

Shahazan Ali

Row/Column {
anchors.centerIn: parent
spacing: 10
Repeater {
model: 100 // or any number of dots you want
Rectangle {width: 10; height: 2; color: "white"}
}
}

J.Hilk

@shahazan-ali
wow, that's like using a hammer to tighten a screw!

A simple Canvas element will do just fine

Canvas{
...
    onPaint:{
        var ctx = getContext("2d");
        ctx.setLineDash([5, 15]);

        ctx.beginPath();
        ctx.moveTo(0,100);
        ctx.lineTo(400, 100);
        ctx.stroke();
     }
}