В этой статье рассказывается, как решить проблему переноса строк в drawText в процессе рисования на холсте. Давайте сначала рассмотрим проблему, с которой обычно сталкивается каждый при рисовании текста на холсте:
Холст 150*100 с четкой рамкой.
<canvas id=canvas style=border:solid 1px темный золотарник ширина=200px высота=100px></canvas>
Давайте сначала рассмотрим метод fillText(). МетодstrokeText() работает таким же образом.
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; // Строка перехватывалась каждый раз. Индекс 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; я } if(i==str.length-1){//Нарисуйте оставшуюся часть ctx.fillText(str.substring(lastSubStrIndex,i+1),0,initHeight }});Смотрите рендеры:
Алгоритм: Вычислить сумму ширины и lineWidth каждого символа в строке str. Если она больше ширины холста, перехватить эту часть для рисования, затем сбросить lineWidth, сохранить последний индекс, где начался перехват, и когда переменная цикла i является последним символом, нарисуйте оставшиеся части напрямую.
Далее: мы инкапсулируем его в метод, чтобы его можно было вызвать напрямую позже:
/*str: строка для рисования Canvas: объект холста initX: начальная координата x рисуемой строки initY: начальная координата y рисуемой строки lineHeight: высота строки слова, вы можете определить значение самостоятельно */function CanvasTextAutoLine(str, Canvas, initX, initY, lineHeight) {вар ctx = Canvas.getContext(2d); вар lineWidth = 0; вар CanvasWidth = var; 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.