|
|
@@ -134,27 +134,30 @@
|
|
|
this.drawRoundImg(this.ctx, avatar.path, (hW - aW) / 2, uni.upx2px(this.posterParams.avatarY), aW, aW, uni.upx2px(this.posterParams.avatarSize /
|
|
|
2))
|
|
|
//绘制标题
|
|
|
- let titleSize = 20
|
|
|
+ let titleSize = this.$isNotEmpty(this.posterParams.fontSize) && this.posterParams.fontSize != -1 ? this.posterParams.fontSize : 20
|
|
|
let titleLen=this.chkstrlen(this.title) / 2
|
|
|
let titleParams = {
|
|
|
- color: '#fff',
|
|
|
+ color: this.posterParams.fontColor || '#fff',
|
|
|
x: (hW / 2) - ( titleLen * titleSize / 2),
|
|
|
y: (hH / 2) + uni.upx2px(this.posterParams.titleY)
|
|
|
}
|
|
|
this.ctx.font = "19px 华文楷体"
|
|
|
this.ctx.setFontSize(titleSize); //设置标题字体大小
|
|
|
- this.ctx.setFillStyle('#fff'); //设置标题文本颜色
|
|
|
+ this.ctx.setFillStyle(titleParams.color); //设置标题文本颜色
|
|
|
this.ctx.fillText(this.title, titleParams.x, titleParams.y)
|
|
|
//绘制副标题
|
|
|
let subTitleLen=this.chkstrlen(this.subTitle) / 2
|
|
|
let subTitleParams = {
|
|
|
- color: '#fff',
|
|
|
- x:(hW / 2) - ( subTitleLen * titleSize / 2),
|
|
|
+ color: this.posterParams.fontColor || '#fff',
|
|
|
+ x: (hW / 2) - ( subTitleLen * titleSize / 2),
|
|
|
y: (hH / 2) + uni.upx2px(this.posterParams.subTitleY)
|
|
|
}
|
|
|
this.ctx.setFontSize(titleSize); //设置标题字体大小
|
|
|
- this.ctx.setFillStyle('#fff'); //设置标题文本颜色
|
|
|
- this.ctx.fillText(this.subTitle, subTitleParams.x, subTitleParams.y)
|
|
|
+ this.ctx.setFillStyle(subTitleParams.color); //设置标题文本颜色
|
|
|
+ this.ctx.fillText(this.subTitle, subTitleParams.x, subTitleParams.y);
|
|
|
+ // this.ctx.setTextAlign('center'); //设置文字的对齐
|
|
|
+ // this.textPrewrap(this.ctx, this.subTitle, subTitleParams.x, subTitleParams.y, 24, this.canvasW, 2);
|
|
|
+
|
|
|
//小程序码
|
|
|
// let qrSize = uni.upx2px(200)
|
|
|
// let qrcodeImg = await this.getImageInfo(this.qrcode)
|
|
|
@@ -278,6 +281,47 @@
|
|
|
}, 200)
|
|
|
}
|
|
|
})
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 文字自动换行
|
|
|
+ * ctx： 画布的上下文环境
|
|
|
+ * content： 需要绘制的文本内容
|
|
|
+ * drawX： 绘制文本的x坐标
|
|
|
+ * drawY： 绘制文本的y坐标
|
|
|
+ * lineHeight：文本之间的行高
|
|
|
+ * lineMaxWidth：每行文本的最大宽度
|
|
|
+ * lineNum：最多绘制的行数
|
|
|
+ **/
|
|
|
+ textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) {
|
|
|
+ var drawTxt = ''; // 当前绘制的内容
|
|
|
+ var drawLine = 1; // 第几行开始绘制
|
|
|
+ var drawIndex = 0; // 当前绘制内容的索引
|
|
|
+
|
|
|
+ // 判断内容是否可以一行绘制完毕
|
|
|
+ if(ctx.measureText(content).width <= lineMaxWidth) {
|
|
|
+ ctx.fillText(content.substring(drawIndex, i), drawX, drawY);
|
|
|
+ } else {
|
|
|
+ for (var i = 0; i < content.length; i++) {
|
|
|
+ drawTxt += content[i];
|
|
|
+ if (ctx.measureText(drawTxt).width >= lineMaxWidth) {
|
|
|
+ if (drawLine >= lineNum) {
|
|
|
+ ctx.fillText(content.substring(drawIndex, i) + '..', drawX, drawY);
|
|
|
+ break;
|
|
|
+ } else {
|
|
|
+ ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);
|
|
|
+ drawIndex = i + 1;
|
|
|
+ drawLine += 1;
|
|
|
+ drawY += lineHeight;
|
|
|
+ drawTxt = '';
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 内容绘制完毕，但是剩下的内容宽度不到lineMaxWidth
|
|
|
+ if (i === content.length - 1) {
|
|
|
+ ctx.fillText(content.substring(drawIndex), drawX, drawY);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
