「Mac畅玩鸿蒙与硬件21」鸿蒙UI组件篇11 - Canvas 组件的静态进阶应用

简介: 在鸿蒙应用开发中,Canvas 组件不仅用于基础绘图,还提供了处理复杂路径和渐变效果的多种手段,帮助开发者实现精美的静态图形。本篇将介绍如何在 Canvas 中绘制复杂路径、创建渐变填充效果。

在鸿蒙应用开发中,Canvas 组件不仅用于基础绘图,还提供了处理复杂路径和渐变效果的多种手段,帮助开发者实现精美的静态图形。本篇将介绍如何在 Canvas 中绘制复杂路径、创建渐变填充效果。

Screenshot_2024-11-02T004722.png


关键词
  • Canvas 组件
  • 复杂路径绘制
  • 渐变填充

一、Canvas 的复杂路径绘制

Canvas 提供了 bezierCurveToquadraticCurveTo 等方法,允许开发者绘制复杂的贝塞尔曲线路径,并实现流畅的弧形、曲线效果。

1.1 绘制贝塞尔曲线

贝塞尔曲线适用于绘制平滑、自然的曲线路径,广泛应用于动画和复杂图形的设计中。

@Entry
@Component
struct BezierCurveExample {
   
  build() {
   
    Column() {
   
      Canvas(this.context)
        .width('100%')
        .height(500)
        .onReady(() => {
   
          this.context.strokeStyle = '#8A2BE2'; // 设置曲线颜色为紫色
          this.context.lineWidth = 3; // 设置曲线宽度

          this.context.beginPath(); // 开始新路径
          this.context.moveTo(50, 250); // 移动到起点 (50, 250)
          // 使用贝塞尔曲线方法,控制点和终点设置
          this.context.bezierCurveTo(150, 50, 350, 450, 450, 250); // 绘制贝塞尔曲线
          this.context.stroke(); // 绘制路径
        });
      Image($r('app.media.cat')) // 添加一张图片
        .width(305)
        .height(360);
    }
  }

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(); // 创建 Canvas 渲染上下文
}

效果示例:在画布上绘制一条弧形的贝塞尔曲线,颜色为紫色。

Screenshot_2024-11-02T004534.png


1.2 绘制二次曲线

二次贝塞尔曲线使用一个控制点,适合绘制较为简单的曲线。

@Entry
@Component
struct QuadraticCurveExample {
   
  build() {
   
    Column() {
   
      Canvas(this.context)
        .width('100%')
        .height(500)
        .onReady(() => {
   
          this.context.strokeStyle = '#FF1493'; // 设置曲线颜色为粉红色
          this.context.lineWidth = 3; // 设置曲线宽度

          this.context.beginPath(); // 开始新路径
          this.context.moveTo(50, 300); // 移动到起点 (50, 300)
          // 使用二次曲线方法,控制点和终点设置
          this.context.quadraticCurveTo(250, 50, 450, 300); // 绘制二次曲线
          this.context.stroke(); // 绘制路径
        });
      Image($r('app.media.cat')) // 添加一张图片
        .width(305)
        .height(360);
    }
  }

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(); // 创建 Canvas 渲染上下文
}

效果示例:在画布上绘制一条粉红色的二次曲线,呈现较为柔和的弧形。

Screenshot_2024-11-02T004600.png


二、渐变填充效果

Canvas 提供了线性渐变和径向渐变效果,可以让图形填充颜色更为丰富。通过 createLinearGradientcreateRadialGradient 方法,开发者可以轻松实现渐变效果。

2.1 线性渐变

以下代码展示了如何在 Canvas 中绘制一个具有线性渐变效果的矩形。

@Entry
@Component
struct LinearGradientExample {
   
  build() {
   
    Column() {
   
      Canvas(this.context)
        .width('100%')
        .height(500)
        .onReady(() => {
   
          const gradient = this.context.createLinearGradient(50, 50, 450, 50); // 创建线性渐变对象
          gradient.addColorStop(0, '#FF0000'); // 渐变起始色为红色
          gradient.addColorStop(1, '#0000FF'); // 渐变结束色为蓝色

          this.context.fillStyle = gradient; // 应用渐变颜色
          this.context.fillRect(50, 200, 400, 200); // 绘制矩形
        });
      Image($r('app.media.cat')) // 添加一张图片
        .width(305)
        .height(360);
    }
  }

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(); // 创建 Canvas 渲染上下文
}

效果示例:一个矩形从左至右呈现由红色到蓝色的线性渐变效果。

Screenshot_2024-11-02T004641.png


2.2 径向渐变

径向渐变可以让颜色从一个圆形区域向外扩散,适合应用于按钮背景、光晕等效果。

@Entry
@Component
struct RadialGradientExample {
   
