网站悬浮,网站如何发布,网站建设数据库代码,wordpress免费简约模板一、下载与引入
Painter通过 json 数据形式#xff0c;来进行动态渲染并绘制出图片。 Painter 的优势
功能全#xff0c;支持文本、图片、矩形、qrcode 类型的 view 绘制布局全#xff0c;支持多种布局方式#xff0c;如 align#xff08;对齐方式#xff09;、rotate来进行动态渲染并绘制出图片。 Painter 的优势
功能全支持文本、图片、矩形、qrcode 类型的 view 绘制布局全支持多种布局方式如 align对齐方式、rotate旋转支持圆角其中图片矩形和整个画布支持 borderRadius 来设置圆角支持边框同时支持 solid、dashed、dotted 三种类型支持渐变色包括线性渐变与径向渐变。支持 box-shadow 和 text-shadow统一使用 shadow 表示。支持文字背景、获取宽度、主动换行支持自定义字体支持图片 mode支持元素的相对定位方法杠杠的性能优化我们对网络素材图片加载实现了一套 LRU 存储机制不用重复下载素材图片。杠杠的容错因为某些特殊情况会导致 Canvas 绘图不完整。我们对此加入了对结果图片进行检测机制如果绘图出错会进行重绘。生成的图片支持分辨率调节支持使用拖动等操作动态编辑绘制内容
文件源码和文档地址https://gitee.com/jackhunx/Painter
下载文件保存到components文件夹下
//在需要使用的页面json中引入
usingComponents: {painter:/components/painter/painter
}二、使用
wxml
!-- 海报弹框 --
van-popup show{{isPosterShow}} bind:closeclosePosterFn custom-stylebackground: none;view classposterimage bind:tapsaveImageFn src{{posterImageUrl}} mode/text点击图片保存至手机相册/text/view
/van-popuppainter palette{{posterData}} bind:imgOKonImageOK /js
var app getApp();
Page({/*** 页面的初始数据*/data: {isPosterShow: false,//海报弹框qrCodeUrl: ,//二维码图片路径posterData: {},//海报数据posterImageUrl: ,//海报图片},//绘制海报drawPosterFn(){wx.showLoading({title: 生成中,})this.setData({posterData: {background: 背景颜色或背景图片地址,width: 1164rpx,height: 1548rpx,views: [{type: text,text: 文字内容,css: {top: 256rpx,left: 82rpx,width: 1000rpx,fontSize: 72rpx,color: #0159BB,maxLines: 2,lineHeight: 108rpx,textAlign: center,fontWeight: bold}},{type: image,url: 二维码图片地址,css: {top: 680rpx,left: 264rpx,width: 640rpx,height: 640rpx,},}],}})},//监听海报是否生成成功onImageOK(e){wx.hideLoading();this.setData({isPosterShow: true,posterImageUrl: e.detail.path})},//保存图片到本地saveImageFn(){let that thiswx.saveImageToPhotosAlbum({filePath: this.data.posterImageUrl,success(res) {wx.hideLoading()wx.showToast({title: 保存成功,icon: success,duration: 1000})},fail(err) {console.log(err)if(err.errMsg saveImageToPhotosAlbum:fail auth deny){wx.showModal({content: 检测到您没有授权保存到相册权限是否去设置打开,confirmText: 确认,cancelText: 取消,success: function(res) {//点击“确认”时打开设置页面if (res.confirm) {wx.openSetting({success () {that.savePhoto();}})} else {}}});}else if(err.errMsg saveImageToPhotosAlbum:fail privacy permission is not authorized){app.showMsg(没有同意用户隐私协议);}else if(err.errMsg saveImageToPhotosAlbum:fail privacy permission is not authorized in gap){app.showMsg(保存失败);}else{app.showMsg(err.errMsg);}}})},//下载图片地址并保存到相册提示保存成功savePhoto() {wx.saveImageToPhotosAlbum({filePath: this.data.posterImageUrl,success(res) {wx.hideLoading()wx.showToast({title: 保存成功,icon: success,duration: 1000})},fail() {wx.showToast({title: 保存失败,icon: error,duration: 1000})}})},//关闭海报弹框closePosterFn(){this.setData({isPosterShow: false})},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {this.drawPosterFn()},
})
