微信小程序 canvas 文字自动换行

Page({

    drawCanvas: function(ctx) {// 地址
        ctx.setFontSize(14)
        ctx.setFillStyle(‘#9E7240‘)
        ctx.textAlign="center";
        const txHash = this.data.info.txHash ? this.data.info.txHash : ‘暂无信息‘
        this.drawText(ctx,txHash,187, 517 , 232,232) // 自动换行

        ctx.draw()
        ctx.save()
    },// 文本自动换行
    drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
        var lineWidth = 0;
        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), leftWidth, initHeight); //绘制截取部分
                initHeight += 16; //16为字体的高度
                lineWidth = 0;
                lastSubStrIndex = i;
                titleHeight += 30;
            }
            if (i == str.length - 1) { //绘制剩余部分
                ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
            }
        }
        // 标题border-bottom 线距顶部距离
        titleHeight = titleHeight + 10;
        return titleHeight
    },

})

原文地址:https://www.cnblogs.com/cynthia-wuqian/p/10286493.html

时间: 2024-11-09 22:24:38

微信小程序 canvas 文字自动换行的相关文章

微信小程序 canvas 绘图问题总结

业务中碰到微信小程序需要生成海报进行朋友圈分享,这个是非常常见的功能,没想到实际操作的时候花了整整一天一夜才搞好,微信的 canvas 绘图实在是太难用了,官方快点优化一下吧. 业务非常简单,只需要将用到的图片,文案素材拼装到一张图片,保存到本地就可以了. 首先创建画布,将一张网上的图片画到画布上. const ctx = wx.createCanvasContext('shareCanvas'); ctx.drawImage("https://img3.doubanio.com/view/ph

微信 小程序 canvas

测试手机为IPHONE6,开发者工具版本0.10.102800 微信小程序里的canvas 非 h5 canvas有很多不一样的地方,以下把微信小程序的canvas叫做wxcanvas 下面全是我一点点测试出的干货,耐心看: 1.wxcanvas,不像h5canvas那样有width和height属性和width和height的style样式.他只有style样式,可以理解为他就是个框吧: 2.wxcanvas不要当成真的H5canvas,就当它是个div就行,画出范围的东西也是存在的,改变wi

教你怎么用微信小程序进行文字识别

如果我们想要摘录书本上的文字,其实不一定非要手动打录或者拿笔来摘抄.我们也可以用手机 来进行文字识别,快速的将你想要的文字给识别提取出来,还能节省时间.那我们如何用手机来 进行文字识别呢,最简单的方法还是用微信小程序,无需下载任何APP,点击进去就能使用,下面 小编就来教大家如何用微信小程序来进行文字识别 . 1.首先,我们打开手机微信,点击微信上的搜索框搜索"迅捷文字识别",找到这个小程序,然后点击 进去,进入小程序的界面之后,我们先点击"照片/拍照 ". 2.然

微信小程序 | canvas绘图

1.新的尺寸单位 rpx rpx(responsive pixel): 可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素. 设备 rpx换算px (屏幕宽度/750): px换算rpx (750/屏幕宽度) 2.小程序canvas总结 小程序绘制的单位是px, 基础知识点请参考文档 : canvas中存在一个坐标系,二维的,左上

微信小程序 canvas 生成随机验证码

https://blog.csdn.net/qq_16646819/article/details/81020245?utm_source=blogxgwz0 js 1 // pages/bind/bind.js 2 var app = getApp(); 3 var baseUrl = getApp().baseUrl; 4 var ctx; 5 Page({ 6 7 /** 8 * 页面的初始数据 9 */ 10 data: { 11 text: '', 12 }, 13 14 /** 15

微信小程序-实现文字跑马灯-wepy

百度蛮多例子的,但是代码太长懒得看了 前言 要实现跑马灯主要就是获得判断开始定界和结束定界, 1.9.3新增的wxml操作接口 就可以拿到节点长宽等属性,当然你也可以直接用 文字数量 * 文字大小(注意字体的单位px,rpx). 效果图 短字 长字 wxml <view class="content"> <text class="every" decode="{{true}}" style="right:{{annou

微信小程序 的文字复制功能如何实现?

text设置属性 ?selectable="true" 就可以长按复制了 文章来源:刘俊涛的博客 地址:http://www.cnblogs.com/lovebing 欢迎关注,有问题一起学习欢迎留言.评论. 原文地址:https://www.cnblogs.com/lovebing/p/8718696.html

微信小程序开源项目库汇总

微信小程序开源项目库汇总,里面集合了OpenDigg 上的优质的微信小程序开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wemark ★85 - 微信小程序Markdown渲染库 WeZRender ★36 - 微信小程序Canvas增强组件 wet

微信小程序UI组件、开发框架、实用库

UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wemark ★85 - 微信小程序Markdown渲染库 WeZRender ★36 - 微信小程序Canvas增强组件 wetoast ★21 - 仿照微信小程序提供的showToast功能 wxapp-charts ★20 - 微信小程序图表charts组件 WeiXinProject ★18 - 列