如何直接在圈内写东西？

Question

我想直接在圈内写点东西，但不知道怎么写。我知道我可以写ctx.fillText(" test", 10, 30);，它会向右移动，但我觉得这是一种低效的方式。

我将如何实现这一目标？下面是我所指的图像。

import React, {Component} from 'react';

class Login extends Component {    
    componentDidMount() {
        let c = document.getElementById("myCanvas");
        let ctx = c.getContext("2d");

        ctx.beginPath();
        ctx.arc(100,75,50,0,2*Math.PI);
        ctx.fillText("hey", 10, 30);
        ctx.stroke();
    }

    render() {
        return (
            <div>
                <canvas id="myCanvas" width="240" height="200"/>
            </div>    
        );
    }
}

export default Login;

Answer 1

您可以使用measureText 获取文本的宽度并计算文本起点的坐标：

class App extends React.Component {
  componentDidMount() {
    let c = document.getElementById("myCanvas");
    let ctx = c.getContext("2d");

    const x_arc = 100;
    const y_arc = 75;
    const radius = 50;

    const text = "hey";
    const text_width = ctx.measureText(text).width;
    const x_text = x_arc - text_width / 2;
    const y_text = y_arc;

    ctx.beginPath();
    ctx.arc(x_arc, y_arc, radius, 0, 2 * Math.PI);
    ctx.fillText("hey", x_text, y_text);
    ctx.stroke();
  }

  render() {
    return (
      <div>
        <canvas id="myCanvas" width="240" height="200" />
      </div>
    );
  }
}

这里是沙盒的链接：https://codesandbox.io/s/j377qol3ww

Answer 2

好吧，如果你算一下：

the x of the circle is: 100
the y of the circle is: 75
So, the text should be around (95, 80)

注意：text 的 (x, y) 坐标取决于圆中的那个。话虽如此，你可以让它更有活力：

const circleCords = { x: 100, y: 75 }

// You can adjust the x, y of the text. Because `5` is just for testing. 
// I mean by that, that you would have to get the width of the text and then calculate how much you'd subtract from the circleCords!
const textCords = { x: circleCords - 5, y: circleCords + 5 }

ctx.arc(circleCords.x, circleCords.y, 50, 0,2*Math.PI);
ctx.fillText("hey", textCords.x, textCords.y);

如果您的文本宽度始终保持不变，您可以根据需要减去随机数。在这种情况下5。

希望能有所帮助！