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

    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.

    https://jsfiddle.net/tg5zwnc2/1/

    `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
    
    ct.beginPath()
    
    //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)'
    
    ct.moveTo(courbeBezier[0][0].x,courbeBezier[0][0].y)
    for (var i =0;i<courbeBezier.length;i++)
    {
    if (i>0)                            
    ct.lineTo(courbeBezier[i][0].x,courbeBezier[i][0].y)
    
    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.lineTo(courbeBezier[i-1][0].x,courbeBezier[i-1][0].y)
    
    
    }
    ct.stroke()
    ct.fill()
    
    ct.beginPath()
    ct.globalCompositeOperation = "source-atop";
    ct.fillStyle = "red";
    ct.fillRect(0,0,cv.width/2,cv.height)
    ct.fill()

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.