canvas绘制海报中文字自动换行

canvas：canvas绘制海报中文字自动换行

问题描述

canvas绘制的海报在某一行文字过多时不会自动换行（设置文本宽度无用）

源代码

context.fillText(this.data.goods.package_brief, 17 * getRatio(), 350 * getRatio())；

新方法调用

this.drawText(context, this.data.goods.package_brief,17*getRatio(),340*getRatio(),200)；

解决方法

  drawText: function (context,t,x,y,w){var chr = t.split("");var temp = "";var row = [];for (var a = 0; a < chr.length; a++) {if (context.measureText(temp).width < w && context.measureText(temp + (chr[a])).width <= w) {temp += chr[a];}//context.measureText(text).width  测量文本text的宽度else {row.push(temp);temp = chr[a];}}row.push(temp);// 只显示2行，加...if (row.length>=2){for (var b = 0; b < 2; b++) {var str = row[b];console.log(row, str)if (b == 1) {str = str.substring(0, str.length) + '...';}context.fillText(str, x, y + (b + 1) * 15);}}else{for (var b = 0; b < row.length; b++) {context.fillText(row[b], x, y + (b + 1) * 15);//字体20，间隔24。类似行高}}}

参数详解：

drawText: function (context,t,x,y,w){}中 context是canvas自身，t是要转换的文字，x是距离canvas左边的距离，y是距离canvas顶部的距离，w是设定的文字内容宽度

canvas绘制海报中文字自动换行相关推荐

canvas绘制海报分享，海报中设置圆角二维码
canvas绘制海报分享,海报中设置圆角二维码,背景图,动态的文字,绘制完成以后保存为图片,可长按分享海报图片. 下面看看效果图:(假设教师的图片是二维码) 这其中,背景图元素,还有教师的图片(假设是 ...
canvas绘制海报及点击保存海报
1.canvas绘制海报 createcanvas() {let that = this,windowW = that.data.windowWconst query = wx.createSelec ...
uniapp使用canvas绘制海报
Uniapp中使用canvas绘制海报可以按照以下步骤进行: 1. 引入需要绘制的图片资源这些图片可以是本地的,也可以是远程的.可以将图片资源放在项目的`static`目录下,例如:`static/ ...
html怎样让文字自动换行,css中文字自动换行如何实现
css中文字自动换行如何实现在div css布局中,遇到连续英文字母或连续数字在div.p.h2.h1等盒子里排成一排显示不会自动随盒子宽度限制而自动换行. 当然中文字在DIV或任意盒子中均会自动换 ...
使用canvas绘制海报，包含文字、图片、base64图片
这里写目录标题步骤 1. 创建画布 2. 画图片 3. 画文字 4. 画base64图片保存完整代码 js vue 这里介绍使用js(jQuery)或者vue使用画布绘制海报,小程序uniapp ...
小程序中使用canvas绘制海报
最近项目需求使用canvas绘制朋友圈可分享的海报,中间遇到很多问题,于是上网搜索,完美解决后,在此总结一下. 先来看一下效果图,点击按钮生成带二维码的图片. 1.关于canvas画布的宽度和高度 w ...
小程序php生成海报,小程序用canvas绘制海报的做法
2020年第一篇文章,年初忙着复习刷题一直没空去写东西,书看的越多感觉越技不如人,始终徘徊在小菜鸡的行列中,最近项目里正好有一个canvas的业务,突然又燃起了我一个UI前端的火种,记下了踩坑和思考. ...
微信小程序使用canvas绘制海报并保存本地相册
在做微信小程序的时候,很多都会用到生成海报分享功能,刚好最近项目有这个需求,今天就发出来记录下首先是使用canvas绘制一张海报,微信小程序的canvas有老版本和新版本我是用的是新版本代码如下 ...
uniapp Canvas绘制海报
在绘制的过程中可能会需要文字换行文字换行在我上篇文章,链接:文字换行. 之前写过一个分享海报,但是觉得代码逻辑不清晰所以重新写一个我们的需求是这样子的 <view class="w ...

canvas绘制海报中文字自动换行

canvas：canvas绘制海报中文字自动换行

问题描述

源代码

新方法调用

解决方法

参数详解：

canvas绘制海报中文字自动换行相关推荐

最新文章

热门文章