[ Leksykon ] [ HTML ] [ JavaScript ] [ Obiekty ] [ canvas ]

Obiekt TextMetrics()

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

Właściwości TextMetrics():

TextMetrics actualBoundingBoxAscent - do odczytu podaje odległości w pikselach CSS od linii poziomej do góry prostokąta
TextMetrics actualBoundingBoxDescent - do odczytu podaje odległości w pikselach CSS od linii poziomej do dołu prostokąta
TextMetrics actualBoundingBoxLeft - do odczytu podaje odległości w pikselach CSS od linii punktu wyrównania do lewej prostokąta
TextMetrics actualBoundingBoxRight - podaje odległości w pikselach CSS od linii punktu wyrównania do prawej prostokąta
TextMetrics alphabeticBaseline - podaje odległości od linii poziomej do alfabetycznej linii ramki liniowej
TextMetrics emHeightAscent - zwraca odległość od linii poziomej do góry kwadratu em w polu linii
TextMetrics emHeightDescent - zwraca odległość od linii poziomej do dołu kwadratu em w polu linii
TextMetrics fontBoundingBoxAscent - od poziomej linii do góry najwyższego prostokąta wszystkich czcionek
TextMetrics fontBoundingBoxDescent - zwraca odległość od linii poziomej do dołu prostokąta wszystkich czcionek
TextMetrics hangingBaseline - zwraca odległość od linii poziomej wskazanej do wiszącej linii bazowej ramki liniowej
TextMetrics ideographicBaseline - zwraca odległość od linii poziomej do ideograficznej linii bazowej ramki liniowej
TextMetrics width - zwraca szerokość tekstu tego pola śródliniowego w pikselach CSS

Przykłady:

<script>

 window.onload = () => {

 const szer = 300;
 const wys = 400;

 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d"); 

 ctx.font = "50px serif";
 ctx.fillStyle = "rgba(0,51,102,0.9)";
 
 let tekst = ctx.measureText("Witaj!!!");
 ctx.fillText(tekst.width, 50, 50); 
 
 console.log(tekst.width); // 159.0087890625

 console.log(tekst.actualBoundingBoxAscent); // 35
 console.log(tekst.actualBoundingBoxDescent); // 11
 console.log(tekst.actualBoundingBoxLeft); // 0
 console.log(tekst.actualBoundingBoxRight); // 154.3583984375
 console.log(tekst.alphabeticBaseline); // undefined
 console.log(tekst.emHeightAscent); // undefined
 console.log(tekst.emHeightDescent); // undefined
 console.log(tekst.fontBoundingBoxAscent); // 45
 console.log(tekst.fontBoundingBoxDescent); // 11
 console.log(tekst.hangingBaseline); // undefined
 console.log(tekst.ideographicBaseline); // undefined;

 return;

 };

</script>

<canvas id="canvas" width="100" height="100"></canvas>

Opis:
Interfejs TextMetrics() reprezentuje wymiary fragmentu tekstu na płótnie, instancję TextMetrics można pobrać za pomocą tej metody CanvasRenderingContext2D.measureText().

Linki:
canvas textBaseline - Ustawienie wyrównania linii bazowej, wartości: top, hanging, middle, alphabetic, ideographic, bottom
canvas measureText() - Zwraca TextMetrics obiekt, z właściwościami tekstu