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

Using Canvas for an arcTo



  • Hi,
    I am struggling to get an "arcTo" of a canvas' context2d to work.
    I have tried to follow the docs but there is no arc showing up.

    I have added a drawing below that shows what I'd like to achieve (the red arc) and what I use to construct it.

    I have managed to get lines working in a canvas' onPaint: {…} and even had some success with arc(…), but as for arcTo, I am lost. I have not managed to get anything up at all. I have no idea what is blocking me here. Probably something stupid... Here's the code I use:

    onPaint: {
                var ctx = getContext("2d")
                ctx.clearRect(0,0,width,height)
                ctx.lineWidth = 2
                ctx.strokeStyle = "red"
                ctx.beginPath()
    
                var r = Math.min(width, height)/2  //radius
                var alpha = 2*Math.PI * 15/360     // 15° in radians
                var ax = r * (1 - Math.sin(alpha))     // x of point A
                var ay = r * (1 + Math.cos(alpha))   // y of point A 
                var bx = r * (1 + Math.sin(alpha))    // x of point B
                var by = ay                                            // y of point B
    
                ctx.moveTo(ax, ay) // we don't want a "straight line" to the arc
                ctx.arcTo(ax, ay, bx, by, r)
    
                ctx.fillStyle = Qt.rgba(1, 1, 0,  0.5)
                ctx.fill()
                ctx.stroke();
            }
    

    Any ideas?
    0_1544742293367_arcTo.png



  • I haven't solved the arcTo problem (I actually tend to think that arcTo() might be broken or ill-documented), but i could solve my original problem (which is, how to create a speech balloon) with the arc() method:

    onPaint: {
                var ctx = getContext("2d")
                ctx.clearRect(0,0,width,height)
                ctx.lineWidth = 2
                ctx.strokeStyle = "red"
                ctx.beginPath()
                ctx.scale(1, 0.7)
                var midX = width / 2
                var midY = height / 2
    
                ctx.moveTo(0,height)
                ctx.arc(midX, midY, Math.min(midX, midY)*0.7, Math.PI*3/4, Math.PI*14/32, false)
                ctx.closePath()
    
                ctx.scale(1, 1/0.7)
                ctx.fillStyle = Qt.rgba(1, 1, 0,  0.5)
                ctx.fill()
                ctx.stroke();
            }
    

    0_1544785274774_balloon.png


  • Moderators

    great that you managed to reach your goal,

    however for future references, I would suggets this webside for canvas stuff
    https://www.w3schools.com/tags/canvas_arcto.asp
    It even has a web editor where you can see changes you make to the examples, very usefull.



  • @J.Hilk That site is really cool! Thank you for that link.


Log in to reply