hy-app 0.4.9 → 0.4.11

package/components/hy-watermark/hy-watermark.vue

@@ -38,7 +38,22 @@ defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
-  /** 显示内容 */
+  /** 显示主标题 */
+  title: {
+    type: String,
+    default: "",
+  },
+  /** 主标题颜色 */
+  titleColor: {
+    type: String,
+    default: "",
+  },
+  /** 主标题字体大小，单位px */
+  titleSize: {
+    type: Number,
+    default: 0,
+  },
+  /** 显示副标题内容 */
   content: {
     type: String,
     default: "",
@@ -264,6 +279,9 @@ function createWaterMark(
   const contentWidth = width * pixelRatio.value;
   const contentHeight = height * pixelRatio.value;
   const fontSize = size * pixelRatio.value;
+  // 标题字体大小：如果设置了titleSize则使用titleSize，否则使用size的1.2倍
+  const titleFontSize = props.titleSize > 0 ? props.titleSize * pixelRatio.value : fontSize * 1.2;
+  
   // #ifndef H5
   if (canvasOffScreenable.value) {
     createOffscreenCanvas(
@@ -281,6 +299,8 @@ function createWaterMark(
       image,
       imageHeight,
       imageWidth,
+      props.title,
+      titleFontSize
     );
   } else {
     createCanvas(
@@ -293,6 +313,8 @@ function createWaterMark(
       image,
       imageHeight,
       imageWidth,
+      props.title,
+      titleFontSize
     );
   }
   // #endif
@@ -312,6 +334,8 @@ function createWaterMark(
     image,
     imageHeight,
     imageWidth,
+    props.title,
+    titleFontSize
   );
   // #endif
 }
@@ -348,6 +372,8 @@ function createOffscreenCanvas(
   image: string,
   imageHeight: number,
   imageWidth: number,
+  title: string,
+  titleFontSize: number
 ) {
   // 创建离屏canvas
   const canvas: any = uni.createOffscreenCanvas({
@@ -357,7 +383,29 @@ function createOffscreenCanvas(
   });
   const ctx: any = canvas.getContext("2d");
   if (ctx) {
-    if (image) {
+    if (image && (title || content)) {
+      // 图片和文字同时显示
+      const img = canvas.createImage() as HTMLImageElement;
+      drawImageAndTextOffScreen(
+        ctx,
+        img,
+        image,
+        imageHeight,
+        imageWidth,
+        title,
+        content,
+        rotate,
+        contentWidth,
+        contentHeight,
+        fontSize,
+        titleFontSize,
+        fontFamily,
+        fontStyle,
+        fontWeight,
+        color,
+        canvas,
+      );
+    } else if (image) {
       const img = canvas.createImage() as HTMLImageElement;
       drawImageOffScreen(
         ctx,
@@ -373,7 +421,7 @@ function createOffscreenCanvas(
     } else {
       drawTextOffScreen(
         ctx,
-        content,
+        title,
         contentWidth,
         contentHeight,
         rotate,
@@ -383,6 +431,8 @@ function createOffscreenCanvas(
         fontWeight,
         color,
         canvas,
+        content,
+        titleFontSize
       );
     }
   } else {
@@ -413,10 +463,28 @@ function createCanvas(
   image: string,
   imageHeight: number,
   imageWidth: number,
+  title: string,
+  titleFontSize: number
 ) {
   const ctx = uni.createCanvasContext(canvasId.value);
   if (ctx) {
-    if (image) {
+    if (image && (title || content)) {
+      // 图片和文字同时显示
+      drawImageAndTextOnScreen(
+        ctx,
+        image,
+        imageHeight,
+        imageWidth,
+        title,
+        content,
+        rotate,
+        contentWidth,
+        contentHeight,
+        fontSize,
+        titleFontSize,
+        color
+      );
+    } else if (image) {
       drawImageOnScreen(
         ctx,
         image,
@@ -427,7 +495,7 @@ function createCanvas(
         contentHeight,
       );
     } else {
-      drawTextOnScreen(ctx, content, contentWidth, rotate, fontSize, color);
+      drawTextOnScreen(ctx, title, contentWidth, rotate, fontSize, color, content, titleFontSize);
     }
   } else {
     console.error("无法获取canvas上下文，请确认当前环境是否支持canvas");
@@ -466,13 +534,37 @@ function createH5Canvas(
   image: string,
   imageHeight: number,
   imageWidth: number,
+  title: string,
+  titleFontSize: number
 ) {
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext("2d");
   canvas.setAttribute("width", `${canvasWidth}px`);
   canvas.setAttribute("height", `${canvasHeight}px`);
   if (ctx) {
-    if (image) {
+    if (image && (title || content)) {
+      // 图片和文字同时显示
+      const img = new Image();
+      drawImageAndTextOffScreen(
+        ctx,
+        img,
+        image,
+        imageHeight,
+        imageWidth,
+        title,
+        content,
+        rotate,
+        contentWidth,
+        contentHeight,
+        fontSize,
+        titleFontSize,
+        fontFamily,
+        fontStyle,
+        fontWeight,
+        color,
+        canvas,
+      );
+    } else if (image) {
       const img = new Image();
       drawImageOffScreen(
         ctx,
@@ -488,7 +580,7 @@ function createH5Canvas(
     } else {
       drawTextOffScreen(
         ctx,
-        content,
+        title,
         contentWidth,
         contentHeight,
         rotate,
@@ -498,6 +590,8 @@ function createH5Canvas(
         fontWeight,
         color,
         canvas,
+        content,
+        titleFontSize
       );
     }
   } else {
@@ -519,9 +613,32 @@ function createH5Canvas(
  * @param color 水印字体颜色
  * @param canvas canvas实例
  */
+// 测量文本宽度并自动换行
+function wrapText(ctx: CanvasRenderingContext2D, text: string, maxWidth: number, fontSize: number) {
+  const words = text.split('');
+  const lines: string[] = [];
+  let currentLine = '';
+  
+  for (let i = 0; i < words.length; i++) {
+    const testLine = currentLine + words[i];
+    const metrics = ctx.measureText(testLine);
+    const testWidth = metrics.width;
+    
+    // 当文字宽度超过容器宽度的80%时换行
+    if (testWidth > maxWidth * 0.8 && currentLine !== '') {
+      lines.push(currentLine);
+      currentLine = words[i];
+    } else {
+      currentLine = testLine;
+    }
+  }
+  lines.push(currentLine);
+  return lines;
+}
+
 function drawTextOffScreen(
   ctx: CanvasRenderingContext2D,
-  content: string,
+  title: string,
   contentWidth: number,
   contentHeight: number,
   rotate: number,
@@ -531,15 +648,50 @@ function drawTextOffScreen(
   fontWeight: string | number,
   color: string,
   canvas: HTMLCanvasElement,
+  content: string = '',
+  titleFontSize: number = 0
 ) {
-  console.log(fontSize, "离屏");
   ctx.textBaseline = "middle";
   ctx.textAlign = "center";
-  ctx.translate(contentWidth / 2, contentWidth / 2);
+  ctx.translate(contentWidth / 2, contentHeight / 2);
   ctx.rotate((Math.PI / 180) * rotate);
-  ctx.font = `${fontStyle} normal ${fontWeight} ${fontSize}px/${contentHeight}px ${fontFamily}`;
-  ctx.fillStyle = color;
-  ctx.fillText(content, 0, 0);
+  
+  // 计算总高度
+  let totalTextHeight = titleFontSize;
+  if (content) {
+    totalTextHeight += fontSize + 5; // 标题和副标题之间的间距
+  }
+  
+  // 起始Y坐标
+  let startY = -totalTextHeight / 2;
+  
+  // 绘制主标题（支持自动换行）
+  if (title) {
+    ctx.font = `${fontStyle} normal ${fontWeight} ${titleFontSize}px/${contentHeight}px ${fontFamily}`;
+    // 使用titleColor或默认color
+    ctx.fillStyle = props.titleColor || color;
+    const titleLines = wrapText(ctx, title, contentWidth, titleFontSize);
+    const titleLineHeight = titleFontSize * 1.2;
+    
+    for (let i = 0; i < titleLines.length; i++) {
+      ctx.fillText(titleLines[i], 0, startY + i * titleLineHeight);
+    }
+    
+    startY += titleLines.length * titleLineHeight + 5;
+  }
+  
+  // 绘制副标题（支持自动换行）
+  if (content) {
+    ctx.font = `${fontStyle} normal ${fontWeight} ${fontSize}px/${contentHeight}px ${fontFamily}`;
+    ctx.fillStyle = color;
+    const contentLines = wrapText(ctx, content, contentWidth, fontSize);
+    const contentLineHeight = fontSize * 1.2;
+    
+    for (let i = 0; i < contentLines.length; i++) {
+      ctx.fillText(contentLines[i], 0, startY + i * contentLineHeight);
+    }
+  }
+  
   ctx.restore();
   waterMarkUrl.value = canvas.toDataURL();
 }
@@ -553,21 +705,79 @@ function drawTextOffScreen(
  * @param fontSize 水印字体大小
  * @param color 水印字体颜色
  */
+// 简化版本的文字换行（UniApp CanvasContext不支持measureText）
+function simpleWrapText(text: string, maxLength: number) {
+  const lines: string[] = [];
+  let currentLine = '';
+  
+  // 基于字符数估算换行（适用于UniApp CanvasContext）
+  for (let i = 0; i < text.length; i++) {
+    currentLine += text[i];
+    if (currentLine.length >= maxLength) {
+      lines.push(currentLine);
+      currentLine = '';
+    }
+  }
+  if (currentLine) {
+    lines.push(currentLine);
+  }
+  return lines;
+}
+
 function drawTextOnScreen(
   ctx: UniApp.CanvasContext,
-  content: string,
+  title: string,
   contentWidth: number,
   rotate: number,
   fontSize: number,
   color: string,
+  content: string = '',
+  titleFontSize: number = 0
 ) {
   ctx.setTextBaseline("middle");
   ctx.setTextAlign("center");
   ctx.translate(contentWidth / 2, contentWidth / 2);
   ctx.rotate((Math.PI / 180) * rotate);
-  ctx.setFillStyle(color);
-  ctx.setFontSize(fontSize);
-  ctx.fillText(content, 0, 0);
+  
+  // 估算每行最大字符数
+  const maxChars = Math.floor(contentWidth / (fontSize * 0.5));
+  
+  // 计算总高度
+  let totalTextHeight = titleFontSize;
+  if (content) {
+    totalTextHeight += fontSize + 5;
+  }
+  
+  // 起始Y坐标
+  let startY = -totalTextHeight / 2;
+  
+  // 绘制主标题（支持自动换行）
+  if (title) {
+    // 使用titleColor或默认color
+    ctx.setFillStyle(props.titleColor || color);
+    ctx.setFontSize(titleFontSize);
+    const titleLines = simpleWrapText(title, maxChars);
+    const titleLineHeight = titleFontSize * 1.2;
+    
+    for (let i = 0; i < titleLines.length; i++) {
+      ctx.fillText(titleLines[i], 0, startY + i * titleLineHeight);
+    }
+    
+    startY += titleLines.length * titleLineHeight + 5;
+  }
+  
+  // 绘制副标题（支持自动换行）
+  if (content) {
+    ctx.setFillStyle(color);
+    ctx.setFontSize(fontSize);
+    const contentLines = simpleWrapText(content, maxChars);
+    const contentLineHeight = fontSize * 1.2;
+    
+    for (let i = 0; i < contentLines.length; i++) {
+      ctx.fillText(contentLines[i], 0, startY + i * contentLineHeight);
+    }
+  }
+  
   ctx.restore();
   ctx.draw();
   // #ifdef MP-DINGTALK
@@ -632,6 +842,188 @@ async function drawImageOffScreen(
   };
 }
 
+// 绘制图片和文字（离屏）
+async function drawImageAndTextOffScreen(
+  ctx: CanvasRenderingContext2D,
+  img: HTMLImageElement,
+  image: string,
+  imageHeight: number,
+  imageWidth: number,
+  title: string,
+  content: string,
+  rotate: number,
+  contentWidth: number,
+  contentHeight: number,
+  fontSize: number,
+  titleFontSize: number,
+  fontFamily: string,
+  fontStyle: string,
+  fontWeight: string | number,
+  color: string,
+  canvas: HTMLCanvasElement,
+) {
+  ctx.translate(contentWidth / 2, contentHeight / 2);
+  ctx.rotate((Math.PI / 180) * Number(rotate));
+  img.crossOrigin = "anonymous";
+  img.referrerPolicy = "no-referrer";
+  
+  const imgHeight = imageHeight * pixelRatio.value;
+  const imgWidth = imageWidth * pixelRatio.value;
+  
+  img.src = image;
+  img.onload = () => {
+    // 计算总高度
+    let totalHeight = imgHeight;
+    const textSpacing = 10;
+    
+    if (title) totalHeight += textSpacing + titleFontSize;
+    if (content) totalHeight += fontSize;
+    
+    // 起始Y坐标
+    let startY = -totalHeight / 2;
+    
+    // 绘制图片
+    ctx.drawImage(
+      img,
+      -imgWidth / 2,
+      startY,
+      imgWidth,
+      imgHeight,
+    );
+    
+    startY += imgHeight + textSpacing;
+    
+    // 设置文字样式
+    ctx.textBaseline = "top";
+    ctx.textAlign = "center";
+    
+    // 绘制主标题
+    if (title) {
+      ctx.font = `${fontStyle} normal ${fontWeight} ${titleFontSize}px/${contentHeight}px ${fontFamily}`;
+      // 使用titleColor或默认color
+      ctx.fillStyle = props.titleColor || color;
+      const titleLines = wrapText(ctx, title, contentWidth * 0.9, titleFontSize);
+      const titleLineHeight = titleFontSize * 1.2;
+      
+      for (let i = 0; i < titleLines.length; i++) {
+        ctx.fillText(titleLines[i], 0, startY + i * titleLineHeight);
+      }
+      
+      startY += titleLines.length * titleLineHeight + 5;
+    }
+    
+    // 绘制副标题
+    if (content) {
+      ctx.font = `${fontStyle} normal ${fontWeight} ${fontSize}px/${contentHeight}px ${fontFamily}`;
+      ctx.fillStyle = color;
+      const contentLines = wrapText(ctx, content, contentWidth * 0.9, fontSize);
+      const contentLineHeight = fontSize * 1.2;
+      
+      for (let i = 0; i < contentLines.length; i++) {
+        ctx.fillText(contentLines[i], 0, startY + i * contentLineHeight);
+      }
+    }
+    
+    ctx.restore();
+    waterMarkUrl.value = canvas.toDataURL();
+  };
+}
+
+// 绘制图片和文字（在屏）
+function drawImageAndTextOnScreen(
+  ctx: UniApp.CanvasContext,
+  image: string,
+  imageHeight: number,
+  imageWidth: number,
+  title: string,
+  content: string,
+  rotate: number,
+  contentWidth: number,
+  contentHeight: number,
+  fontSize: number,
+  titleFontSize: number,
+  color: string
+) {
+  ctx.setTextBaseline("top");
+  ctx.setTextAlign("center");
+  ctx.translate(contentWidth / 2, contentWidth / 2);
+  ctx.rotate((Math.PI / 180) * Number(rotate));
+  
+  const imgHeight = imageHeight * pixelRatio.value;
+  const imgWidth = imageWidth * pixelRatio.value;
+  const maxChars = Math.floor(contentWidth / (fontSize * 0.5));
+  
+  // 计算总高度
+  let totalHeight = imgHeight;
+  const textSpacing = 10;
+  
+  if (title) totalHeight += textSpacing + titleFontSize;
+  if (content) totalHeight += fontSize;
+  
+  // 起始Y坐标
+  let startY = -totalHeight / 2;
+  
+  // 绘制图片
+  ctx.drawImage(
+    image,
+    -imgWidth / 2,
+    startY,
+    imgWidth,
+    imgHeight,
+  );
+  
+  startY += imgHeight + textSpacing;
+  
+  // 绘制主标题
+  if (title) {
+    // 使用titleColor或默认color
+    ctx.setFillStyle(props.titleColor || color);
+    ctx.setFontSize(titleFontSize);
+    const titleLines = simpleWrapText(title, maxChars);
+    const titleLineHeight = titleFontSize * 1.2;
+    
+    for (let i = 0; i < titleLines.length; i++) {
+      ctx.fillText(titleLines[i], 0, startY + i * titleLineHeight);
+    }
+    
+    startY += titleLines.length * titleLineHeight + 5;
+  }
+  
+  // 绘制副标题
+  if (content) {
+    ctx.setFillStyle(color);
+    ctx.setFontSize(fontSize);
+    const contentLines = simpleWrapText(content, maxChars);
+    const contentLineHeight = fontSize * 1.2;
+    
+    for (let i = 0; i < contentLines.length; i++) {
+      ctx.fillText(contentLines[i], 0, startY + i * contentLineHeight);
+    }
+  }
+  
+  ctx.restore();
+  ctx.draw(false, () => {
+    // #ifdef MP-DINGTALK
+    // 钉钉小程序的canvasToTempFilePath接口与其他平台不一样
+    (ctx as any).toTempFilePath({
+      success(res: any) {
+        showCanvas.value = false;
+        waterMarkUrl.value = res.filePath;
+      },
+    });
+    // #endif
+    // #ifndef MP-DINGTALK
+    uni.canvasToTempFilePath({
+      canvasId: canvasId.value,
+      success: (res) => {
+        showCanvas.value = false;
+        waterMarkUrl.value = res.tempFilePath;
+      },
+    });
+    // #endif
+  });
+}
+
 /**
  * 绘制在屏图片canvas
  * @param ctx canvas上下文

package/libs/composables/useShare.ts

@@ -2,9 +2,21 @@
  * 全局分享hooks
  * */
 interface ShareConfig {
+  /**
+   * 标题名称
+   * */
   title?: string;
+  /**
+   * 页面路径
+   * */
   path?: string;
+  /**
+   * 分享朋友的封面图片
+   * */
   friendImageUrl?: string;
+  /**
+   * 分享朋友圈的封面图片
+   * */
   timelineImageUrl?: string;
 }