Painter 的优势
- 功能全，支持文本、图片、矩形、qrcode 类型的 view 绘制
- 布局全，支持多种布局方式，如 align（对齐方式）、rotate（旋转）
- 支持圆角，其中图片，矩形，和整个画布支持 borderRadius 来设置圆角
- 支持边框，同时支持 solid、dashed、dotted 三种类型
- 支持渐变色，包括线性渐变与径向渐变。
- 支持 box-shadow 和 text-shadow，统一使用 shadow 表示。
- 支持文字背景、获取宽度、主动换行
- 支持图片 mode
- 支持元素的相对定位方法
- 杠杠的性能优化，我们对网络素材图片加载实现了一套 LRU 存储机制，不用重复下载素材图片。
- 杠杠的容错，因为某些特殊情况会导致 Canvas 绘图不完整。我们对此加入了对结果图片进行检测机制，如果绘图出错会进行重绘。
- 生成的图片支持分辨率调节
- 支持使用拖动等操作动态编辑绘制内容
快速开始
1. 引入代码
2. 引入组件
{
"path": "pages/result/index",
"style": {
"navigationBarTitleText": "结果",
"mp-weixin": {
"usingComponents": {
"painter": "../../wxcomponents/Kujiale-Mobile-painter/painter"
}
}
}
}
复制代码
3. 使用组件
<painter
@imgOK="onImgOk"
@imgErr="onImgErr"
customStyle="position: absolute; left:-9999rpx; top:0rpx;"
widthPixels="750"
:palette="template"
/>
复制代码
4. 请求接口绘图
getDraw() {
this.template = {
background: "#fff",
width: "420rpx",
height: "336rpx", //分享图片高度要保持 5：4
views: [
{
type: "image",
url: this.$api.PUBLIC_IMG_PATH + "/l75dsv-bg.png",
css: {
top: "0px",
left: "0px",
width: "420rpx",
height: "336rpx",
},
},
{
type: "text",
text: this.dietDesc + " " + this.shareCreatTime,
css: {
top: "24rpx",
left: "210rpx",
align: "center",
fontSize: "24rpx",
color: "#000",
},
},
{
type: "image",
url: this.shareValueBg,
css: {
top: "69rpx",
left: "210rpx",
width: "190rpx",
height: "190rpx",
align: "center",
borderRadius: "95rpx",
},
},
{
type: "text",
text: this.params.bloodSugar + "",
css: {
top: "116rpx",
left: "210rpx",
align: "center",
fontSize: "60rpx",
color: "#fff",
},
},
{
type: "text",
text: "mmol/L",
css: {
top: "178rpx",
left: "210rpx",
align: "center",
fontSize: "28rpx",
color: "#fff",
},
},
{
type: "image",
url: this.$store.getters.storage.userInfo.avatarUrl,
css: {
top: "260rpx",
left: "24rpx",
width: "60rpx",
height: "60rpx",
},
},
{
type: "text",
text: this.$store.getters.storage.userInfo.nickName,
css: {
top: "276rpx",
left: "96rpx",
fontSize: "22rpx",
color: "#000",
},
},
{
type: "rect",
css: {
top: "271rpx",
right: "24rpx",
width: "88rpx",
height: "40rpx",
color: this.shareBgColor,
borderRadius: "32rpx",
},
},
{
type: "text",
text: this.bloodSugerDesc,
css: {
top: "277rpx",
right: "44rpx",
fontSize: "24rpx",
color: this.shareTextColor,
},
},
],
};
},
// 生成成功
onImgOk(e) {
//其中 e.detail.path 为生成的图片路径
wx.hideLoading();
var filePath = e.detail.path;
UploadImage(
filePath,
(res) => {
const data = JSON.parse(res.data);
if (data.code == 100) {
this.shareImage = data.data;
this.showShareCard = true;
}
},
(error) => {}
);
},
复制代码
