You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.9 KiB
102 lines
2.9 KiB
1 week ago
|
import Wxml2Canvas from "./wxml2canvas/index.js"; // 根据具体路径修改，node_modules会被忽略
|
||
|
|
|
||
|
|
Component({
|
||
|
|
properties: {
|
||
|
|
params: {
|
||
|
|
type: Object,
|
||
|
|
observer(newVal, _olVal) {
|
||
|
|
if (Object.keys(newVal).length > 0) {
|
||
|
|
this.paramsFormat(newVal);
|
||
|
|
this.setData({
|
||
|
|
width: newVal.body.width,
|
||
|
|
height: newVal.body.height,
|
||
|
|
bgImg: newVal.body.bgImg,
|
||
|
|
elementsMp: newVal.elements,
|
||
|
|
});
|
||
|
|
this.drawImage1();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data: {
|
||
|
|
imgUrl: "",
|
||
|
|
width: "",
|
||
|
|
height: "",
|
||
|
|
imgheight: "",
|
||
|
|
bgImg: "",
|
||
|
|
elementsMp: [],
|
||
|
|
},
|
||
|
|
lifetimes: {
|
||
|
|
attached() {},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
paramsFormat(params) {
|
||
|
|
params.elements.forEach((item) => {
|
||
|
|
if (item.type === 0) {
|
||
|
|
// 图片居中
|
||
|
|
if (item.halign === "center") {
|
||
|
|
item.left = (params.body.width - item.width) / 2;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
item.text = item.text.replace(/[\r\n]/g, "");
|
||
|
|
// 文字居中（使文字标签宽度等于画布宽度，文字加上居中的className）
|
||
|
|
if (item.halign === "center") {
|
||
|
|
item.width = item.width || params.body.width;
|
||
|
|
item.left = (params.body.width - item.width) / 2;
|
||
|
|
}
|
||
|
|
if (item.halign === "right") {
|
||
|
|
item.width = params.body.width;
|
||
|
|
}
|
||
|
|
if (item.id === "shareText" && item.text.length > 30) {
|
||
|
|
item.text = item.text.slice(0, 30) + "...";
|
||
|
|
}
|
||
|
|
if (item.id === "note-title" && item.text.length > 28) {
|
||
|
|
item.text = item.text.slice(0, 28) + "...";
|
||
|
|
}
|
||
|
|
if (item.id === "note-content" && item.text.length > 90) {
|
||
|
|
item.text = item.text.slice(0, 90) + "...";
|
||
|
|
}
|
||
|
|
let len = params.elements.some((x) => x.id === "note-title" && x.text.length);
|
||
|
|
if (len && item.id === "note-summary" && item.text.length > 62) {
|
||
|
|
item.text = item.text.slice(0, 62) + "...";
|
||
|
|
} else if (item.id === "note-summary" && item.text.length > 76) {
|
||
|
|
item.text = item.text.slice(0, 76) + "...";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
drawImage1() {
|
||
|
|
let self = this;
|
||
|
|
this.drawImage1 = new Wxml2Canvas({
|
||
|
|
obj: self,
|
||
|
|
width: this.data.width, // 宽， 以iphone6为基准，传具体数值，其它机型自动适配
|
||
|
|
height: this.data.height, // 高
|
||
|
|
element: "canvas1",
|
||
|
|
background: "transparent",
|
||
|
|
progress(percent) {},
|
||
|
|
finish(url) {
|
||
|
|
self.setData({
|
||
|
|
imgUrl: url,
|
||
|
|
});
|
||
|
|
self.triggerEvent("finish", url);
|
||
|
|
},
|
||
|
|
error(res) {},
|
||
|
|
});
|
||
|
|
|
||
|
|
let data = {
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
type: "wxml",
|
||
|
|
class: "#canvas-bill-body-mp .draw_canvas",
|
||
|
|
limit: "#canvas-bill-body-mp",
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
|
||
|
|
this.drawImage1.draw(data);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|