直播海报bug处理

src/components/customPoster/index.js

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