介绍 <李> & lt; view>
& lt; canvas 类=& # 39;share-canvas& # 39;,, canvas-id=皊hare_canvas"祝辞& lt;/canvas>
& lt;/view> drawHeroImage:, function (路径),{
var that =,;//,拿到canvas 上下文
let ctx =, wx.createCanvasContext (& # 39; share_canvas& # 39;);//,为了保证图片比例以及绘制的位置,先要拿到图片的大小
wx.getImageInfo ({
src:路径,
成功:function (res), {//,计算图片占比信息,
let maxWidth =, Math.min (res.width, that.data.canvasWidth *, 0.65);
let radio =, maxWidth /, res.width;
let offsetY =, (that.data.canvasHeight 安康;res.height *,广播),/,2;
console.log (& # 39; offsetY=& # 39;, +, offsetY);
that.setData ({
imageWidth: res.width *,收音机,
imageHeight: res.height *,收音机,
offsetY: offsetY,
});//,绘制帆布背景,不属于绘制图片部分
ctx.setFillStyle(& # 39;白色# 39;)
ctx.fillRect (0, 0, that.data.canvasWidth,, that.data.canvasHeight);//,绘制武将图片,路径是本地路径,不可以传网络url,如果是网络图片需要先下载
ctx.drawImage(路径,10日,offsetY,, res.width *,广播,res.height *,广播)//,绘制小程序码
that.drawQrCodeImage (ctx);//,绘制势力汉字:吴
that.drawInfluence (ctx, that.data.hero.HERO.INFLUENCE);//,绘制武将姓名:陆逊
that.drawName (ctx, that.data.hero.HERO.NAME);//,绘制武将称号:江陵侯
that.drawHorner (ctx, that.data.hero.HERO.HORNER);//,最终调用画函数,生成预览图//,一个坑点:只能调用一次,否则后面的会覆盖前面的
ctx.draw ();
}
});
} //,绘制武将称号:江陵侯
drawHorner: function (ctx,文本),{//,设置字号
ctx.setFontSize (26);//,设置字体颜色
ctx.setFillStyle (“# 000000“);//,计算绘制起点
let x =, this.data.offsetX +, 35;
let y =, this.data.offsetY +, 10;
console.log (& # 39; drawHorner& # 39;, +,文本);
console.log (x);
console.log (y);//,绘制竖排文字,这里是个跑龙套函数,具体实现请继续看
Canvas.drawTextVertical (ctx、,文本,x,, y);
} CanvasRenderingContext2D.prototype.letterSpacingText =, function (文本,x,, y,,字间隔空) canvas.js /* *
*,@author zhangxinxu (com)
*,@licence 麻省理工学院
* @description http://www.zhangxinxu.com/wordpress/?p=7362
*/function drawTextVertical(上下文,文本,x,, y), {
var arrText =, text.split (& # 39; & # 39;);
var arrWidth =, arrText.map (function (信),{
return 26;//,这里为了找到那个空格的,bug 做了许多努力,不过似乎是白费力了//,const metrics =, context.measureText(信);//,console.log(指标);//,const width =, metrics.width;//,return 宽度;
});
var align =, context.textAlign;
var baseline =, context.textBaseline;
if (align ==, & # 39;左# 39;),{
+=x x Math.max.apply (null,, arrWidth),/, 2;
},else if (align ==, & # 39;对# 39;),{
时间=x x 安康;Math.max.apply (null,, arrWidth),/, 2;
}
if (baseline ==, & # 39;底部# 39;,| |,baseline ==, & # 39;字母# 39;,| |,baseline ==, & # 39;表意# 39;),{
时间=y y 安康;arrWidth [0],/, 2;
},else if (baseline ==, & # 39;顶部# 39;,| |,baseline ==, & # 39;挂# 39;),{
+=y y arrWidth [0],/, 2;
}
时间=context.textAlign & # 39;中心# 39;;
时间=context.textBaseline & # 39;中间# 39;;//,开始逐字绘制
arrText.forEach (function (信中,指数),{//,确定下一个字符的纵坐标位置
var letterWidth =, arrWidth(指数);//,是否需要旋转判断
var code =, letter.charCodeAt (0);
时间=if (code & lt; 256), {
context.translate (x, y);//,英文字符,旋转90°
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章主要介绍微信小程序如何利用帆布绘制图片和竖排文字,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强>正文
首先放一张最终保存到相册的图片吧~
自我感觉良好,至少达到了我自己的预期吧~ ~ ~
下面让我们一步一步来看看如何实现的吧。
整个图片分为三个部分:
武将图片
<李>小程序码
<李>武将文字信息
先来看一下wxml里面的代码,主要是放了一个帆布标签,控制了一下高度和宽度属性。
<强>武将图片
<强>小程序码
小程序码和武将图片是一个类型,无非就是需要计算绘制的位置,这里就不再展示相关代码了。
<强>武将文字信息
从刚刚的代码可以看的出,我分了3个部分来绘制,其实吴和陆逊应该是可以放到一起的,但是我在绘制的时候发现,空格在绘制的时候会引起异常,导致空格后面的文字无法绘制出来,所以我这里吴和陆逊中间的空白是靠位置偏移来做的。
这里就展示一下如何绘制武将称号的。
绘制竖排文字从网上找了个开源的代码,需要看原理的请看这里
当然我这里为了适用小程序做了些改动,函数原型是这样子的:
原谅我不是很会js,完全不懂这是个什么语法,看了一会没弄懂,感觉像是给类添加新的属性,不管他。
不管白猫黑猫,能抓到耗子就是好猫
改造后的函数像下面的样子:
