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. 使用组件

@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) => {}

);

},

computed: {

shareCardTitle: function () {

return bloodSugarObj[this.params.bloodSugarIndex].shareCardTitle;

},

}

复制代码