Results 1 to 5 of 5

Thread: drawing lines on a canvas and move them dynamically

  1. #1
    Join Date
    Mar 2016
    Posts
    6
    Qt products
    Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Symbian S60

    Default drawing lines on a canvas and move them dynamically

    hi all,

    i have a structure with me which contains array of points from which i want to draw certain line.
    number of lines are also available in the structure.
    Based on certain response that structure data will be changed and the lines need to be redrawn. structure data will be changes dynamically.

    A very close real time example i can give is grid lines shown on reverse parking of a car, it even lines bend and change shape based on steering movement.
    I made a single line, which bends at different angles but its not at all smooth.

    the structure mentioned above holds all the points for respective vertical and horizontal lines.
    i have read many things regarding beizer curves or cardinal splines.
    Found certain code for turning line at various angles but all were in javascript.

    my questions are:
    1. are there any features in qml with which we can draw line based on array of points.
    2. how do i approach to find the solution in building these complete set of lines and dynamically redraw them at various instance.

    i am very new to qt. also quite a newbie to UI programming.
    it would be great if someone can help me.

    regards

  2. #2
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,420
    Thanks
    37
    Thanked 1,545 Times in 1,495 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: drawing lines on a canvas and move them dynamically

    If you are using QtQuick as the UI stack, then you might want look into using a custom item, e.g. by deriving from QQuickPaintedItem and draw using the QPainter API.

    Cheers,
    _

  3. #3
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    4,396
    Thanks
    247
    Thanked 691 Times in 681 Posts
    Qt products
    Qt5
    Platforms
    Windows Android

    Default Re: drawing lines on a canvas and move them dynamically

    If you make a custom item, you can create a cubic Bezier QPainterPath (see QPainterPath::cubicTo()) to draw your smooth curved lines. Start the path with QPainterPath::moveTo(), then add the spline from that point with cubicTo.

    There is an example of how to create and use a custom QQuickPaintedItem here.

  4. #4
    Join Date
    Mar 2016
    Posts
    6
    Qt products
    Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Symbian S60

    Default Re: drawing lines on a canvas and move them dynamically

    thanks for the replies.
    If you are using QtQuick as the UI stack, then you might want look into using a custom item, e.g. by deriving from QQuickPaintedItem and draw using the QPainter API.
    yes we are panning to go ahead with QtQuick only, i am looking into QPainter, and trying to make a working sample. but i have a question.
    Should i make the whole drawing at once and and then animating it will give me the expected behaviour or i need to calculate angles myself using the points and then redraw it everytime?

    If you make a custom item, you can create a cubic Bezier QPainterPath (see QPainterPath::cubicTo()) to draw your smooth curved lines
    i tried some sample code with bezierCurveTo() but then i realized that with constant control points i cant achieve the expected dynamic behaviour, also making different lines and then trying make a complete figure from them did not seem feasible to me, rather can say i felt that it would be a very crude way.
    below is the sample code i tried
    Canvas {
    id: root
    // canvas size
    width: 800; height: 800
    property bool arrowFormState: false
    property real progress:0;
    function toggle() {
    arrowFormState = !arrowFormState
    }

    property real xLeft: collectPointsX(270)//50
    property real yLeft: collectPointsY(270)

    states: State {
    when: arrowFormState
    PropertyChanges { xLeft: collectPointsX(270); target: root }
    PropertyChanges { yLeft: collectPointsY(270); target: root }
    }
    transitions: Transition {
    NumberAnimation {
    property: "xLeft";from:collectPointsX(240)
    duration: 500
    }
    NumberAnimation {
    property: "yLeft";from:collectPointsY(240)
    duration: 500
    }
    }

    onXLeftChanged: requestPaint();
    // handler to override for drawing
    onPaint: {
    var ctx = getContext("2d")
    ctx.fillRect(0, 0, width, height)
    // setup the color
    ctx.strokeStyle = "orange"

    // create a path
    ctx.beginPath()
    ctx.lineWidth = 4
    ctx.moveTo( xLeft ,yLeft)//50
    ctx.bezierCurveTo( 200 , 75 , 200 , 350 , 200 , 350);
    console.log("xleft = ",xLeft);
    console.log("yLeft = ",yLeft);
    ctx.stroke()
    }
    Timer {
    repeat: true;
    running: true;
    onTriggered:{toggle();
    }
    //Component.Ready:collectPoints();
    }

    There is an example of how to create and use a custom QQuickPaintedItem here.
    thanks a lot for the sample code, it is really helpful. i am trying a sample.

  5. #5
    Join Date
    Mar 2016
    Posts
    6
    Qt products
    Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Symbian S60

    Default Re: drawing lines on a canvas and move them dynamically

    hi,

    i have tried the suggested example this.
    but for me its is giving the error
    "error: Unknown module(s) in QT: charts"

    i am trying to register the qml object in c++ class, but in qml itself it is giving me error. can anyone help please.

    thanks in advance,
    Smrati

Similar Threads

  1. Replies: 0
    Last Post: 3rd November 2011, 18:03
  2. How to add lines using mouse move?
    By athulms in forum Qt Programming
    Replies: 2
    Last Post: 10th August 2011, 07:54
  3. manually drawing on the canvas
    By kja in forum Qwt
    Replies: 1
    Last Post: 2nd April 2011, 17:18
  4. Replies: 8
    Last Post: 8th October 2009, 16:59
  5. drawing points on canvas after a time period
    By quickNitin in forum Qt Programming
    Replies: 3
    Last Post: 12th May 2006, 14:12

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.