Important: Please read the Qt Code of Conduct -

Dotted lines in QML

  • 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.

  • May be BorderImage helps?

  • @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.

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

  • Moderators

    wow, that's like using a hammer to tighten a screw!

    A simple Canvas element will do just fine

            var ctx = getContext("2d");
            ctx.setLineDash([5, 15]);
            ctx.lineTo(400, 100);

Log in to reply