鸿蒙Next如何在图片中间增加logo

在鸿蒙Next系统中，如何在图片的中间位置添加一个logo？需要具体的操作步骤或者代码示例。

2 回复

在鸿蒙Next中，给图片中间加Logo？简单！用Image组件嵌套Image组件，外层放背景图，内层放Logo，再用position和align属性把Logo精准定位到中间。代码三行搞定，比P图还快！

更多关于鸿蒙Next如何在图片中间增加logo的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，您可以使用Canvas组件在图片中间绘制Logo。以下是实现步骤和示例代码：

步骤说明

  1. 准备资源：确保Logo图片（如PNG格式）已放入项目的resources目录中。
  2. 使用Canvas组件：通过Canvas的绘图上下文在图片上绘制Logo。
  3. 计算位置：根据图片和Logo的尺寸，计算Logo居中位置。

示例代码

import { CanvasRenderingContext2D } from '@ohos.graphics';

// 假设背景图片和Logo已加载
// 获取Canvas上下文
const ctx: CanvasRenderingContext2D = canvas.getContext('2d');

// 绘制原始图片（假设图片尺寸为400x300）
ctx.drawImage(backgroundImage, 0, 0, 400, 300);

// Logo尺寸（假设为80x60）
const logoWidth = 80;
const logoHeight = 60;

// 计算居中位置
const x = (400 - logoWidth) / 2;  // 水平居中
const y = (300 - logoHeight) / 2; // 垂直居中

// 绘制Logo
ctx.drawImage(logoImage, x, y, logoWidth, logoHeight);

完整组件示例

// 在ArkTS组件中使用
@Component
struct ImageWithLogo {
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private ctx: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);

  build() {
    Column() {
      Canvas(this.ctx)
        .width(400)
        .height(300)
        .onReady(() => {
          // 绘制背景图片
          this.ctx.drawImage($r('app.media.background'), 0, 0, 400, 300);
          
          // 绘制居中Logo
          const logoWidth = 80;
          const logoHeight = 60;
          const x = (400 - logoWidth) / 2;
          const y = (300 - logoHeight) / 2;
          this.ctx.drawImage($r('app.media.logo'), x, y, logoWidth, logoHeight);
        })
    }
  }
}

注意事项

  • 替换$r('app.media.xxx')为您的实际资源路径。
  • 如果图片需要动态加载，请使用Image组件配合onComplete回调获取尺寸。
  • 可通过调整logoWidth和logoHeight控制Logo大小。

此方法直接在画布上合成图片，适用于静态图片处理。如需动态效果，可结合动画组件实现。

回到顶部