Not able to call canvas.requestPaint()

pra7

I am a beginner and I am not getting how to call canvas.requestPaint() in My QMl basically, I need to change the tab:Rectangle based on the tab selected and my Code is below:

//myTab.qml

TabView {
id: tv
width: parent.width
height: parent.height
antialiasing: true

style: TabViewStyle {
    frameOverlap: -1

    tab: Rectangle {              
        color: "Transparent"
        implicitWidth: text1.width + 50
        implicitHeight: 20
        radius: 2
        smooth: true
        Canvas {
            id: canvas1
            anchors.fill: parent
            width: parent.width
            height: parent.height
            onPaint: {
                styleData.selected ? drawTab(canvas1,"#0C3142") :
                                     drawTab(canvas1,"Transparent") //Some custom JS function to draw a object
            }                 

            Text {
                id: text1
                height: parent.height
                verticalAlignment: Text.AlignVCenter
                anchors.left : parent.left
                anchors.leftMargin: 15
                text: styleData.title
                color: "white"
            }
        }
    }

    frame: Rectangle {
        width: parent.width
        height: parent.height
        color: "Transparent"
        border.color:"white"
    }
    tabBar: Rectangle {
        color: "Transparent"
        anchors.fill: parent
    }
}

Tab {
    id: tab1
    title: "Tab1"
}
Tab{
    id: tab2
    title: "Tab2"
}
onCurrentIndexChanged: {
    console.log("index changed "+currentIndex)
    canvas1.repaint() //ERRROR - not defind canvas1
}

}
i am getting error ReferenceError: canvas1 is not defined when i try to use in onCurrentIndexChanged and i also tried to emit a signal from TabView and made a connection in Canvas{} but even that did'nt solve the issue

Please Suggest.

pra7

@while1code That's the problem ,i cannot pass canvas ID outside ie.,in onCurrentIndexChanged function.

Now I achieved the same using signal and slots by adding following code :

Canvas {
            id: canvas1
            anchors.fill: parent
            width: parent.width
            height: parent.height
            onPaint: {
                styleData.selected ? drawTab(canvas1,"#0C3142") :
                                     drawTab(canvas1,"Transparent") 
            }  

//*** CONNECT TO SIGNAL HERE ***
Connections
 {
            target: tv
           onRefresh: canvas1.requestPaint() 
 }
...
...
...
onCurrentIndexChanged: {
    console.log("index changed "+currentIndex)
    refresh() //emiting refresh signal 
}

while1code

@pra7 said in Not able to call canvas.requestPaint():

Hi,
Try to pass your canvas Id as parameter to your function that draws objects.

Then you get 2d context of your canvas in your function. Like this :

function draw(canvasId){
var ctx =canvasId.getContext("2d"); ...
...
}
peace,
LA

pra7

@while1code That's the problem ,i cannot pass canvas ID outside ie.,in onCurrentIndexChanged function.

Now I achieved the same using signal and slots by adding following code :

Canvas {
            id: canvas1
            anchors.fill: parent
            width: parent.width
            height: parent.height
            onPaint: {
                styleData.selected ? drawTab(canvas1,"#0C3142") :
                                     drawTab(canvas1,"Transparent") 
            }  

//*** CONNECT TO SIGNAL HERE ***
Connections
 {
            target: tv
           onRefresh: canvas1.requestPaint() 
 }
...
...
...
onCurrentIndexChanged: {
    console.log("index changed "+currentIndex)
    refresh() //emiting refresh signal 
}