Important: Please read the Qt Code of Conduct -

Draw png with canvas

  • i would like draw a shape with two bezier curve, for create bar gauge editable. Between the two curve, this area must be transparency.(to have background compatibility) And a rectangle opaque can be draw in this shape for set the value of gauge. I want to see is possible for not use image like PNG but draw PNG with canvas.


    example with rect with/2 in source-atop. when the area in full transparency the rect in 'source-a-top' or 'source-in' is not visible. why? is possible to have area full transparency but visible? ctx.fillStyle = Qt.rgba(255, 255, 255, 0)==> not work

    it's work when the area is not fully opaque. ctx.fillStyle = Qt.rgba(255, 255, 255, 0.5) ==>work but is not the color of background.

    i would like area full transparency and on the top, just in this area, rect opaque.

    `if you create area with fillStyle (ct.fillStyle = 'rgba(255, 255, 255, 0)')
    the final rectangle on the top is not visible, but is fully opaque and on the top.

    //your code here

    var ct = cv.getContext('2d');
    var courbeBezier =  [] 
    courbeBezier.push([ ])
    courbeBezier[courbeBezier.length-1].push({x:cv.width,y:10}) //origine
    courbeBezier[courbeBezier.length-1].push({x:cv.width/2,y:60 }) //control 1
    courbeBezier[courbeBezier.length-1].push({x:cv.width/2,y:70 }) //control 2
    courbeBezier[courbeBezier.length-1].push({x:10,y:cv.height-10 }) //end
    courbeBezier.push([ ])
    courbeBezier[courbeBezier.length-1].push({x:0,y:cv.height}) //origine
    courbeBezier[courbeBezier.length-1].push({x:cv.width/2,y:10}) //control 1
    courbeBezier[courbeBezier.length-1].push({x:cv.width/2,y:20 }) //control 2
    courbeBezier[courbeBezier.length-1].push({x:cv.width,y:10}) //end
    //if you using this, ok
    ct.fillStyle = 'yellow'//rgba(255, 255, 255, 0.1)'
    //if you using this, the final rec is not visible on the top
    //ct.fillStyle = 'rgba(255, 255, 255, 0)'
    for (var i =0;i<courbeBezier.length;i++)
    if (i>0)                            
    ct.bezierCurveTo(courbeBezier[i][1].x, courbeBezier[i][1].y, courbeBezier[i][2].x,courbeBezier[i][2].y, courbeBezier[i][3].x,courbeBezier[i][3].y)
    if (i>0)
    ct.globalCompositeOperation = "source-atop";
    ct.fillStyle = "red";

  • any idea?
    understand my request?

Log in to reply