正文

canvas文本自动换行

~冰蝶~  ~冰蝶~  2022-08-12  697

关键词：

在用canvas中写刮奖结果的时候发现canvas中的文本不会自动折行，要进行截断另起一行来写。在此参考文章html5-canvas的绘制文本自动换行来做改写。

根据canvas宽度来做折行

在此根据项目的情况让文本占canvas的八分之五，具体可以根据情况改变所占百分比来显示。

/*
str:要绘制的字符串
canvas:canvas对象
initX:绘制字符串起始x坐标
initY:绘制字符串起始y坐标
lineHeight:字行高
*/
function canvasTextAutoLine(str,canvas,initX,initY,lineHeight){
    var ctx = canvas.getContext("2d"); 
    var lineWidth = 0;
    var canvasWidth = c.width; 
    var lastSubStrIndex= 0; 
    for(let i=0;i<str.length;i++){ 
        lineWidth+=ctx.measureText(str[i]).width; 
        if(lineWidth>canvasWidth/8*5){
            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);
        }
    }
  }

根据字节数来做折行

参考文章canvas文本换行处理。

调用：

var my_cvs = document.getElementById("my_cvs");
var ctx_2d = my_cvs.getContext("2d");
writeTextOnCanvas(ctx_2d,30,24,‘文字内容文字内容文字内容文字内容‘,182,607);

函数：

//ctx_2d        getContext("2d") 对象  
//lineheight    段落文本行高  
//bytelength    设置单字节文字一行内的数量  
//text          写入画面的段落文本  
//startleft     开始绘制文本的 x 坐标位置（相对于画布）  
//starttop      开始绘制文本的 y 坐标位置（相对于画布）  
function writeTextOnCanvas(ctx_2d, lineheight, bytelength, text ,startleft, starttop){  
    function getTrueLength(str){//获取字符串的真实长度（字节长度）  
        var len = str.length, truelen = 0;  
        for(var x = 0; x < len; x++){  
            if(str.charCodeAt(x) > 128){  
                truelen += 2;  
            }else{  
                truelen += 1;  
            }  
        }  
        return truelen;  
    }  
    function cutString(str, leng){//按字节长度截取字符串，返回substr截取位置  
        var len = str.length, tlen = len, nlen = 0;  
        for(var x = 0; x < len; x++){  
            if(str.charCodeAt(x) > 128){  
                if(nlen + 2 < leng){  
                    nlen += 2;  
                }else{  
                    tlen = x;  
                    break;  
                }  
            }else{  
                if(nlen + 1 < leng){  
                    nlen += 1;  
                }else{  
                    tlen = x;  
                    break;  
                }  
            }  
        }  
        return tlen;  
    }  
    for(var i = 1; getTrueLength(text) > 0; i++){  
        var tl = cutString(text, bytelength);  
        ctx_2d.fillText(text.substr(0, tl).replace(/^s+|s+$/, ""), startleft, (i-1) * lineheight + starttop);  
        text = text.substr(tl);  
    }  
}

微信小程序canvas绘制多行文本（文本换行）

参考技术A有什么问题尽管留言~由于我平时主要使用wepy开发项目所以这些常用封装及项目架子都是使用的wepy覆盖了一些常用操作与封装、登录流程、保存图片至相册及相关授权流程查看详情

canvas文字自动换行圆角矩形画法生成图片手机长按保存(代码片段)

canvas的文字自动换行函数封装//str:要绘制的字符串//canvas:canvas对象//initX:绘制字符串起始x坐标//initY:绘制字符串起始y坐标//lineHeight:字行高，自己定义个值即可functioncanvasTextAutoLine(str,canvas,initX,initY,lineHeight)varctx=canvas.getContext("2d") 查看详情

canvas文字换行(代码片段)

...要使用到的方法是measureText()，这个方法会返回一个度量文本的相关信息的对象，例如文本的宽度。这里会有一个边界问题：如果文字在canvas边界出现换行，那么就可能出现文字查看详情

canvas转图片中的文字自动换行(代码片段)

概述最近项目用到了canvas转图片，但是由于canvas对文字排版的支持非常弱，一般我们在canvas上画不同排版的文字（比如竖排文字）都是利用js计算横纵坐标，然后一个字一个字地画出来，今天无意中看到一个使用svg的方法，记录... 查看详情

在长文本中自动换行 - 照顾句子

】在长文本中自动换行-照顾句子【英文标题】：Makeautolinebreaksinalongtext-takecareofsentences【发布时间】：2016-04-0807:33:30【问题描述】：字符串有很长的文本。如何在100个单词后自动换行而不剪切单词并处理逗号和点。一个句子不应... 查看详情

