HarmonyOS 鸿蒙Next中图片添加水印

HarmonyOS 鸿蒙Next中图片添加水印 图片添加文本水印时，文本过长换行应该如何处理

3 回复

可以通过measureText确定文本的宽度，如果文本的宽度超过了Canvas的宽度，就需要考虑换行。通过循环和条件判断来决定何时换行。如果文本的一部分超出Canvas宽度，通过measureText获取的高度，计算换行后绘制的位置 参考代码如下：

export function addWatermark(
  imagePixelMap: ImagePixelMap,
  text: string = 'watermark',
  drawWatermark?: (OffscreenContext: OffscreenCanvasRenderingContext2D) => void
): image.PixelMap {
  const height = px2vp(imagePixelMap.height);
  const width = px2vp(imagePixelMap.width);
  const offScreenCanvas = new OffscreenCanvas(width, height);
  const offScreenContext = offScreenCanvas.getContext('2d');
  offScreenContext.drawImage(imagePixelMap.pixelMap, 0, 0, width, height);
  if (drawWatermark) {
    drawWatermark(offScreenContext);
  } else {
    // const imageScale = width / px2vp(display.getDefaultDisplaySync().width);
    // offScreenContext.fillStyle = '#A2FFFFFF';
    // offScreenContext.font = 12 * imageScale + 'vp';
    // const padding = 5 * imageScale;
    // offScreenContext.fillText(text, width - padding, height - padding);
    offScreenContext.textAlign = 'right';
    offScreenContext.font = '20vp sansserif';
    let currentX = width;
    let currentY = height;
    let line: string = '';
    let chars: Array<string> = text.split('');
    for (let char of chars) {
      // 如果添加下一个字符会超出最大宽度，则换行
      if (offScreenContext.measureText(line + char)
        .width > (width - 10)) {
        // 设置绘制文本颜色
        offScreenContext.fillStyle = 'rgba(224, 30, 152, 0.92)'
        // 绘制文本，通过currentY控制行列
        offScreenContext.fillText(line, currentX, currentY);
        // 计算下一行文字绘制位置
        currentY -= offScreenContext.measureText(line + char).height;
        // 重新开始新行
        line = char;
      } else {
        line += char;
      }
    }
    // 绘制最后一行
    offScreenContext.fillText(line, currentX, currentY);
  }
  return offScreenContext.getPixelMap(0, 0, width, height);
}

更多关于HarmonyOS 鸿蒙Next中图片添加水印的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，可通过PixelMap和Image组件实现图片水印。使用@ohos.multimedia.image库获取源图片PixelMap，创建水印文字或图像的PixelMap对象。通过Canvas或直接绘制方式将水印PixelMap叠加到原图指定位置，最后通过imagePacker打包生成带水印的图片文件。支持透明度、旋转角度和位置参数配置。

在HarmonyOS Next中处理文本水印换行时，建议使用TextLayout组件进行文本布局计算，通过maxLines和overflow属性控制文本显示。若需自动换行，可结合TextMetrics.measureText()获取文本宽度，并与容器宽度比较，动态插入换行符。示例代码：

import textMetrics from '@ohos.text.textMetrics';

// 测量文本宽度并处理换行
function wrapText(context: CanvasRenderingContext2D, text: string, maxWidth: number): string {
  const words = text.split(' ');
  let line = '';
  let result = '';

  for (let word of words) {
    const testLine = line + word + ' ';
    const metrics = textMetrics.measureText(context, testLine);
    if (metrics.width > maxWidth && line !== '') {
      result += line + '\n';
      line = word + ' ';
    } else {
      line = testLine;
    }
  }
  result += line;
  return result;
}

通过动态计算文本宽度实现自动换行，确保水印文本适配容器边界。

回到顶部