【HarmonyOS】鸿蒙仿iOS线性渐变实现

news2024/9/27 9:16:23

【HarmonyOS】仿照IOS中可以通过输入start=(0,0),end=(1,1)获取角度到.linearGradient,从而实现左上到右下渐变

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


@Entry
@Component
struct Page57 {
  @State message: string = 'Hello World';

  //输入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;

    // 使用 Math.atan2(dy, dx) 计算角度
    // Math.atan2 返回的是弧度值,需要转换为角度
    const radian = Math.atan2(dy, dx);
    const degree = radian * (180 / Math.PI);

    console.info(`degree:${degree}`)
    // 根据实际情况调整角度
    // 从左上角到右下角的角度通常是 45 度
    return (90 + degree) % 360;
  }

  build() {
    Column() {
      Text('背景渐变')
      Row() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        //.blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)
      }.linearGradient({
        angle: this.calculateGradientAngle({ x: 0, y: 0 }, { x: 1, y: 1 }),
        colors: [[0xff0000, 0.0], [0x0000ff, 1.0]]
      }) //.blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
      Text('文字渐变')
      Row() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)
      }.linearGradient({
        angle: this.calculateGradientAngle({ x: 0, y: 0 }, { x: 1, y: 1 }),
        colors: [[0xff0000, 0.0], [0x0000ff, 1.0]]
      }).blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
    }
    .width('100%')
    .height('100%')
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2169553.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

开源链动 2+1 模式 S2B2C 商城小程序:激活 KOC,开启商业新征程

摘要:本文深入探讨了 KOC 在立体连接中的重要性,以及如何通过开源链动 21 模式 S2B2C 商城小程序发现和找到更多的 KOC。强调了历史积累强关系和快速强化强关系的方法,并阐述了该商城小程序在推动商业发展中的关键作用。 一、引言 在当今竞争…

mysql 内存被打满记录

一:早上收到报警:提示:您的云数据库RDS的1个实例因存储空间满将被锁定,请关注实例的存储空间使用情况,可通过存储扩容或空间清理解除锁定。后续查看错误日志如下:磁盘没有空间了 没有多余的空间写binlog和…

2024年下安徽省事业编考试报名流程(电脑)

2024年下安徽省事业编考试报名流程(电脑)

极狐GitLab 17.4 升级指南

GitLab 是一个全球知名的一体化 DevOps 平台,很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab https://dl.gitlab.cn/6y2wxugm 是 GitLab 在中国的发行版,专门为中国程序员服务。可以一键式部署极狐GitLab。 本文分享极狐GitLab 17.4 升级…

【JVM】垃圾释放方式:标记-清除、复制算法、标记-整理、分代回收

文章目录 1. 标记-清除2. 复制算法4. 标记-整理4. 分代回收 把标记为垃圾的对象的内存空间进行释放。主要有三种释放方式 1. 标记-清除 把标记为垃圾的对象,直接释放掉(最朴素的做法) 此时就是把标记为垃圾的对象所对应的内存空间直接释放。…

【机器学习】探索LSTM:深度学习领域的强大时间序列处理能力

目录 🍔 LSTM介绍 🍔 LSTM的内部结构图 2.1 LSTM结构分析 2.2 Bi-LSTM介绍 2.3 使用Pytorch构建LSTM模型 2.4 LSTM优缺点 🍔 小结 学习目标 🍀 了解LSTM内部结构及计算公式. 🍀 掌握Pytorch中LSTM工具的使用. &…

反光柱定位算法-雷达强度数据包

反光柱定位算法-雷达强度数据包 反光柱定位算法-雷达强度数据包 作者: 苏凯 系统环境: 系统:ubuntu20.04 ros1版本: noetic 雷达: sick TM581 强度值标定文件: scanIntensities.txt 部署在环境中的反光柱数据…

类和对象(2)

文章目录 🎯引言👓类和对象(2)1.类的默认成员函数2.构造函数2.1构造函数概念 3.析构函数3.1. **析构函数的定义**3.2. **析构函数的特点** 4.拷贝构造函数4.1. **拷贝构造函数的定义** 5.赋值运算符重载5.1运算符重载5.2赋值运算符重载5.3日期类的实现 &…

