边缘透明度渐变怎么做？（HarmonyOS 鸿蒙Next）

边缘透明度渐变怎么做？（HarmonyOS 鸿蒙Next） 有人知道这种边缘透明度渐变怎么做吗，我这个背景白色显示正常，但换了背景色的话，这块还是白色模糊，就显得很突兀

cke_122.png


更多关于边缘透明度渐变怎么做？（HarmonyOS 鸿蒙Next）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

// xxx.ets @Entry @Component struct ImageExample1 { private_resource1: Resource = $r(‘app.media.1’) @State image_src: Resource = this.private_resource1

build() { Column() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) { Row({ space: 5 }) { Image(this.image_src) .objectFit(ImageFit.Contain) .width(‘100%’) .height(200) .linearGradientBlur( 100, { fractionStops: [[0, 0], [0, 0.33], [0.66, 0.66], [1, 1]], direction: GradientDirection.Left } ) } } } } }

楼下的方式，推荐参考下试试：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-image-effect#示例2设置组件线性渐变模糊效果

更多关于边缘透明度渐变怎么做？（HarmonyOS 鸿蒙Next）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


老哥，你为什么要这样重新赋值一下，

文档示例代码，复制下来，没注意看，可以不用重新赋值，

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-image-effect# 示例2设置组件线性渐变模糊效果

这个api看是否满足

在HarmonyOS鸿蒙Next中，实现边缘透明度渐变可以通过Canvas和Paint来实现。具体步骤如下：

  1. 创建Canvas和Paint对象：
const canvas = new Canvas();
const paint = new Paint();
  1. 设置渐变颜色：

使用LinearGradient或RadialGradient来定义渐变效果。对于边缘透明度渐变，通常使用LinearGradient。

const colors = [0xFFFFFFFF, 0x00FFFFFF]; // 从白色到透明
const positions = [0.0, 1.0]; // 渐变位置
const linearGradient = new LinearGradient(0, 0, width, 0, colors, positions, Shader.TileMode.CLAMP);
paint.setShader(linearGradient);
  1. 绘制渐变：

使用Canvas的drawRect方法来绘制矩形，应用渐变效果。

canvas.drawRect(0, 0, width, height, paint);
  1. 应用到UI组件：

将绘制好的渐变效果应用到UI组件中，如Image或View。

通过以上步骤，你可以在HarmonyOS鸿蒙Next中实现边缘透明度渐变效果。

回到顶部