微信小程序利用Canvas绘制图片和竖排文字详解

时间:2021-05-18

前言

闲暇时间抽个空写了个三国杀武将手册的小程序,中间有个需求设计的是合成武将皮肤图、竖排的武将姓名、以及小程序码,然后提供保存图片到相册,最终让用户可以分享到朋友圈或其他平台。合成图片应该按照 Canvas 的文档来做都没什么问题,主要是有个竖排文字的需求,这里和大家分享一下。

正文

首先放一张最终保存到相册的图片吧~

自我感觉良好,至少达到了我自己的预期吧~~~

下面让我们一步一步来看看如何实现的吧。

整个图片分为三个部分:

  • 武将图片
  • 小程序码
  • 武将文字信息

先来看一下 wxml 里面的代码,主要是放了一个 canvas 标签,控制了一下高度和宽度属性。

<view><canvas class='share-canvas' style="width:100%;height:{{canvasHeight}}px" canvas-id="share_canvas"></canvas></view>

武将图片

drawHeroImage: function (path) {var that = this;// 拿到canvas contextlet ctx = wx.createCanvasContext('share_canvas');// 为了保证图片比例以及绘制的位置,先要拿到图片的大小wx.getImageInfo({src: path,success: 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 * radio) / 2;console.log('offsetY=' + offsetY);that.setData({imageWidth: res.width * radio,imageHeight: res.height * radio,offsetY: offsetY,});// 绘制canvas背景,不属于绘制图片部分ctx.setFillStyle('white')ctx.fillRect(0, 0, that.data.canvasWidth, that.data.canvasHeight);// 绘制武将图片,path是本地路径,不可以传网络url,如果是网络图片需要先下载ctx.drawImage(path, 10, offsetY, res.width * radio, res.height * radio)// 绘制小程序码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);// 最终调用draw函数,生成预览图// 一个坑点:只能调用一次,否则后面的会覆盖前面的ctx.draw();}});}

小程序码

小程序码和武将图片是一个类型,无非就是需要计算绘制的位置,这里就不再展示相关代码了。

武将文字信息

从刚刚的代码可以看出,我分了3个部分来绘制,其实 吴 和 陆逊 应该是可以放到一起的,但是我在绘制的时候发现,空格在绘制的时候会引起异常,导致空格后面的文字无法绘制出来,所以我这里 吴 和 陆逊 中间的空白是靠位置偏移来做的。

这里就展示一下如何绘制武将称号的。

// 绘制武将称号:江陵侯drawHorner: function (ctx, text) {// 设置字号ctx.setFontSize(26);// 设置字体颜色ctx.setFillStyle("#000000");// 计算绘制起点let x = this.data.offsetX + 35;let y = this.data.offsetY + 10;console.log('drawHorner' + text);console.log(x);console.log(y);// 绘制竖排文字,这里是个Util函数,具体实现请继续看Canvas.drawTextVertical(ctx, text, x, y);}

绘制竖排文字从网上找了个开源的代码,需要看原理的请看这里

当然我这里为了适用小程序做了些改动,函数原型是这样子的:

CanvasRenderingContext2D.prototype.letterSpacingText = function (text, x, y, letterSpacing)

原谅我不是很会 js ,完全不懂这是个什么语法,看了一会没弄懂,感觉像是给类添加新的属性,不管他。

不管白猫黑猫,能抓到耗子就是好猫

改造后的函数像下面的样子:

canvas.js /*** @author zhangxinxu(.com)* @licence MIT* @description http://plete(res) {console.log(res)}})}})}

开源

本着开源的精神,源码已经放在 Github 上,大家可以去上面查看具体代码。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章