最近公司项目在用uni-app做小程序商城,其中商品和个人需要生成图片海报,经过摸索记录后将一些重点记录下来。这里有两种方式来生成

1、后台控制生成

2、前端用canvas合成图片

这里我们只讲使用canvas合成图片的方法,canvas包括绘制文字、图片、图形以及图片显示处理。

一、初始化canvas画布

通过createCanvasContext方法来创建画布

var _this = this;
_this.ctx = uni.createCanvasContext('canvasid', this);
const C_W = 650; //canvas宽度,使用的手机屏幕
_this.canvasW = C_W; //
_this.canvasH = 420; // 设置画布高度
_this.ctx.setFillStyle('#545a7a'); //canvas背景颜色
_this.ctx.fillRect(0, 0, _this.canvasW, _this.canvasH); //canvas画布大小

二、画布绘制文字

画布绘制完成后就需要我们把海报需要的元素绘制到画布上,第一步:添加店铺名称,ShopName为定义的店铺名称或者说推广人名称,店铺名称,店铺名称显示使用文字处理:

文字排列方式包含:

1、textAlign = 'start'

2、textAlign = 'end'

3、textAlign = 'left'

4、textAlign = 'right'

5、textAlign = 'center'

在通过setFillStyle设置文字颜色,setFontSize设置字体大小

let _strlineW = 0; //文本宽度
let _strHeight = C_P * 2 + 10; //绘制字体距离canvas顶部的初始高度
if (_this.ShopName != '') {
//店铺名
_this.ctx.textAlign = 'center';
_this.ctx.setFillStyle(_this.TitleColor);
_this.ctx.setFontSize(uni.upx2px(40));
_this.ctx.fillText(_this.ShopName, _this.canvasW / 2, _strHeight);
_strlineW += _this.ctx.measureText(_this.ShopName).width + uni.upx2px(10);
}

超长文字换行处理

//设置文本
_this.ctx.setFontSize(uni.upx2px(28)); //设置标题字体大小
_this.ctx.setFillStyle(_this.TitleColor); //设置标题文本颜色
let _strLastIndex = 0; //每次开始截取的字符串的索引
let _strHeight = r[1] + C_P * 2 + 10; //绘制字体距离canvas顶部的初始高度
let _num=1;
for (let i = 0; i < _this.Title.length; i++) {
_strlineW += _this.ctx.measureText(_this.Title[i]).width;
if (_strlineW > r[0]) {
if(_num == 2&&_this.LineType){
//文字换行数量大于二进行省略号处理
_this.ctx.fillText(_this.Title.substring(_strLastIndex, i-8)+'...', C_P, _strHeight);
_strlineW = 0;
_strLastIndex = i;
_num++;
break;
}else{
_this.ctx.fillText(_this.Title.substring(_strLastIndex, i), C_P, _strHeight);
_strlineW = 0;
_strHeight += 20;
_strLastIndex = i;
_num++;
}
}else if (i == _this.Title.length - 1) {
_this.ctx.fillText(_this.Title.substring(_strLastIndex, i + 1), C_P, _strHeight);
_strlineW = 0;
}
}
//设置文本 end

三、绘制图片

微信里面绘制图片需要先将图片地址转为临时图片地址使用方法如下:

async getImageInfo({ imgSrc }) {
return new Promise((resolve, errs) => {
uni.getImageInfo({
src: imgSrc,
success: function(image) {
resolve(image);
},
fail(err) {
errs(err);
}
});
});
}

// 调用方法
let _imgInfo = await _this.getImageInfo({ imgSrc: _this.HeadImg }); //头像图
// 参数1 图片地址, 参数2 绘图x坐标, 参数3 绘图 y坐标 ,参数4 图片宽度, 参数5 图片高度
_this.ctx.drawImage(_imgInfo.path, (C_W - q[1])/2, _strHeight+5, q[1], q[1]);

有时候我们的图片需要处理下在显示,比如把头像做成圆形。

drawCircular(ctx, url, x, y, width, height) {
//画圆形头像
var avatarurl_width = width;
var avatarurl_heigth = height;
var avatarurl_x = x;
var avatarurl_y = y;
ctx.save();
ctx.beginPath();
ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
ctx.clip();
ctx.drawImage(url, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
ctx.restore();
}
ctx为画布对象,url为图片地址,x为画布x轴位置,y为画布y轴位置,width为图像宽度,height为图像高度。

四、绘制圆角矩形/线条

fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) {
//圆的直径必然要小于矩形的宽高
if (2 * radius > width || 2 * radius > height) {
return false;
} cxt.save();
cxt.translate(x, y);
//绘制圆角矩形的各个边
_this.drawRoundRectPath(cxt, width, height, radius);
cxt.fillStyle = fillColor || '#000'; //若是给定了值就用给定的值否则给予默认值
cxt.fill();
cxt.restore();
},
drawRoundRectPath(cxt, width, height, radius) {
cxt.beginPath(0);
//从右下角顺时针绘制,弧度从0到1/2PI
cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2); //矩形下边线
cxt.lineTo(radius, height); //左下角圆弧,弧度从1/2PI到PI
cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI); //矩形左边线
cxt.lineTo(0, radius); //左上角圆弧,弧度从PI到3/2PI
cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2); //上边线
cxt.lineTo(width - radius, 0); //右上角圆弧
cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2); //右边线
cxt.lineTo(width, height - radius);
cxt.closePath();
}

