The use of Canvas.arcTo(), draw a line segment with rounded corners, draw a mind map-basic

insert image description here

1. Method definition

canvas.arcToThis method is still relatively difficult to understand. Because it's not intuitive to draw a path, but indirect.

Its parameters are like this.

canvas.arcTo(ax,ay,bx,by,radius)

It is an arc defined by two points and a corner radius. So you definitely can't understand, see the following example.

2. Parameter explanation

Combined with the figure to explain the meaning of these parameters.

For example, you need to draw such a curve.

insert image description here

Let me tell you first, this line is composed of three line segments:
two arcTo()line segments, one lineTo()line segment

1. Line segment 1 arcTo()

Before you know arcTo(), you would never have imagined that the first line arcTo()segment looks like this:

insert image description here

insert image description here
To explain, the information marked in the above figure:

Point 1 is the original location of the path, the starting point
2 o'clock, that is ax,ay
3 o'clock, that is bx,by
The size of this fillet isradius

It needs to be explained that there is no lineTo()operation from point 1 to point 2, and the line segment of this straight line + arc angle is completely arcTo()generated by .

Here I use abcd points to represent 1234 points, and the coordinates of point 1 are ax,aypoint bbx,by

canvas.arcTo(ax,ay,bx,by,radius)

2. Line segment 2 arcTo()

Then the next line segment is arcTo()operated from the first end with 2 and 3 points as parameters arcTo(), and the second line segment will be generated.

canvas.arcTo(bx,by,cx,cy,radius)

insert image description here

3. Line segment 3 straight line lineTo()

The last straight line is the direct

canvas.lineTo(dx,dy)

insert image description here

Third, the complete code is

You only need to pass in the parameters according to the parameter description, and you can get such a line segment

/**
 *  在 a 与 d 点之间线一条带圆角的拆线
 * @param ctx canvas.context
 * @param pointA 起点坐标 {x,y}
 * @param pointD 末端坐标 {x,y}
 * @param radius  圆角半径 Number
 * @param lineWidth  线段宽度 Number
 */
function drawArcLine(ctx, pointA, pointD, radius, lineWidth){
    
    
    ctx.strokeStyle = 'black'
    ctx.fillStyle = 'black'
    ctx.font = '24px 微软雅黑'
    ctx.moveTo(pointA.x, pointA.y)
    ctx.fillText(`${
      
      pointA.x},${
      
      pointA.y}`,pointA.x, pointA.y + 30)
    // ctx.lineTo(pointA.x + (itemCenter.x - pointA.x) / 2 - radius, pointA.y)

    ctx.fillText(`${
      
      pointA.x + (pointD.x - pointA.x) / 2},${
      
      pointA.y}`,pointA.x + (pointD.x - pointA.x)/2, pointA.y + 30)

    ctx.arcTo(
        pointA.x + (pointD.x - pointA.x) / 2,
        pointA.y,
        pointA.x + (pointD.x - pointA.x) / 2,
        pointD.y,
        radius
    )

    ctx.fillText(`${
      
      pointA.x + (pointD.x - pointA.x) / 2},${
      
      pointD.y}`,pointA.x + (pointD.x - pointA.x) / 2, pointD.y)

    ctx.arcTo(
        pointA.x + (pointD.x - pointA.x) / 2,
        pointD.y,
        pointD.x,
        pointD.y,
        radius
    )

    ctx.lineTo(pointD.x, pointD.y)
    ctx.stroke()
}

4. What can be done

Eventually you can achieve this effect, like a mind map

insert image description here

2023-07-11

As a result, I accidentally made a map

insert image description here

2023-07-13

The result goes further

insert image description here