smtp-server: 535 Error: authentication faile

问题描述: 在linux服务器上使用 mailx发送邮件时提示:smtp-server: 535 Error: authentication faile 原因:没有配置授权码或者授权码不正确 解决办法:配置授权码(以网易邮箱为例) 1. 进入网易邮箱网页版,打开 POP…

数据中心里全速运行的处理器正在浪费能源

数据中心是耗电大户,运营商一直在努力解决的一个关键问题是如何减少能源和资源消耗。人们已经找到了一些巧妙的解决方案,例如使用非饮用水来冷却设备,但一个显而易见的解决方案似乎被忽略了:启用处理器的各种省电功能。 随着需求的…

进程概念以及进程相关函数的使用

1.进程相关概念 1.1 程序和进程 程序,是指编译好的二进制文件,在磁盘上,不占用系统资源(cpu、内存、打开的文件、设备、锁....) 进程,是一个抽象的概念,与操作系统原理联系紧密。进程是活跃的程序,占用系…

Qt-QGroupBox容器类控件(39)

目录 容器类控件 描述 属性 使用 容器类控件 描述 这个是用来分组的,即把控件分组 使⽤ QGroupBox 实现⼀个带有标题的分组框.可以把其他的控件放到⾥⾯作为⼀组.这样看起来能更好看⼀点 属性 title分组框的标题alignment分组框内部内容的对⻬⽅式flat是否是…

微服务nacos解析部署使用全流程

1、什么是Spring Cloud Spring Cloud是一系列框架的集合。它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册、配置中心、消息总线、负载均衡、断路器、数据监控等,都可以用Spring Boot的开发风格做到一键启动和部署。…

stm32入门——GPIO输入输出(1)基础理解

最近比较想上进,又不知道要干什么,就来水几篇博客欺骗一下自己。 GPIO全称是:General Purpose Input / Output ,是stm32用于控制输入和输出信号的通用接口。我们用的MCU都有这玩意,比如STM32F103C8T6上有 GPIOA,GPIOB&…

算法葫芦书(笔试面试)

一、特征工程 1.特征归一化:所有特征统一到一个区间内 线性函数归一化(0到1区间)、零均值归一化(均值0,标准差1) 2.类比型特征->数值性特征 序号编码、独热编码、二进制编码(010&#xf…

prd文档编写(to b)

如何编写产品需求文档(PRD) | 人人都是产品经理 (woshipm.com) 一.prd文档编写得目的 PRD文档最为重要的目的就是:协调各个相关角色 PRD就是提高效率的,把各个角色的共识全部写出来,大家都已PRD为最终的工作指导文档…

2:数据结构:列表与元组

目录 2.1 列表的创建与操作 2.1.1 列表的创建 2.1.2 列表的常用操作 2.1.3 列表切片操作 2.2 元组的特点与用法 2.2.1 元组的创建 2.2.2 元组与列表的区别 2.2.3 元组的常用操作 2.3 示例代码与练习 2.3.1 示例代码:列表与元组的基本操作 2.3.2 练习题 文…

ICM20948 DMP代码详解(46)

接前一篇文章:ICM20948 DMP代码详解(45) 上一回讲到了inv_icm20948_setup_compass_akm函数中的以下代码片段: /* Set compass in power down through I2C SLV for compass */result inv_icm20948_execute_write_secondary(s, COM…

网口为什么叫RJ45接口,名字的由来?

大家有没有注意到很多地方“网口”都被称作“RJ45”接口。但是,您是否曾经好奇过,这个小小的插孔为何被称为“RJ-45”?这个名字背后又有着怎样的故事呢? RJ-45的全称与定义 首先,我们需要了解“RJ-45”的全称是“Regi…

jetlinks物联网平台学习3:mqtt协议及物模型

mqtt协议及物模型 1、创建产品2、配备设备接入方式3、上传消息协议4、填写网关信息5、配置mqtt认证信息6、配置物模型7、创建设备8、使用MQTT X模拟设备接入9、mqttx实现设备->平台 平台->设备 消息发送9.1、属性上报9.2、获取最新属性值(读取属性&#xff09…