javascript - 如何在 Canvas 中找到填充文本的起点和终点

Question

嘿，我要如何找到 Canvas 的起点和终点

我在 Canvas 上画了这样一封信

var centerx = (c.width - cx.measureText(letter).width) / 2;
        var centery = c.height / 2;
        console.log("Bilawal");
        console.log(cx.measureText(letter));
        var lines = letter.split('\n');
        var lineheight = 20;
        //for (var i = 0; i<lines.length; i++)
        //cx.fillText(lines[i], centerx, centery + (i*lineheight) );

        console.log("X "+centerx+" Y "+centery);
        cx.fillText(letter, centerx, centery);

现在我不知道如何找到起点 X,Y 和终点 X,Y

Answer 1

您要求提供代码示例。下面我包含了相同的数学。希望这可以帮助。

var centerx = (c.width - cx.measureText(letter).width) / 2;
        var centery = c.height / 2;
        console.log("Bilawal");
        console.log(cx.measureText(letter));
        var lines = letter.split('\n');
        var lineheight = 20;
        //for (var i = 0; i<lines.length; i++)
        //cx.fillText(lines[i], centerx, centery + (i*lineheight) );

        console.log("X "+centerx+" Y "+centery);
        cx.fillText(letter, centerx, centery);

        startx = centerx;
        starty = centery - 10;
        endx = (c.width / 2) + (cx.measureText(letter).width / 2); 
        endy = centery + 10;

按照您的要求开始和结束每个字母。一旦它运行，您就可以访问 COORDS 数组“startsEnds”。如果字母之间的空间太大，则降低间隔值。

function COORD(sx,sy,ex,ey) {
    this.startX = sx;
    this.startY = sy;
    this.endX = ex;
    this.endY = ey;
}

var startsEnds = [];
var spacer = 1;
var centerx = (c.width - cx.measureText(letter).width) / 2;
        var centery = c.height / 2;
        console.log("Bilawal");
        console.log(cx.measureText(letter));
        console.log("X "+centerx+" Y "+centery);

        var lines = letter.split('\n');
        var lineheight = 20;
        //for (var i = 0; i<lines.length; i++)
        //cx.fillText(lines[i], centerx, centery + (i*lineheight) );
        var lett = letter.split("");

        var newCenterX = centerx;
        var newCenterY = centery;

        for (var i = 0; i < lett.length; i++){

            console.log("X "+newCenterX+" Y "+newCenterY );


            var startEnd = new COORD(newCenterX,newCenterY - 10,(c.width / 2) + (cx.measureText(lett[i]).width / 2), newCenterY + 10);
            startsEnds.push(startEnd);

            newCenterX = newCenterX + cx.measureText(lett[i]) + spacer;

        }
        cx.fillText(letter, centerx, centery);