Question

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

我已经在画布上创建了这样的字母

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”数组。如果字母之间的间隔较大，则可以降低spacer值。

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);

如何在画布中查找填充文本的起点和终点

1 个答案: