美文网首页
canvas 文字在容器内自动换行

canvas 文字在容器内自动换行

作者: littlesunn | 来源:发表于2023-09-22 13:17 被阅读0次
    toFormateStr(ctx: CanvasRenderingContext2D, text:string, boxWidth: number, startX: number, startY: number, lineHeight: number) {
        let textArr = text.split("");
        let liner = 0;
        let fontSize = 20
        var drawText = (textArr: string[]) => {
            for (let i = 0; i < textArr.length; i++) {
                const t = textArr[i];
                if (fontSize * (i + 1) > boxWidth) {
                    liner++;
                    drawText(textArr.slice(i, textArr.length))
                    break;
                }else {
                    ctx.fillText(t, (startX + fontSize * i), startY + liner * fontSize + liner * lineHeight);
                }
            }
        }
        drawText(textArr);
        return liner + 1;
    }

相关文章

  • 小程序Canvas文字自动换行

    不废话了,在网上找轮子,找到的都是缺胳膊少腿的,干脆自己写了。以下是demo 换行原理比较笨比 循环需要换行的字符...

  • 垂直方向上可换行的TextView

    根据view的高度自动换行主要是通过staticlayout 绘制文字通过canvas 的旋转和平移达到效果 Ma...

  • flutter Text(02)

    简单样式 TextStyle softWrap 是否自动换行,若为false,文字将不考虑容器大小,单行显示,超出...

  • Canvas模拟TextArea换行效果

    最近项目种需求,使用Canvas模拟TextArea自动换行的效果,TextArea自动换行,考虑了中英文、考虑了...

  • canvas文字换行

    上次项目中,涉及到文字换行的问题,如图 可谓将换行做到了极致解决方法:将文字换行封装为一个方法 调用方法绘制文字 ...

  • canvas 文字换行

  • canvas字体换行

    canvas绘制的字体换行 问题描述:canvas绘制的字体是不会自动换行的,也没有相关的api,所以我们想要ca...

  • div横向排列+滚动条显示

    实现多个div在容器内横向排列,利用white-space这个属性防止父容器内容换行,同时将容器内元素设置为行内块...

  • canvas文字换行问题

  • 3.excel快捷键

    1.单元格内换行 自动换行alt+enter

网友评论

      本文标题:canvas 文字在容器内自动换行

      本文链接:https://www.haomeiwen.com/subject/hsstbdtx.html