  build() {
   
    Column() {
   
      Canvas(this.context)
        .width('100%')
        .height(500)
        .onReady(() => {
   
          const gradient = this.context.createRadialGradient(300, 300, 50, 300, 300, 200); // 创建径向渐变对象
          gradient.addColorStop(0, '#FFD700'); // 渐变中心颜色为金色
          gradient.addColorStop(1, '#FF4500'); // 渐变外围颜色为橙红色

          this.context.fillStyle = gradient; // 应用渐变颜色
          this.context.beginPath(); // 开始新路径
          this.context.arc(300, 300, 200, 0, 2 * Math.PI); // 绘制圆形填充
          this.context.fill(); // 填充圆形
        });
      Image($r('app.media.cat')) // 添加一张图片
        .width(305)
        .height(360);
    }
  }

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(); // 创建 Canvas 渲染上下文
}

效果示例:一个圆形填充的径向渐变图案,从中心向四周呈现由金色到橙红色的渐变效果。


小结

本篇介绍了鸿蒙 Canvas 组件的静态进阶应用,包括复杂路径绘制和渐变填充效果。通过这些技术,开发者可以实现更复杂和高效的静态图形展示。


下一篇预告

在下一篇中,我们将深入探讨鸿蒙 Canvas 组件的动态绘制,包括如何实现循环动画、动态进度条和旋转缩放动画。


上一篇: 「Mac畅玩鸿蒙与硬件20」鸿蒙UI组件篇10 - Canvas组件自定义绘图

下一篇: 「Mac畅玩鸿蒙与硬件22」鸿蒙UI组件篇12 - Canvas组件的动态进阶应用


作者:SoraLuna
链接:https://www.nutpi.net/thread?topicId=269
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


目录
相关文章
|
4月前
|
开发者 容器
44.[HarmonyOS NEXT RelativeContainer案例一] 掌握组件锚点布局:打造灵活精准的UI定位系统
在HarmonyOS NEXT的UI开发中,精确控制组件位置是构建复杂界面的关键。RelativeContainer作为一种强大的布局容器,通过锚点系统提供了精确定位能力,使开发者能够创建出灵活且精准的UI布局。本教程将详细讲解如何使用RelativeContainer的锚点布局功能,帮助你掌握这一核心技术。
121 4
|
4月前
|
设计模式 缓存 容器
06.HarmonyOS Next UI进阶:Text组件与视觉样式完全指南
在HarmonyOS Next应用开发中,Text组件是最基础也是最常用的UI元素之一。它不仅用于显示文本内容,还可以通过丰富的样式属性实现各种视觉效果。掌握Text组件的样式设置,是构建精美UI界面的基础技能。
179 1
|
23天前
|
Linux Go iOS开发
IDA 9.2 发布:Golang 改进、新 UI 组件、类型解析等
IDA Pro 9.2 (macOS, Linux, Windows) - 强大的反汇编程序、反编译器和多功能调试器
251 0
|
3月前
|
Web App开发 前端开发 JavaScript
Element UI框架中自定义input组件的placeholder样式。
确保这些样式在你的应用程序CSS文件中定义,且该文件已正确加载到项目中。通过以上方法,可以控制Element UI组件中input的placeholder样式,使其满足特定的设计要求。这些更改都是基于CSS伪元素进行的,因此并不会对DOM结构产生改变,保持了原有结构的简洁和高效。
320 12
|
4月前
|
移动开发 开发者
仓颉开发语言入门教程:常见UI组件介绍和一些问题踩坑
仓颉开发语言即将发布一周年,虽已有知名App应用,但教程稀缺且官网文档不够完善。幽蓝君推出系列教程,从零开始系统讲解移动开发。本期介绍常用UI组件:按钮、文本、图片、输入框与搜索框的使用方法及注意事项,帮助开发者快速上手仓颉语言。
|
8月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
396 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
8月前
|
JavaScript 数据安全/隐私保护
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库,包含丰富的 UI 组件和常用工具函数,并且持续不断维护更新中。另外,组件库全量使用 TypeScript,支持自动按需引入和 Tree Shaking 等,能够显著提升开发效率,降低开发成本。
476 5
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
|
8月前
|
人工智能 自然语言处理 前端开发
Flame:开源AI设计图转代码模型!生成React组件,精准还原UI+动态交互效果
Flame 是一款开源的多模态 AI 模型,能够将 UI 设计图转换为高质量的现代前端代码,支持 React 等主流框架,具备动态交互、组件化开发等功能,显著提升前端开发效率。
879 1
|
7月前
|
安全 API 开发者
深入探索ArkUI中的@LocalBuilder装饰器:构建高效可维护的UI组件
在ArkUI框架中,组件化开发至关重要。@LocalBuilder作为自API version 12引入的装饰器,专注于组件内部私有构建,确保封装性与安全性。本文解析其工作原理、参数传递机制及与@Builder的区别,结合典型场景代码示例,助开发者掌握这一工具。通过状态驱动UI更新、复杂组件组合等实践,优化性能并提升代码可维护性,推动高效UI架构构建。
169 0
HarmonyOS实战—组件的外边距和内边距
HarmonyOS实战—组件的外边距和内边距
484 1
HarmonyOS实战—组件的外边距和内边距