HarmonyOS 鸿蒙Next：除了自己数学计算角度，有什么简单方法实现矩形左上到右下颜色渐变（非45°）？

发布于 1周前 作者 yibo5220 来自 鸿蒙OS

HarmonyOS 鸿蒙Next：除了自己数学计算角度，有什么简单方法实现矩形左上到右下颜色渐变（非45°）？

我现在做的项目中，美工给了很多从左上到右下角以及其他方向背景颜色的渐变。我阅读了下相关文档，发现好像只有传入角度才能实现这个效果。安卓中可以直接传入控件（view）实现，IOS中可以通过输入start=（0，0），end=（1，1）实现左上到右下渐变，那鸿蒙中该怎么简单实现？

遇到的难点：

1.没办法通过函数获取组件的长宽，从而计算角度

2.没有像另外两个系统一样提供简单的方法调用，要我自己实现角度的计算，弧度角度计算很繁琐

Harmonyos Next教程
5 回复

cke_120.png

class Point {
  x: number = 0
  y: number = 0
}

@Entry
@Component
struct Page43 {
//输入start=（0，0），end=（1，1）实现左上到右下渐变
private calculateGradientAngle(start: Point, end: Point): number {
// 计算两点之间的向量
const dx = end.x - start.x;
const dy = end.y - start.y;


<span class="hljs-comment"><span class="hljs-comment">// 使用 Math.atan2(dy, dx) 计算角度</span></span>
<span class="hljs-comment"><span class="hljs-comment">// Math.atan2 返回的是弧度值，需要转换为角度</span></span>
<span class="hljs-keyword"><span class="hljs-keyword">const</span></span> radian = <span class="hljs-built_in"><span class="hljs-built_in">Math</span></span>.atan2(dy, dx);
<span class="hljs-keyword"><span class="hljs-keyword">const</span></span> degree = radian * (<span class="hljs-number"><span class="hljs-number">180</span></span> / <span class="hljs-built_in"><span class="hljs-built_in">Math</span></span>.PI);

console.info(`degree:${degree}`)
<span class="hljs-comment"><span class="hljs-comment">// 根据实际情况调整角度</span></span>
<span class="hljs-comment"><span class="hljs-comment">// 从左上角到右下角的角度通常是 45 度</span></span>
<span class="hljs-keyword"><span class="hljs-keyword">return</span></span> (<span class="hljs-number"><span class="hljs-number">90</span></span> + degree) % <span class="hljs-number"><span class="hljs-number">360</span></span>;

}


build() {
Column() {
Text(‘哈哈’)
.width(300)
.height(200)
.textAlign(TextAlign.Center)
.linearGradient({
angle: this.calculateGradientAngle({ x: 0, y: 0 }, { x: 1, y: 1 }),
colors: [[0xffffff, 0.0], [0xfc613a, 1.0]]
})
}
.height(‘100%’)
.width(‘100%’)
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

感觉鸿蒙应该内置一个方法，毕竟安卓和ios都能一两行解决

无效回复

在HarmonyOS鸿蒙Next中，实现矩形左上到右下颜色渐变（非45°），可通过linearGradient属性设置渐变方向和颜色。直接设置linearGradient的angle属性为非45°的值（如0°至360°中的任意值，具体取决于渐变效果需求），并指定渐变颜色及其位置。确保渐变颜色的位置与预期渐变方向相符。

示例代码片段（非完整代码）：

.linearGradient({
    angle: 225, // 设置为225°实现左上到右下的渐变
    colors: [[Color.Red, 0.0], [Color.Blue, 1.0]]
})

这段代码会在组件上创建一个从左上角到右下角的颜色渐变效果，角度为225°。如果问题依旧没法解决请加我微信，我的微信是itying888。

回到顶部