网站admin密码,工业设计专业最好的大学,龙华网站建设招聘,王烨然盈盈案例图
分析案例图都有哪些元素 1.渐变背景 2.圆形头像 3.文字 4.文字超出换行 5.图片居中 6.文字居中 7.单位适配 8.弹窗保存图片。因为一个个绘制图形太麻烦所以这里都采用了方法封装。 canvas api介绍 最后有全部代码#xff0c;复制即用。 data数据 data() {return {myO…案例图
分析案例图都有哪些元素 1.渐变背景 2.圆形头像 3.文字 4.文字超出换行 5.图片居中 6.文字居中 7.单位适配 8.弹窗保存图片。因为一个个绘制图形太麻烦所以这里都采用了方法封装。 canvas api介绍 最后有全部代码复制即用。 data数据 data() {return {myObj: {headImg: https://img.cncentre.cn/bf29eabe47edba2e6ae7249d76759247.png,name: 张三, //微信昵称introduce: 我叫张三今年18岁,introduction: 计算UI设计稿和你手机的屏幕宽度比例例如UI设计稿是750宽度 你手机是3,bgImg: https://img.cncentre.cn/bf29eabe47edba2e6ae7249d76759247.png, //背景图rwmImg: https://img.cncentre.cn/bf29eabe47edba2e6ae7249d76759247.png,smText: 二维码介绍 //个性签名},canvasWidth: 375, //画布宽度canvasHeight: 800, //画布高度ratio: 0, //计算UI设计稿和你手机的屏幕宽度比例例如UI设计稿是750宽度 你手机是350宽度 比例就是2 那么你画布画图时候 所有的尺寸大小、宽高、位置、定位左右上下都需要除以 / 比例2 widths: ,heights: ,imgs: //最后生成的图片}}1.单位适配 onLoad() {let that thisuni.getSystemInfo({success: res {console.log(res);// res.screenWidth 设备宽度that.canvasWidth res.screenWidth pxthat.widths res.screenWidththat.ratio 750 / res.screenWidththat.canvasHeight (that.widths / 375) * 800 pxthat.heights (that.widths / 375) * 800}})uni.showLoading({title: 海报生成中...});that.downImgUrl()},拿到当前设备宽度用来做整个canvas的单位适配。这里根据要求高度是不变的因为高度适配的话不同设备下最后生成的canvas 图片会被压缩。
2.渐变背景 let _this this// 生成画布const ctx uni.createCanvasContext(myCanvas)// 绘制背景const bcg ctx.createLinearGradient(0, 0, 0, _this.heights)bcg.addColorStop(0.4, #D9EBE6)bcg.addColorStop(1, #fff)_this.ctxRectangle(ctx, 0, 0, (_this.widths), (_this.heights), 0, bcg)//画一个矩形也就是整个海报的背景ctxRectangle(ctx, x, y, width, height, r, gnt) {ctx.beginPath() //开始绘制ctx.save() //保存状态ctx.moveTo(x r, y)ctx.lineTo(x width - r, y)ctx.arc(x width - r, y r, r, Math.PI * 1.5, Math.PI * 2)ctx.lineTo(x width, y height - r)ctx.arc(x width - r, y height - r, r, 0, Math.PI * 0.5)ctx.lineTo(x r, y height)ctx.arc(x r, y height - r, r, Math.PI * 0.5, Math.PI)ctx.lineTo(x, y r)ctx.arc(x r, y r, r, Math.PI, Math.PI * 1.5)ctx.fillStyle gntctx.fill() //对当前路径中的内容进行填充ctx.closePath()},3.圆形头像 //绘制头像_this.ctxCircular(ctx, _this.myObj.headImg, (40 / _this.ratio), (100 / _this.ratio), (160 / _this.ratio), (160 / _this.ratio), 80 / _this.ratio, 1)//画一个带圆角矩形//ctx 创建的canvas img填充的图片路径 x轴距离 y轴距离 width宽度 height高度 r圆角大小 shadow是否增加阴影ctxCircular(ctx, img, x, y, width, height, r, shadow) {ctx.beginPath() //开始绘制ctx.save() //保存(canvas)状态ctx.moveTo(x r, y)ctx.lineTo(x width - r, y)ctx.arc(x width - r, y r, r, Math.PI * 1.5, Math.PI * 2)ctx.lineTo(x width, y height - r)ctx.arc(x width - r, y height - r, r, 0, Math.PI * 0.5)ctx.lineTo(x r, y height)ctx.arc(x r, y height - r, r, Math.PI * 0.5, Math.PI)ctx.lineTo(x, y r)ctx.arc(x r, y r, r, Math.PI, Math.PI * 1.5)if (shadow 1) {ctx.shadowBlur 20; // 阴影模糊程度ctx.shadowColor #fff; // 阴影颜色}ctx.fill() //对当前路径中的内容进行填充ctx.clip() //从原始画布中剪切任意形状和尺寸ctx.closePath() //关闭一个路径ctx.drawImage(img, x, y, width, height);ctx.restore() //恢复(canvas)状态}, 增加了阴影的效果
4.绘制文字 //名字_this.ctxText(ctx,normal bold 18px Arial,PingFang SC,left,#00663A,_this.myObj.name, 220 / _this.ratio, 128 / _this.ratio)//文字方法// textFont 字体样式大小 ctxText(ctx, textFont, textAlign, textFillStyle, textName, x, y) {ctx.beginPath()ctx.save() //保存状态//字体样式大小ctx.font textFont,//文字对齐方式ctx.textAlign textAlign//字体颜色ctx.fillStyle textFillStyle//填充字体 x轴 y轴ctx.fillText(textName, x, y)},5.文字超出换行 //介绍_this.ctxTextWrap(ctx, _this.myObj.introduction, 220 / _this.ratio, 170 / _this.ratio, 460 / _this.ratio)//文字超出换行方法ctxTextWrap(ctx, text, x, y, w) {//自动换行介绍var temp var row []let gxqm if (text) {gxqm text} else {gxqm 未设置个性签名}let gexingqianming gxqm.split()for (var a 0; a gexingqianming.length; a) {if (ctx.measureText(temp).width w) {} else {row.push(temp)temp }temp gexingqianming[a]}row.push(temp)ctx.font 13px arailctx.textAlign left;ctx.fillStyle #000000for (var b 0; b row.length; b) {ctx.fillText(row[b], x, y (b 1) * 20)}},6.图片居中
这里是中间的背景图比较简单就没有封装方法 // 背景图ctx.drawImage(_this.myObj.bgImg, //图像资源(48 / _this.ratio),//图像的左上角在目标canvas上 X 轴的位置(290 / _this.ratio),//图像的左上角在目标canvas上 Y 轴的位置(654 / _this.ratio),//在目标画布上绘制图像的宽度(1064 / _this.ratio)//在目标画布上绘制图像的高度)7.文字居中 // 文字居中_this.ctxText(ctx,13px Arial,PingFang SC,center,#242424,_this.myObj.smText, 375 / _this.ratio, 1562 / _this.ratio)//封装方法 textAlign传入 center就可以ctxText(ctx, textFont, textAlign, textFillStyle, textName, x, y) {ctx.beginPath()ctx.save() //保存状态//字体ctx.font textFont,//字体样式ctx.textAlign textAlign//字体颜色ctx.fillStyle textFillStyle//填充字体ctx.fillText(textName, x, y)},8.渲染画布保存图片
8.1 渲染画布 // 渲染画布ctx.draw(false, (() {setTimeout(() {uni.canvasToTempFilePath({canvasId: myCanvas,destWidth: _this.canvasWidth * 2, //展示图片尺寸画布尺寸1*像素比2destHeight: _this.canvasHeight * 2,quality: 1,fileType: jpg,success: (res) {uni.hideLoading()console.log(通过画布绘制出的图片--保存的就是这个图, res.tempFilePath)_this.imgs res.tempFilePath//点击保存方法 打开弹窗_this.$refs.popup.open()},fail: function(error) {uni.hideLoading()uni.showToast({icon: none,position: bottom,title: 绘制图片失败, // res.tempFilePath})}}, _this)}, 100)})())到这里绘图就结束了最后借助 uni.canvasToTempFilePath()把当前画布指定区域的内容导出生成指定大小的图片并返回文件路径也就是我们 data定义的imgs。
8.2 点击保存图片 saveImage() {uni.saveImageToPhotosAlbum({filePath: this.imgs,success: function() {uni.showToast({icon: none,position: bottom,title: 已保存到系统相册,})},fail: function(error) {uni.showModal({title: 提示,content: 若点击不授权将无法使用保存图片功能,cancelText: 不授权,cancelColor: #999,confirmText: 授权,confirmColor: #f94218,success(res) {console.log(res)if (res.confirm) {// 选择弹框内授权uni.openSetting({success(res) {console.log(res.authSetting)}})} else if (res.cancel) {// 选择弹框内 不授权console.log(用户点击不授权)}}})}})},8.3 长按保存图片
如果要实现这个功能需要用到image带的longtap方法也就是 长按事件。还需要一个值来隐藏显示image这里用的data里面的 isshow然后监听imgs是否为空打开弹窗。 view classpercardcanvas v-showisshow canvas-idmyCanvas :style{ width: canvasWidth, height: canvasHeight }/canvasimage v-show!isshow longtapsaveImage() :srcimgs mode:style{ width: canvasWidth, height: canvasHeight }/imageuni-popup refpopup typecenterview classpop1view classtit//点击下面按钮下载到相册请长按下载到相册/viewview classbtns clickcloser()知道了/viewview classbtns clickgoindex()回到首页/view/view/uni-popup/viewwatch: {imgs(newlue) {if (newlue) {this.isshow falsethis.$refs.popup.open()}}},//关闭弹窗closer() {this.$refs.popup.close()},全部代码
需要注意点canvas的绘制时不能直接使用网络路径图片需要使用 uni.getImageInfo 返回图片本地路径再使用。本页面使用了uni-popup组件自己的项目记得引入。
templateview classpercardcanvas v-showisshow canvas-idmyCanvas :style{ width: canvasWidth, height: canvasHeight }/canvasimage v-show!isshow longtapsaveImage() :srcimgs mode:style{ width: canvasWidth, height: canvasHeight }/imageuni-popup refpopup typecenterview classpop1view classtit!-- 点击下面按钮下载到相册 --请长按下载图片/view!-- view classbtns clicksaveImage()点击保存/view --view classbtns clickcloser()知道了/viewview classbtns clickgoindex()回到首页/view/view/uni-popup/view
/templatescriptexport default {data() {return {isshow: true,myObj: {headImg: https://img.cncentre.cn/bf29eabe47edba2e6ae7249d76759247.png,name: 张三, //微信昵称introduce: 我叫张三今年18岁,introduction: 计算UI设计稿和你手机的屏幕宽度比例例如UI设计稿是750宽度 你手机是3,bgImg: https://img.cncentre.cn/bf29eabe47edba2e6ae7249d76759247.png, //背景图rwmImg: https://img.cncentre.cn/bf29eabe47edba2e6ae7249d76759247.png,smText: 二维码介绍 //个性签名},canvasWidth: 375, //画布宽度canvasHeight: 800, //画布高度ratio: 0, //计算UI设计稿和你手机的屏幕宽度比例例如UI设计稿是750宽度 你手机是350宽度 比例就是2 那么你画布画图时候 所有的尺寸大小、宽高、位置、定位左右上下都需要除以 / 比例2 widths: ,heights: ,imgs: }},watch: {imgs(newlue) {if (newlue) {this.isshow falsethis.$refs.popup.open()}}},onLoad() {let that thisuni.getSystemInfo({success: res {console.log(res);// res.screenWidth 设备宽度that.canvasWidth res.screenWidth pxthat.widths res.screenWidththat.ratio 750 / res.screenWidththat.canvasHeight (that.widths / 375) * 800 pxthat.heights (that.widths / 375) * 800}})uni.showLoading({title: 海报生成中...});that.downImgUrl()},methods: {downImgUrl() {let that thisuni.getImageInfo({src: that.myObj.headImg,success: function(res) {that.myObj.headImg res.pathuni.getImageInfo({src: that.myObj.bgImg,success: function(res) {that.myObj.bgImg res.pathuni.getImageInfo({src: that.myObj.rwmImg,success: function(res) {that.myObj.rwmImg res.paththat.drawPageImg()}});}});}});},closer() {this.$refs.popup.close()},goindex() {uni.reLaunch({url: /pages/index/index})},saveImage() {uni.saveImageToPhotosAlbum({filePath: this.imgs,success: function() {uni.showToast({icon: none,position: bottom,title: 已保存到系统相册,})},fail: function(error) {uni.showModal({title: 提示,content: 若点击不授权将无法使用保存图片功能,cancelText: 不授权,cancelColor: #999,confirmText: 授权,confirmColor: #f94218,success(res) {console.log(res)if (res.confirm) {// 选择弹框内授权uni.openSetting({success(res) {console.log(res.authSetting)}})} else if (res.cancel) {// 选择弹框内 不授权console.log(用户点击不授权)}}})}})},//画一个带圆角矩形ctxCircular(ctx, img, x, y, width, height, r, shadow) {ctx.beginPath() //开始绘制ctx.save() //保存(canvas)状态ctx.moveTo(x r, y)ctx.lineTo(x width - r, y)ctx.arc(x width - r, y r, r, Math.PI * 1.5, Math.PI * 2)ctx.lineTo(x width, y height - r)ctx.arc(x width - r, y height - r, r, 0, Math.PI * 0.5)ctx.lineTo(x r, y height)ctx.arc(x r, y height - r, r, Math.PI * 0.5, Math.PI)ctx.lineTo(x, y r)ctx.arc(x r, y r, r, Math.PI, Math.PI * 1.5)if (shadow 1) {ctx.shadowBlur 20; // 模糊效果程度的ctx.shadowColor red; // 阴影颜色}ctx.fill() //对当前路径中的内容进行填充ctx.clip() //从原始画布中剪切任意形状和尺寸ctx.closePath() //关闭一个路径ctx.drawImage(img, x, y, width, height);ctx.restore() //恢复(canvas)状态},//画一个矩形也就是整个海报的背景ctxRectangle(ctx, x, y, width, height, r, gnt) {ctx.beginPath()ctx.save() //保存状态ctx.moveTo(x r, y)ctx.lineTo(x width - r, y)ctx.arc(x width - r, y r, r, Math.PI * 1.5, Math.PI * 2)ctx.lineTo(x width, y height - r)ctx.arc(x width - r, y height - r, r, 0, Math.PI * 0.5)ctx.lineTo(x r, y height)ctx.arc(x r, y height - r, r, Math.PI * 0.5, Math.PI)ctx.lineTo(x, y r)ctx.arc(x r, y r, r, Math.PI, Math.PI * 1.5)ctx.fillStyle gntctx.fill() //对当前路径中的内容进行填充ctx.closePath() //关闭一个路径},ctxText(ctx, textFont, textAlign, textFillStyle, textName, x, y) {ctx.beginPath()ctx.save() //保存状态//字体ctx.font textFont,//字体样式ctx.textAlign textAlign//字体颜色ctx.fillStyle textFillStyle//填充字体ctx.fillText(textName, x, y)},ctxTextWrap(ctx, text, x, y, w) {//自动换行介绍var temp var row []let gxqm if (text) {gxqm text} else {gxqm 未设置个性签名}let gexingqianming gxqm.split()for (var a 0; a gexingqianming.length; a) {if (ctx.measureText(temp).width w) {} else {row.push(temp)temp }temp gexingqianming[a]}row.push(temp)ctx.font 13px arailctx.textAlign left;ctx.fillStyle #000000for (var b 0; b row.length; b) {ctx.fillText(row[b], x, y (b 1) * 20)}},// 使用画布绘制页面drawPageImg() {let _this this// 生成画布const ctx uni.createCanvasContext(myCanvas)// 绘制背景const bcg ctx.createLinearGradient(0, 0, 0, _this.heights)bcg.addColorStop(0.4, #D9EBE6)bcg.addColorStop(1, #fff)_this.ctxRectangle(ctx, 0, 0, (_this.widths), (_this.heights), 0, bcg)//名字_this.ctxText(ctx,normal bold 18px Arial,PingFang SC,left,#00663A,_this.myObj.name, 220 / _this.ratio, 128 / _this.ratio)//名称_this.ctxText(ctx,13px Arial,PingFang SC,left,#242424,_this.myObj.introduce, 220 / _this.ratio, 170 / _this.ratio)//介绍_this.ctxTextWrap(ctx, _this.myObj.introduction, 220 / _this.ratio, 170 / _this.ratio, 460 / _this.ratio)// // 背景图ctx.drawImage(_this.myObj.bgImg, //图像资源(48 / _this.ratio),//图像的左上角在目标canvas上 X 轴的位置(290 / _this.ratio),//图像的左上角在目标canvas上 Y 轴的位置(654 / _this.ratio),//在目标画布上绘制图像的宽度(1064 / _this.ratio)//在目标画布上绘制图像的高度)_this.ctxText(ctx,13px Arial,PingFang SC,center,#242424,_this.myObj.smText, 375 / _this.ratio, 1562 / _this.ratio)// // 绘制头像_this.ctxCircular(ctx, _this.myObj.headImg, (40 / _this.ratio), (100 / _this.ratio), (160 / _this.ratio), (160 / _this.ratio), 80 / _this.ratio)//矩形二维码_this.ctxCircular(ctx, _this.myObj.rwmImg, (305 / _this.ratio), (1382 / _this.ratio), (140 / _this.ratio),(140 / _this.ratio), 6)// 渲染画布ctx.draw(false, (() {setTimeout(() {uni.canvasToTempFilePath({canvasId: myCanvas,destWidth: _this.canvasWidth * 2, //展示图片尺寸画布尺寸1*像素比2destHeight: _this.canvasHeight * 2,quality: 1,fileType: jpg,success: (res) {uni.hideLoading()console.log(通过画布绘制出的图片--保存的就是这个图, res.tempFilePath)_this.imgs res.tempFilePath// _this.$refs.popup.open()},fail: function(error) {uni.hideLoading()uni.showToast({icon: none,position: bottom,title: 绘制图片失败, // res.tempFilePath})}}, _this)}, 100)})())},}}
/script
style langscss.pop1 {background-color: #fff;width: 520rpx;padding: 68rpx 120rpx;box-sizing: border-box;border-radius: 20rpx;background: linear-gradient(#E6F5EB 45%, #FEFFFE 100%);.tit {font-size: 32rpx;color: #000000;margin: 20px 0px;}.btns {font-size: 32rpx;color: #fff;background-color: #00663A;border-radius: 14rpx;padding: 14rpx 30rpx;margin-top: 40rpx;text-align: center;}}
/style
