hy-app 0.4.10 → 0.4.12

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: "",
@@ -205,6 +220,7 @@ function doInit() {
     image,
     imageHeight,
     imageWidth,
+    title
   } = props;
 
   // 创建水印
@@ -223,6 +239,7 @@ function doInit() {
     image,
     imageHeight,
     imageWidth,
+    title
   );
 }
 
@@ -242,6 +259,7 @@ function doInit() {
  * @param image canvas图片
  * @param imageHeight canvas图片高度
  * @param imageWidth canvas图片宽度
+ * @param title 标题
  */
 function createWaterMark(
   width: number,
@@ -258,12 +276,16 @@ function createWaterMark(
   image: string,
   imageHeight: number,
   imageWidth: number,
+  title: string,
 ) {
   const canvasHeight = (height + gutterY) * pixelRatio.value;
   const canvasWidth = (width + gutterX) * pixelRatio.value;
   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 +303,8 @@ function createWaterMark(
       image,
       imageHeight,
       imageWidth,
+      title,
+      titleFontSize
     );
   } else {
     createCanvas(
@@ -293,6 +317,8 @@ function createWaterMark(
       image,
       imageHeight,
       imageWidth,
+      title,
+      titleFontSize
     );
   }
   // #endif
@@ -312,6 +338,8 @@ function createWaterMark(
     image,
     imageHeight,
     imageWidth,
+    title,
+    titleFontSize
   );
   // #endif
 }
@@ -348,6 +376,8 @@ function createOffscreenCanvas(
   image: string,
   imageHeight: number,
   imageWidth: number,
+  title: string,
+  titleFontSize: number
 ) {
   // 创建离屏canvas
   const canvas: any = uni.createOffscreenCanvas({
@@ -357,7 +387,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 +425,7 @@ function createOffscreenCanvas(
     } else {
       drawTextOffScreen(
         ctx,
-        content,
+        title,
         contentWidth,
         contentHeight,
         rotate,
@@ -383,6 +435,8 @@ function createOffscreenCanvas(
         fontWeight,
         color,
         canvas,
+        content,
+        titleFontSize
       );
     }
   } else {
@@ -413,10 +467,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 +499,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 +538,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 +584,7 @@ function createH5Canvas(
     } else {
       drawTextOffScreen(
         ctx,
-        content,
+        title,
         contentWidth,
         contentHeight,
         rotate,
@@ -498,6 +594,8 @@ function createH5Canvas(
         fontWeight,
         color,
         canvas,
+        content,
+        titleFontSize
       );
     }
   } else {
@@ -519,9 +617,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 +652,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 +709,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 +846,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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hy-app",
-  "version": "0.4.10",
-  "description": "fix: 二维码异步显示不加载问题",
+  "version": "0.4.12",
+  "description": "fix: 卡片副标题",
   "main": "./index.ts",
   "private": false,
   "scripts": {},