Comment pouvez-vous trouver la hauteur de texte sur un canevas HTML?

Mise à JOUR - pour un exemple de ce travail, j'ai utilisé cette technique dans le Carota éditeur.

La suite de ellisbben réponse, ici est une version améliorée pour obtenir la montée et la descente de la ligne de base, à savoir les mêmes que tmAscent et tmDescent retourné par Win32 l' GetTextMetric API. Cette opération est nécessaire si vous voulez faire un mot gainé de texte avec des durées différentes polices de caractères/tailles.

L'image ci-dessus a été généré sur une toile en Safari, le rouge étant la ligne du haut, où la toile a été dit de dessiner le texte, le vert étant la ligne de base et le bleu du fond (du rouge au bleu est à la hauteur totale).

À l'aide de jQuery pour la concision:

var getTextHeight = function(font) {

  var text = $('<span>Hg</span>').css({ fontFamily: font });
  var block = $('<div style="display: inline-block; width: 1px; height: 0px;"></div>');

  var div = $('<div></div>');
  div.append(text, block);

  var body = $('body');
  body.append(div);

  try {

    var result = {};

    block.css({ verticalAlign: 'baseline' });
    result.ascent = block.offset().top - text.offset().top;

    block.css({ verticalAlign: 'bottom' });
    result.height = block.offset().top - text.offset().top;

    result.descent = result.height - result.ascent;

  } finally {
    div.remove();
  }

  return result;
};

En outre un élément de texte, j'ajoute un div avec display: inline-block afin que je puisse régler ses vertical-align de style, et puis de trouver l'endroit où le navigateur a mis.

De sorte que vous obtenez en retour un objet avec ascent, descent et height (qui est juste ascent + descent pour des raisons de commodité). Pour le tester, il vaut la peine d'avoir une fonction qui dessine une ligne horizontale:

var testLine = function(ctx, x, y, len, style) {
  ctx.strokeStyle = style; 
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + len, y);
  ctx.closePath();
  ctx.stroke();
};

Ensuite, vous pouvez voir comment le texte est positionné sur la toile par rapport au point haut, base et bas:

var font = '36pt Times';
var message = 'Big Text';

ctx.fillStyle = 'black';
ctx.textAlign = 'left';
ctx.textBaseline = 'top'; //important!
ctx.font = font;
ctx.fillText(message, x, y);

//Canvas can tell us the width
var w = ctx.measureText(message).width;

//New function gets the other info we need
var h = getTextHeight(font);

testLine(ctx, x, y, w, 'red');
testLine(ctx, x, y + h.ascent, w, 'green');
testLine(ctx, x, y + h.height, w, 'blue');

Vous pouvez obtenir une très bonne approximation de la hauteur verticale par la vérification de la longueur d'un capital de M.

ctx.font='bold 10px Arial';
lineHeight=ctx.measureText('M').width;

Les navigateurs commencent à soutenir avancé mesures de texte, ce qui fera de cette tâche triviale lorsqu'il est largement pris en charge:

let metrics = ctx.measureText(text);
let fontHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
let actualHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;

fontHeight vous obtient la boîte de délimitation de la hauteur qui est constante quelle que soit la chaîne en cours de rendu. actualHeight est spécifique à la chaîne en cours de rendu.

Spec: https://www.w3.org/TR/2012/CR-2dcontext-20121217/#dom-textmetrics-fontboundingboxascent et les sections situé juste en dessous.

Statut de Support (20-Août-2017):

