Canvas.arcTo()の使い方、角丸の線分を描く、マインドマップを描く - 基本

ここに画像の説明を挿入

1. メソッドの定義

canvas.arcToこの方法はまだ理解するのが比較的難しいです。パスを描くのは直感的ではなく、間接的だからです。

そのパラメータはこんな感じです。

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

これは、2 つの点と角の半径によって定義される円弧です。したがって、次の例を見てください。

2. パラメータの説明

図と組み合わせて、これらのパラメータの意味を説明します。

たとえば、このような曲線を描く必要があります。

ここに画像の説明を挿入

最初に言っておきますが、この線は
2 つのarcTo()線分、1 つの線分lineTo()という3 つの線分で構成されています。

1. 線分1 arcTo()

あなたが知るまではarcTo()、最初の線分がarcTo()次のようになっているとは想像もしていなかったでしょう。

ここに画像の説明を挿入

ここに画像の説明を挿入
説明すると、上の図でマークされている情報は次のとおりです。

ポイント 1 はパスの元の位置、開始点です。
2時、つまりax、ay
3時、つまりbx、by
このフィレットのサイズはradius

点 1 から点 2 への操作はなくlineTo()、この直線 + 円弧角の線分は完全にarcTo()によって生成されることを説明する必要があります。

ここでは、abcd ポイントを使用して 1234 個の点を表し、点 1 の座標はax,ay点 bです。bx,by

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

2. 線分2 arcTo()

arcTo()次に、2 点と 3 点をパラメータとして最初の端から次の線分が操作されarcTo()、2 番目の線分が生成されます。

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

ここに画像の説明を挿入

3. 線分3直線 lineTo()

最後の直線は直線です

canvas.lineTo(dx,dy)

ここに画像の説明を挿入

3 番目に、完全なコードは次のとおりです。

パラメーターの説明に従ってパラメーターを渡すだけで、このような線分を取得できます。

/**
 *  在 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.何ができるか

最終的には、マインドマップのようにこの効果を達成できます。

ここに画像の説明を挿入

2023-07-11

その結果、うっかり地図を作ってしまった

ここに画像の説明を挿入

2023-07-13

結果はさらに進みます

ここに画像の説明を挿入