Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Canvas 2d refreshing



  • hi,

    I have adapted this little HTML/JS canvas example in QML/JS : https://codepen.io/martiansf/pen/jrOZPp?editors=1010

    I just wanted to add a QML Timer that will randomize the variables and re-draw the thing, but my canvas is never refreshed , however the array containing the dots is refreshed
    do you have an idea what i missed ?

    import QtQuick 2.0
    //reusable component so you can test
    Canvas {
        id: mycanvas
    
        property int dotCount : 500
        property real lineWidth : 1
        property int variance : 50
        property int layoutRadius : 150
        property int w : width
        property int h : height
        property string clr: "#ffffff"
        property var  dotArray: []
        property var angInc :  360/dotCount
        property var _context
        on_ContextChanged: start()
    
        onPaint: {
            _context = getContext("2d");
        }
    
        Timer{
            interval: 1000
            running: true
            repeat: true
            onTriggered: {
                dotCount = Math.round(Math.random()*400)
                variance = Math.round(Math.random()*100)
                  initDots()
            }
        }
    
    
        function start() {
            _context.lineWidth = lineWidth
            _context.strokeStyle = clr;
            _context.fillStyle = "#000";
            initDots();
    
        } //!start
    
        function initDots() {
            console.log("init dots")
            var da = []
            dotArray = da // clear old dots
            for (var i = 0; i < dotCount; i++) {
                var mdot = {i:i,x:layoutRadius * Math.cos((angInc *i) * (Math.PI/180))+ w/2,y:layoutRadius * Math.sin((angInc *i) * (Math.PI/180))+h/2}
                da.push(mdot)  
            }
            dotArray = da // the new dots array 
            drawDots();
        }//!initDots
    
        function drawDots(){
            console.log("draw dots")
            for(var i=0; i<dotArray.length; i++){
                var itm = dotArray[i];
                _context.beginPath();
                _context.arc(itm.x, itm.y, 1, 0, Math.PI*2, true);
                _context.fill();
            }
            connectDots();
        }//!drawDots
    
        function connectDots(){
            console.log("connect dots")
            var lineCount = Math.floor(dotArray.length/2);
    
            for(var i=0; i<lineCount; i++){
                var num = lineCount+i;
                var ptA = dotArray[i];
                var ptB = dotArray[num];
                _context.beginPath();
                _context.moveTo(ptA.x, ptA.y);
                _context.bezierCurveTo(Math.random()*variance,Math.random()*(Math.random()*variance),w/2,h/2.0,ptB.x,ptB.y);
                _context.stroke();
    
    
            }
        }//connectDots
    
    
    }
    
    

  • Moderators

    @LeLev
    as far as I'm aware, you can only draw on the canvas inside the ònPaint` event and you try to do it outside of that, during the timeout event

    to trigger a new onPaint event you can simply do the following

    onTriggered: {
                dotCount = Math.round(Math.random()*400)
                variance = Math.round(Math.random()*100)
                mycanvas.requestPaint()
            }
    ....
          onPaint: {
                  _context = getContext("2d");
                  initDots()
              }
    

  • Moderators

    @LeLev
    as far as I'm aware, you can only draw on the canvas inside the ònPaint` event and you try to do it outside of that, during the timeout event

    to trigger a new onPaint event you can simply do the following

    onTriggered: {
                dotCount = Math.round(Math.random()*400)
                variance = Math.round(Math.random()*100)
                mycanvas.requestPaint()
            }
    ....
          onPaint: {
                  _context = getContext("2d");
                  initDots()
              }
    


  • @J-Hilk said in Canvas 2d refreshing:

    mycanvas.requestPaint()

    nice thank you!


Log in to reply