캔버스 텍스트의 세로 맞춤

캔버스 기반 응용 프로그램에서 작업하고 있으며 텍스트의 세로 맞춤에 몇 가지 문제가 있습니다. 내가 문제의 원인이라고 생각하는 부동 소수점 좌표를 사용하고 있습니다. 나는 확신하지만, 그럼에도 불구하고 해결책을 찾고 있습니다. 어쨌든, 나는 광장에 문자 'O'를 표시하기 위해 사용하는 코드는, 예를 들어, 다음과 같습니다캔버스 텍스트의 세로 맞춤

context.fillRect(0, 0, 21.864951768488744, 21.864951768488744); 
context.textBaseline = 'middle'; 
context.textAlign = alignLeft ? 'left' : 'center'; 
context.fillText('O', 10.932475884244372, 10.932475884244372);

캔버스에 결과는 'O'가 수평을 중심으로하지만, 1에 대한 배치된다는 점이다 - 2 중앙의 픽셀.

아무에게도이 의견이 있습니까?

출처

2016-09-02 Peter

잠재적으로 글꼴이 실제로 자연적으로 중심이 아니거나, 어떤 글꼴을 사용하고 있습니까? 일부 글꼴은 다른 시스템에서 눈에 띄게 다른 위치에 표시 될 수 있습니다 (이는 때로는 매우 놀랍습니다) – DBS

나는 Arial을 사용하고 있습니다. – Peter

세로 맞춤은 글꼴의 기준선을 나타냅니다. 각각의 개별 문자는 세로로 가운데에 있지 않습니다 - 또는 텍스트의 디핑 및 상승 문자가 나타납니다. 큰 문자 인 대문자 "O"는 같은 폰트의 짧은 문자보다 수직으로 더 길어질 가능성이 있습니다. – markE

실제로 텍스트를 쓸 때 부동 좌표에 문제가있는 것으로 보입니다. 예 - http://codepen.io/petor/pen/NRPgVq - 분명히 텍스트가 서브 픽셀 좌표에 표시 될 수없고 둥근 좌표에 배치됩니다 (적어도 Chrome에서는).

<!DOCTYPE html> 
<html> 
<body> 
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> 
Your browser does not support the HTML5 canvas tag. 
</canvas> 
<script> 
var c = document.getElementById("myCanvas"); 
var context= c.getContext("2d");; 
context.font = "10px Arial"; 
context.fillText('O', 0, 10); 
context.fillText('O', 10, 10.1); 
context.fillText('O', 20, 10.2); 
context.fillText('O', 30, 10.3); 
context.fillText('O', 40, 10.4); 
context.fillText('O', 50, 10.5); 
context.fillText('O', 60, 10.6); 
context.fillText('O', 70, 10.7); 
context.fillText('O', 80, 10.8); 
context.fillText('O', 90, 10.9); 
context.fillText('O', 100, 11); 
</script> 
</body> 
</html>

출처

2016-09-05 12:17:45 Peter

디 센더가있는 문자는 공백으로 남습니다. "y"와 같은 디 센더를 사용하여 무언가를 추가하여 내 뜻을 확인하십시오.

<!DOCTYPE html> 
<html> 
<body> 

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> 
Your browser does not support the HTML5 canvas tag. 
</canvas> 
<script> 
var c = document.getElementById("myCanvas"); 
var context= c.getContext("2d"); 
context.fillStyle = "#FF0000"; 
context.fillRect(0, 0, 21.864951768488744, 21.864951768488744); 
context.font = "10px Arial"; 
context.fillStyle = "#FFffff"; 
context.textBaseline = 'middle'; 
context.textAlign = 'center'; 
context.fillText('Oy', 10.932475884244372, 10.932475884244372); 
</script> 
</body> 
</html>

출처

2016-09-02 14:48:22 mab

이 텍스트는 'Oy'텍스트를 쓸 때 비슷하게 보이지만 텍스트가 정확히 가운데에 배치되지 않습니다. . 당신이주는 예제에서, 텍스트는 중앙 아래의 1 픽셀에 위치합니다. 그리고 다른 주석에서 언급했듯이, 더 큰 문자를 사용할 때 변위는 여전히 1 -2 픽셀입니다. 따라서 잘못된 정렬은 확장되지 않습니다. 그래서 저에게 그것은 디 센더 (descenders)가 가진 어떤 것보다 둥근 문제 (rounding problem)의 어떤 종류처럼 보입니다. – Peter

한편 'Oy'텍스트의 O는 'O'텍스트와 같은 y 좌표에 배치됩니다. 디 센더를위한 공간이 남아 있지만, 이것이 1 ~ 2 픽셀의 오정렬을 해결하는 방법에 대한 더 많은 통찰력을 얻지는 못합니다. 텍스트는 단순히 (정확하게) 가운데에 있지 않습니다. – Peter

캔버스 텍스트의 세로 맞춤

답변

관련 문제