이 글에서는 캔버스 그리기 과정에서 drawText의 줄 바꿈 문제를 해결하는 방법을 소개합니다. 먼저 캔버스에 텍스트를 그릴 때 일반적으로 직면하게 되는 문제를 살펴보겠습니다.
테두리가 선명한 150*100 캔버스
<canvas id=canvas style=border:solid 1px darkgoldenrod; 너비=200px 높이=100px></canvas>
먼저 fillText() 메서드를 살펴보겠습니다. 스트로크텍스트() 메서드도 동일합니다.
var c=document.getElementById(canvas); var ctx=c.getContext(2d); ctx.fillStyle=#E992B9;ctx.lineWidth=1;var str = 인생이 당신을 속인다면 슬퍼하지 마세요! 감사합니다!ctx.fillText(str,0,20);
고정 너비 캔버스에 단어가 너무 많으면 fillText()가 자동으로 줄 바꿈되지 않는 것을 볼 수 있습니다. 캔버스 자체의 너비를 늘릴 수 있지만 이것이 문제를 해결하는 근본적인 방법은 아닙니다. 이전에 기본 캔버스 API를 소개했을 때 context.measureText(text) 이 함수는 글꼴의 너비와 높이를 측정할 수 있어 문자열의 길이를 쉽게 계산할 수 있습니다. 대략적인 너비를 추가하면 기본적으로 이 줄 바꿈 문제가 해결될 수 있습니다.
구체적인 구현 방법을 살펴보겠습니다.
var c=document.getElementById(canvas); var ctx=c.getContext(2d); ctx.fillStyle=#E992B9;ctx.lineWidth=1; var str = 인생이 당신을 속인다면 슬퍼하지 마세요! 감사합니다!var lineWidth = 0;var canvasWidth = c.width;//캔버스 너비 계산 var initHeight=15;//캔버스 상단에서 그려진 글꼴의 초기 높이 var lastSubStrIndex= 0; Index of for(let i=0;i<str.length;i++){ lineWidth+=ctx.measureText(str[i]).width; if(lineWidth>canvasWidth){ ctx.fillText(str.substring(lastSubStrIndex,i),0,initHeight);//가로채운 부분을 그립니다. initHeight+=20;//20은 글꼴의 높이입니다. lineWidth=0; lastSubStrIndex= 나; } if(i==str.length-1){//나머지 부분을 그립니다. ctx.fillText(str.substring(lastSubStrIndex,i+1),0,initHeight);렌더링 보기:
알고리즘: 문자열 str의 각 문자의 너비와 lineWidth의 합을 계산합니다. 캔버스 너비보다 크면 이 부분을 가로채서 그린 다음 lineWidth를 재설정하고 가로채기가 시작된 마지막 인덱스를 저장합니다. 루프 변수 i가 마지막 문자이면 나머지 부분을 직접 그립니다.
다음: 나중에 직접 호출할 수 있도록 메서드로 캡슐화합니다.
/*str: 그려질 문자열 canvas: canvas object initX: 그리기 문자열의 시작 x 좌표 initY: 그리기 문자열의 시작 y 좌표 lineHeight: 워드 라인 높이, 직접 값 정의 가능 */function canvasTextAutoLine(str, canvas, initX,initY,lineHeight){ var ctx = canvas.getContext(2d); var lineWidth = 0; var canvasWidth = c.width; lastSubStrIndex= 0; for(let i=0;i<str.length;i++){ lineWidth+=ctx.measureText(str[i]).width; if(lineWidth>canvasWidth-initX){//문제를 방지하려면 initX를 빼세요. 경계가 있는 경우 ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY); initY+=lineHeight; lineWidth=0; lastSubStrIndex=i; } if(i==str.length-1){ ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.