HarmonyOS鸿蒙Next中问一下一张图片怎么叠加一层颜色渐变效果？

HarmonyOS鸿蒙Next中问一下一张图片怎么叠加一层颜色渐变效果？ 问一下一张图片怎么叠加一层颜色渐变效果？

3 回复

可以使用linearGradient属性添加背景色，文档可参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-gradient-color-V5#lineargradient

代码如下，验证一下是否符合你的要求

Stack() {
  Image($r('app.media.media_full_screen_preview1'))
    .width(100)
    .height(100)
  Row() {}
    .width(100)
    .height(100)
    .opacity(0.8)
    .linearGradient({
      angle: 90,
      colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
    })
}

createLinearGradient可以通过修改起始点（x0，y0）的位置来调整角度，但是没有linearGradient设置的方便。

import { resourceManager } from '[@kit](/user/kit).LocalizationKit'
import { image } from '[@kit](/user/kit).ImageKit'

[@Entry](/user/Entry)
[@Component](/user/Component)
export struct GetImageData {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  async drawImage() {
    const resourceMgr: resourceManager.ResourceManager = getContext(this).resourceManager
    const fileData: Uint8Array = await resourceMgr.getMediaContent($r('app.media.app_icon'))
    const buffer = fileData.buffer
    const imageSource: image.ImageSource = image.createImageSource(buffer)
    const pixelMap: image.PixelMap = await imageSource.createPixelMap()

    pixelMap.getImageInfo().then(info => {
      // 设置图片
      this.context.drawImage(pixelMap, 0, 0, 100, 100, 0, 0, 100, 100)
      // 设置渐变
      let grad = this.context.createLinearGradient(0, 100, 100, 100)
      grad.addColorStop(0.0, '#ff0000')
      grad.addColorStop(0.6, '#ffffff')
      grad.addColorStop(1.0, '#00ff00')
      this.context.fillStyle = grad
      this.context.fillRect(0, 0, 100, 100)
    })
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Pink)
        .onReady(() => {
          this.drawImage()
        })
    }
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中问一下一张图片怎么叠加一层颜色渐变效果？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，可以通过使用Drawing模块来实现图片叠加颜色渐变效果。首先，使用Image组件加载图片，然后通过Canvas绘制渐变层。可以使用LinearGradient或RadialGradient来定义渐变颜色，并通过CanvasRenderingContext2D的fillRect方法将渐变层绘制在图片上。具体步骤如下：

  1. 创建Image对象并加载图片。
  2. 创建Canvas对象，并设置其大小与图片一致。
  3. 使用CanvasRenderingContext2D的drawImage方法将图片绘制到Canvas上。
  4. 使用LinearGradient或RadialGradient创建渐变对象，并设置渐变颜色和方向。
  5. 使用CanvasRenderingContext2D的fillRect方法将渐变层绘制在图片上。
  6. 最后，将Canvas的内容渲染到屏幕上。

以下是一个简化的代码示例：

// 创建Image对象并加载图片
let img = new Image();
img.src = 'image.png';
img.onload = function() {
    // 创建Canvas对象
    let canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    let ctx = canvas.getContext('2d');

    // 绘制图片
    ctx.drawImage(img, 0, 0);

    // 创建线性渐变
    let gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
    gradient.addColorStop(0, 'rgba(255, 0, 0, 0.5)'); // 红色渐变
    gradient.addColorStop(1, 'rgba(0, 0, 255, 0.5)'); // 蓝色渐变

    // 绘制渐变层
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 将Canvas内容渲染到屏幕上
    document.body.appendChild(canvas);
};

通过以上步骤，可以在HarmonyOS鸿蒙Next中实现图片叠加颜色渐变效果。

在HarmonyOS鸿蒙Next中，可以通过Canvas组件和Paint类实现图片的渐变叠加。首先，使用Image组件加载图片，然后创建Canvas对象，并为其设置渐变Shader（如LinearGradient）。最后，通过Paint类将渐变绘制到图片上。具体代码示例如下：

Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();
LinearGradient gradient = new LinearGradient(0, 0, width, height, startColor, endColor, Shader.TileMode.CLAMP);
paint.setShader(gradient);
canvas.drawBitmap(bitmap, 0, 0, paint);

通过这种方式，你可以在图片上叠加一层颜色渐变效果。

回到顶部