uni-app使用Canvas绘图的更多相关文章

  1. uni app canvas 不生效

    canvas 创建canvas绘图上下文. <canvas style="width: 300px; height: 200px;" canvas-id="firs ...

  2. Canvas绘图基础(一)

    简单图形绘制 矩形:描边与填充 Canvas的API提供了三个方法,分别用于矩形的清除.描边及填充 clearRect(double x, double y, double w, double h) ...

  3. Android--使用Canvas绘图

    前言 除了使用已有的图片之外,Android应用常常需要在运行时根据场景动态生成2D图片,比如手机游戏,这就需要借助于Android2D绘图的支持.本篇博客主要讲解一下Android下使用Canvas ...

  4. 【转】Android Canvas绘图详解(图文)

    转自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1212/703.html Android Canvas绘图详解(图文) 泡 ...

  5. Android中Canvas绘图基础详解(附源码下载) (转)

    Android中Canvas绘图基础详解(附源码下载) 原文链接  http://blog.csdn.net/iispring/article/details/49770651   AndroidCa ...

  6. (转)Android--使用Canvas绘图

    转:http://www.cnblogs.com/plokmju/p/android_canvas.html 前言 除了使用已有的图片之外,Android应用常常需要在运行时根据场景动态生成2D图片, ...

  7. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  8. HTML5 学习总结(四)——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  9. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  10. 伙伴们休息啦canvas绘图夜空小屋

    HTML5 canvas绘图夜空小屋 伙伴们园友们,夜深了,休息啦,好人好梦... 查看效果:http://hovertree.com/texiao/html5/28/ 效果图如下: 代码如下: &l ...

随机推荐

  1. 【Centos】搭建 SVN 服务器

    1.如果仅仅只是搭建 svn 服务器: (a).先检查 svn 是否已经安装了 rpm -qa subversion #输入这个命令后,会出现 subversion 版本号   (b).如果没有安装, ...

  2. C#中正则表达式解析字符串信息

    正则表达式提取0~9数字 private static string RegexPickupNumber(string str) { string pattern = @"[^0-9]+&q ...

  3. kotlin中类型检查和类型转换

    is 和!is操作符,可以在运行时检查一个对象与一个给定的类型是否一致,或者使用与它相反的!is操作符 fun main(arg: Array<String>) { var a :Any= ...

  4. Win7 双系统安装Centos7,并由windows引导程序引导

    1. 在windows磁盘管理中,压缩卷,腾出40G,需保证一个磁盘设备最多只有3个主分区2. 网上下载centos7的dvd.iso3. 使用UltraISO刻录到U盘4. 重启系统F12使用usb ...

  5. ubuntu tensorflow cpu faster-rcnn train data

    (flappbird) luo@luo-All-Series:~/MyFile/tf-faster-rcnn_box$ (flappbird) luo@luo-All-Series:~/MyFile/ ...

  6. java使用新的(nio)遍历文件(支持文件后缀名、文件名正则表达式匹配)

    import org.junit.Test; import java.io.IOException; import java.nio.file.Files; import java.nio.file. ...

  7. iOS- UITextView禁止Emoji表情

    UITextView代理方法:判断 -(void)textViewDidEndEditing:(UITextView *)textView{        if ([self stringContai ...

  8. unity3d 触屏多点触控(旋转与缩放)

    unity3d 触屏多点触控(旋转与缩放) /*Touch OrbitProgrammed by: Randal J. Phillips (Caliber Mengsk)Original Creati ...

  9. Flutter之切换导航TabBar组件

    TabController 这是Tab页的控制器,用于定义Tab标签和内容页的坐标,还可配置标签页的切换动画效果等. TabController的创建有两种形式,一种是使用系统的DefaultTabC ...

  10. Hadoop学习笔记之三 数据流向

    http://hadoop.apache.org/docs/r1.2.1/api/index.html 最基本的: 1. 文本文件的解析 2. 序列文件的解析 toString会将Byte数组中的内存 ...