Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/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

    @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();
         }
    }
    

Log in to reply