分享图片生成样式调整

 <!--
  * @Date: 2022-09-26 14:36:57
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-10-28 18:02:43
+ * @LastEditTime: 2022-10-31 11:28:15
  * @FilePath: /swx/src/pages/activityDetail/index.vue
  * @Description: 活动详情页
 -->
@@ -154,6 +154,7 @@ import * as dayjs from 'dayjs'
 import { infoUserAPI } from '@/api/User/index';
 import { qrCodeActivityAPI } from '@/api/Activity/index';
 import icon_share from '@/images/icon/share.png'
+import image_line from '@/images/line@2x-2.png'
 
 const nickname = ref('');
 const avatar = ref('');
@@ -213,20 +214,21 @@ const start = async () => {
         backgroundColor: '',
         debug: false,
         blocks: [
-          {
+          { // 上部分canvas画布高度
             x: 40,
             y: 20,
             width: 950,
-            height: 1200,
+            height: 950,
             paddingLeft: 0,
             paddingRight: 0,
             borderWidth: 1,
-            borderColor: '#D9DCD5',
+            // borderColor: '#D9DCD5',
+            borderColor: '#fff',
             backgroundColor: '#fff',
-            borderRadius: 16,
-            // borderRadiusGroup: [0, 0, 18, 18],
+            // borderRadius: 16,
+            borderRadiusGroup: [16, 16, 0, 0],
           },
-          {
+          { // 活动时间背景图, 写文字撑开长度
             x: 40,
             y: 730,
             // width: 580,
@@ -256,7 +258,7 @@ const start = async () => {
             // borderRadius: 16,
             // zIndex: 100,
           },
-          {
+          { // 活动地点背景图, 写文字撑开长度
             x: 40,
             y: 830,
             // width: 580,
@@ -286,6 +288,19 @@ const start = async () => {
             // borderRadius: 16,
             // zIndex: 100,
           },
+          { // 下部分canvas画布高度
+            x: 40,
+            y: 1060,
+            width: 950,
+            height: 250,
+            paddingLeft: 0,
+            paddingRight: 0,
+            borderWidth: 1,
+            borderColor: '#fff',
+            backgroundColor: '#fff',
+            // borderRadius: 16,
+            borderRadiusGroup: [0, 0, 16, 16],
+          }
         ],
         texts: [
           {
@@ -334,7 +349,7 @@ const start = async () => {
           },
           {
             x: 300,
-            y: 1080,
+            y: 1150,
             text: nickname.value,
             fontSize: 50,
             color: '#333',
@@ -347,7 +362,7 @@ const start = async () => {
           },
           {
             x: 300,
-            y: 1150,
+            y: 1220,
             text: '邀请你一起来活动！',
             fontSize: 42,
             color: '#8F9399',
@@ -361,6 +376,16 @@ const start = async () => {
         ],
         images: [
           {
+            url: image_line,
+            width: 949,
+            height: 108,
+            x: 40,
+            y: 960,
+            // borderRadius: 0,
+            // borderWidth: 0,
+            zIndex: 10,
+          },
+          {
             url: activity.cover,
             width: 950,
             height: 500,
@@ -398,7 +423,7 @@ const start = async () => {
             width: 170,
             height: 170,
             x: 80,
-            y: 1030,
+            y: 1090,
             borderRadius: 100,
             borderWidth: 0,
             zIndex: 10,
@@ -408,21 +433,21 @@ const start = async () => {
             width: 170,
             height: 170,
             x: 750,
-            y: 1030,
+            y: 1090,
             borderRadius: 100,
             borderWidth: 0,
             zIndex: 10,
           },
         ],
         lines: [
-          {
-            startY: 970,
-            startX: 80,
-            endX: 950,
-            endY: 971,
-            width: 1,
-            color: '#8F9399',
-          }
+          // {
+          //   startY: 970,
+          //   startX: 80,
+          //   endX: 950,
+          //   endY: 971,
+          //   width: 1,
+          //   color: '#8F9399',
+          // }
         ]
       }
       startDraw.value = true;