如何用css控制文本自动换行？

...技术A分类:电脑/网络>>互联网问题描述:如何用css控制文本自动换行？解析:默认的就是自动换行语法：white-space:normal|pre|nowrap取值：normal:默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行... 查看详情

如何让 Flex 文本控件自动换行

】如何让Flex文本控件自动换行【英文标题】：howtogetaFlextextcontroltowordwrap【发布时间】：2010-10-0623:53:43【问题描述】：我正在创建一个AdobeFlex应用程序，并且我有一个文本控件(mx:Text)，据说当您需要多行不可编辑文本时使用... 查看详情

Twitter Bootstrap 按钮文本自动换行

】TwitterBootstrap按钮文本自动换行【英文标题】：TwitterBootstrapButtonTextWordWrap【发布时间】：2013-09-3012:43:58【问题描述】：在我的一生中，我无法让这些twitter引导按钮将文本换行到多行，它们看起来像这样。我无法发布图片，所以... 查看详情

html文本自动换行(代码片段)

输入文本自动换行文章目录输入文本自动换行一、自嗨1.2.3.补全另一些textarea相关二、其他方法实现文本换行1.div可编辑模式总结一、自嗨扯皮,不正经向就是记录一下,没用过textarea,没甚麽好说的…你被骗进来了哈哈(啊别打我)1.... 查看详情

解决html5（富文本内容）连续数字字母不自动换行

　　最近开发了一个与富文本相关的功能，大概描述一下：通过富文本编辑器添加的内容，通过input展示出来（这里用到了Vue的v-html指令）。　　也是巧合，编辑了一个只有数字组成的长文本，等到展示的时候发现，内容超出了... 查看详情

notepad++为啥每次粘贴都会自动换行

参考技术A如果您在使用Notepad++时粘贴文本时遇到这种情况，那么可能是因为您粘贴的文本中包含了换行符。Notepad++会在每行的末尾自动添加换行符，如果您粘贴的文本已经包含了换行符，那么粘贴后会出现两个换行符，导致文... 查看详情

css3让文本自动换行——word-break属性

1.依靠浏览器让文本自动换行浏览器本身都自带着让文本自动换行的功能。2.指定自动换行的处理方法在CSS3中，可以使用word-break属性来自己决定自动换行的处理方法。div{ word-break:break-all;}word-break属性可以使用的值值换行... 查看详情

将 SVG 文本更改为 css 自动换行

】将SVG文本更改为css自动换行【英文标题】：changeSVGtexttocsswordwrapping【发布时间】：2012-09-2213:46:26【问题描述】：以下代码用于显示javascript树形图的文本标签。nodeEnter.append("svg:text").attr("x",function(d)returnd._children?-8:-48;)/*thepositiono... 查看详情

无法在 iframe 文本编辑器中使用自动换行

】无法在iframe文本编辑器中使用自动换行【英文标题】：Can\'tgetwordwraptoworkinaniframetexteditor【发布时间】：2014-07-2009:03:30【问题描述】：FiddleExample我在编辑器中添加了可调整大小的jQueryUI，但我无法让自动换行功能正常工作。谁... 查看详情

smartforms字段文本碰见"-"自动换行

长文本会在‘-‘这个符号处自动换行原理：SAP标准SMARTFORMS的功能，遇到‘-‘自动判断后面字段是否能在本行完全显示，不够则换行注意：如果一行文本有多个‘-’，则判断‘-‘和下一个‘-‘之间的文本是否能在本行完... 查看详情

fabric.js实现文本自动换行(代码片段)

...js中，可以通过 Text 或IText；创建文字，但是文本是无法换行 Fabric.js提供了Textbox类，继承自 IText；Textbox类允许用户调整文本矩形的大小并自动换行。文本框的Y比例已锁定，用户只能更改宽度。高度将根... 查看详情

自动缩小的 UIButton 文本之前的换行符

】自动缩小的UIButton文本之前的换行符【英文标题】：Newlinebeforeauto-shrunkenUIButtontext【发布时间】：2016-11-2915:35:13【问题描述】：背景我正在创建一个应用程序，在它的故事板中我有一个UIButton元素。我需要UIButton的文本自动收缩... 查看详情

最好的自动换行算法？ [关闭]

...布时间】：2010-09-0606:21:36【问题描述】：自动换行是现代文本编辑器的必备功能之一。如何处理自动换行？换行的最佳算法是什么？如果文本有几百万行，我怎样才能使自动换行非常快？为什么我需要解决方案？因为我的项目必... 查看详情