• Chrome il a derrière un drapeau (https://bugs.chromium.org/p/chromium/issues/detail?id=277215).
• Firefox a il en de développement (https://bugzilla.mozilla.org/show_bug.cgi?id=1102584).
• Bord n'a pas de support (https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/30922861-advanced-canvas-textmetrics).
• nœud-toile (node.js module), pour la plupart pris en charge (https://github.com/Automattic/node-canvas/wiki/Compatibility-Status).

N'est pas à la hauteur du texte en pixels égale à la taille de la police (en pts) si vous définir la police de caractères à l'aide du contexte.de police ?

J'ai résolu ce problème straitforward - à l'aide de la manipulation de pixels.

Ici est un graphique réponse:

Voici le code:

    function textHeight (text, font) {
var fontDraw = document.createElement("canvas");
var height = 100;
var width = 100;
//here we expect that font size will be less canvas geometry
fontDraw.setAttribute("height", height);
fontDraw.setAttribute("width", width);
var ctx = fontDraw.getContext('2d');
//black is default
ctx.fillRect(0, 0, width, height);
ctx.textBaseline = 'top';
ctx.fillStyle = 'white';
ctx.font = font;
ctx.fillText(text/*'Eg'*/, 0, 0);
var pixels = ctx.getImageData(0, 0, width, height).data;
//row numbers where we first find letter end where it ends 
var start = -1;
var end = -1;
for (var row = 0; row < height; row++) {
for (var column = 0; column < width; column++) {
var index = (row * width + column) * 4;
//if pixel is not white (background color)
if (pixels[index] == 0) {
//we havent met white (font color) pixel
//on the row and the letters was detected
if (column == width - 1 && start != -1) {
end = row;
row = height;
break;
}
continue;
}
else {
//we find top of letter
if (start == -1) {
start = row;
}
//..letters body
break;
}
}
}
/*
document.body.appendChild(fontDraw);
fontDraw.style.pixelLeft = 400;
fontDraw.style.pixelTop = 400;
fontDraw.style.position = "absolute";
*/
return end - start;
}

Ici est une fonction simple. Pas de bibliothèque nécessaires.

J'ai écrit cette fonction pour obtenir le haut et le bas de limites par rapport à la base. Si textBaseline est fixé à alphabetic. Ce qu'il fait est qu'il crée une autre toile, et tire de là, et puis trouve le plus haut et le plus bas non vide de pixel. Et c'est le haut et le bas de limites. Il la retourne en tant que parent, de sorte que si la hauteur est de 20px, et il n'y a rien en dessous de la ligne de base, puis le top lié est -20.

Vous devez fournir des caractères. Sinon, il vous donnera 0 hauteur et 0 largeur, évidemment.

Utilisation:

alert(measureHeight('40px serif', 40, 'rg').height)

Voici la fonction:

function measureHeight(aFont, aSize, aChars, aOptions={}) {
//if you do pass aOptions.ctx, keep in mind that the ctx properties will be changed and not set back. so you should have a devoted canvas for this
//if you dont pass in a width to aOptions, it will return it to you in the return object
//the returned width is Math.ceil'ed
console.error('aChars: "' + aChars + '"');
var defaultOptions = {
width: undefined, //if you specify a width then i wont have to use measureText to get the width
canAndCtx: undefined, //set it to object {can:,ctx:} //if not provided, i will make one
range: 3
};
aOptions.range = aOptions.range || 3; //multiples the aSize by this much
if (aChars === '') {
//no characters, so obviously everything is 0
return {
relativeBot: 0,
relativeTop: 0,
height: 0,
width: 0
};
//otherwise i will get IndexSizeError: Index or size is negative or greater than the allowed amount error somewhere below
}
//validateOptionsObj(aOptions, defaultOptions); //not needed because all defaults are undefined
var can;
var ctx; 
if (!aOptions.canAndCtx) {
can = document.createElement('canvas');;
can.mozOpaque = 'true'; //improved performanceo on firefox i guess
ctx = can.getContext('2d');
//can.style.position = 'absolute';
//can.style.zIndex = 10000;
//can.style.left = 0;
//can.style.top = 0;
//document.body.appendChild(can);
} else {
can = aOptions.canAndCtx.can;
ctx = aOptions.canAndCtx.ctx;
}
var w = aOptions.width;
if (!w) {
ctx.textBaseline = 'alphabetic';
ctx.textAlign = 'left'; 
ctx.font = aFont;
w = ctx.measureText(aChars).width;
}
w = Math.ceil(w); //needed as i use w in the calc for the loop, it needs to be a whole number
//must set width/height, as it wont paint outside of the bounds
can.width = w;
can.height = aSize * aOptions.range;
ctx.font = aFont; //need to set the .font again, because after changing width/height it makes it forget for some reason
ctx.textBaseline = 'alphabetic';
ctx.textAlign = 'left'; 
ctx.fillStyle = 'white';
console.log('w:', w);
var avgOfRange = (aOptions.range + 1) / 2;
var yBaseline = Math.ceil(aSize * avgOfRange);
console.log('yBaseline:', yBaseline);
ctx.fillText(aChars, 0, yBaseline);
var yEnd = aSize * aOptions.range;
var data = ctx.getImageData(0, 0, w, yEnd).data;
//console.log('data:', data)
var botBound = -1;
var topBound = -1;
//measureHeightY:
for (y=0; y<=yEnd; y++) {
for (var x = 0; x < w; x += 1) {
var n = 4 * (w * y + x);
var r = data[n];
var g = data[n + 1];
var b = data[n + 2];
//var a = data[n + 3];
if (r+g+b > 0) { //non black px found
if (topBound == -1) { 
topBound = y;
}
botBound = y; //break measureHeightY; //dont break measureHeightY ever, keep going, we till yEnd. so we get proper height for strings like "`." or ":" or "!"
break;
}
}
}
return {
relativeBot: botBound - yBaseline, //relative to baseline of 0 //bottom most row having non-black
relativeTop: topBound - yBaseline, //relative to baseline of 0 //top most row having non-black
height: (botBound - topBound) + 1,
width: w//EDIT: comma has been added to fix old broken code.
};
}

relativeBot, relativeTop, et height sont les choses utiles à l'objet de retour.

Voici un exemple d'usage:

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function measureHeight(aFont, aSize, aChars, aOptions={}) {
//if you do pass aOptions.ctx, keep in mind that the ctx properties will be changed and not set back. so you should have a devoted canvas for this
//if you dont pass in a width to aOptions, it will return it to you in the return object
//the returned width is Math.ceil'ed
console.error('aChars: "' + aChars + '"');
var defaultOptions = {
width: undefined, //if you specify a width then i wont have to use measureText to get the width
canAndCtx: undefined, //set it to object {can:,ctx:} //if not provided, i will make one
range: 3
};
aOptions.range = aOptions.range || 3; //multiples the aSize by this much
if (aChars === '') {
//no characters, so obviously everything is 0
return {
relativeBot: 0,
relativeTop: 0,
height: 0,
width: 0
};
//otherwise i will get IndexSizeError: Index or size is negative or greater than the allowed amount error somewhere below
}
//validateOptionsObj(aOptions, defaultOptions); //not needed because all defaults are undefined
var can;
var ctx; 
if (!aOptions.canAndCtx) {
can = document.createElement('canvas');;
can.mozOpaque = 'true'; //improved performanceo on firefox i guess
ctx = can.getContext('2d');
//can.style.position = 'absolute';
//can.style.zIndex = 10000;
//can.style.left = 0;
//can.style.top = 0;
//document.body.appendChild(can);
} else {
can = aOptions.canAndCtx.can;
ctx = aOptions.canAndCtx.ctx;
}
var w = aOptions.width;
if (!w) {
ctx.textBaseline = 'alphabetic';
ctx.textAlign = 'left';	
ctx.font = aFont;
w = ctx.measureText(aChars).width;
}
w = Math.ceil(w); //needed as i use w in the calc for the loop, it needs to be a whole number
//must set width/height, as it wont paint outside of the bounds
can.width = w;
can.height = aSize * aOptions.range;
ctx.font = aFont; //need to set the .font again, because after changing width/height it makes it forget for some reason
ctx.textBaseline = 'alphabetic';
ctx.textAlign = 'left';	
ctx.fillStyle = 'white';
console.log('w:', w);
var avgOfRange = (aOptions.range + 1) / 2;
var yBaseline = Math.ceil(aSize * avgOfRange);
console.log('yBaseline:', yBaseline);
ctx.fillText(aChars, 0, yBaseline);
var yEnd = aSize * aOptions.range;
var data = ctx.getImageData(0, 0, w, yEnd).data;
//console.log('data:', data)
var botBound = -1;
var topBound = -1;
//measureHeightY:
for (y=0; y<=yEnd; y++) {
for (var x = 0; x < w; x += 1) {
var n = 4 * (w * y + x);
var r = data[n];
var g = data[n + 1];
var b = data[n + 2];
//var a = data[n + 3];
if (r+g+b > 0) { //non black px found
if (topBound == -1) { 
topBound = y;
}
botBound = y; //break measureHeightY; //dont break measureHeightY ever, keep going, we till yEnd. so we get proper height for strings like "`." or ":" or "!"
break;
}
}
}
return {
relativeBot: botBound - yBaseline, //relative to baseline of 0 //bottom most row having non-black
relativeTop: topBound - yBaseline, //relative to baseline of 0 //top most row having non-black
height: (botBound - topBound) + 1,
width: w
};
}
</script>
</head>
<body style="background-color:steelblue;">
<input type="button" value="reuse can" onClick="alert(measureHeight('40px serif', 40, 'rg', {canAndCtx:{can:document.getElementById('can'), ctx:document.getElementById('can').getContext('2d')}}).height)">
<input type="button" value="dont reuse can" onClick="alert(measureHeight('40px serif', 40, 'rg').height)">
<canvas id="can"></canvas>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

La relativeBot et relativeTop sont ce que vous voyez dans cette image ici:

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text

une ligne de réponse

var height = parseInt(ctx.font) * 1.2; 

CSS "line-height: normal" est entre 1 et 1,2

lire ici pour plus d'info

Tout d'abord, vous devez définir la hauteur d'une taille de police, puis en fonction de la valeur de la hauteur de la police pour déterminer la hauteur de votre texte, c'est combien, la croix-des lignes de texte, bien sûr, la même hauteur de la police ont besoin d'accumuler, si le texte ne dépasse pas la plus grande zone de texte de la Hauteur, tout montrer, sinon, n'afficher que le texte dans la zone de texte. Des valeurs élevées ont besoin de votre propre définition. Plus la hauteur prédéfinie, plus la hauteur du texte qui doit être affiché et interceptés.

Après l'effet est traitée(résoudre)

Avant que l'effet est traitée(
non résolu)

  AutoWrappedText.auto_wrap = function(ctx, text, maxWidth, maxHeight) {
var words = text.split("");
var lines = [];
var currentLine = words[0];
var total_height = 0;
for (var i = 1; i < words.length; i++) {
var word = words[i];
var width = ctx.measureText(currentLine + word).width;
if (width < maxWidth) {
currentLine += word;
} else {
lines.push(currentLine);
currentLine = word;
//TODO dynamically get font size
total_height += 25;
if (total_height >= maxHeight) {
break
}
}
}
if (total_height + 25 < maxHeight) {
lines.push(currentLine);
} else {
lines[lines.length - 1] += "…";
}
return lines;};

C'est ce que j'ai fait en fonction des autres réponses ici:

JS:

function measureText(text, font) {
const span = document.createElement('span');
span.appendChild(document.createTextNode(text));
Object.assign(span.style, {
font: font,
margin: '0',
padding: '0',
border: '0',
whiteSpace: 'nowrap'
});
document.body.appendChild(span);
const {width, height} = span.getBoundingClientRect();
span.remove();
return {width, height};
}
var font = "italic 100px Georgia";
var text = "abc this is a test";
console.log(measureText(text, font));

Cela fonctionne 1) pour le texte multiligne ainsi 2) et même dans IE9!

<div class="measureText" id="measureText">
</div>
.measureText {
margin: 0;
padding: 0;
border: 0;
font-family: Arial;
position: fixed;
visibility: hidden;
height: auto;
width: auto;
white-space: pre-wrap;
line-height: 100%;
}
function getTextFieldMeasure(fontSize, value) {
const div = document.getElementById("measureText");
//returns wrong result for multiline text with last line empty
let arr = value.split('\n');
if (arr[arr.length-1].length == 0) {
value += '.';
}
div.innerText = value;
div.style['font-size']= fontSize + "px";
let rect = div.getBoundingClientRect();
return {width: rect.width, height: rect.height};
};

Solution approximative:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "100px Arial";
var txt = "Hello guys!"
var wt = ctx.measureText(txt).width;
var height = wt / txt.length;

Ce sera la précision des résultats en police à chasse fixe.

Dans des situations normales, la suivante devrait fonctionner:

var can = CanvasElement.getContext('2d');          //get context
var lineHeight = /[0-9]+(?=pt|px)/.exec(can.font); //get height from font variable