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

SoraLuna
发布于 2024-11-28 20:02
浏览
1收藏

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

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


关键词
  • 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 渲染上下文
}

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

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


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 渲染上下文
}

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

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


二、渐变填充效果

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 渲染上下文
}

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

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


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
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2024-11-28 20:05:17修改
1
收藏 1
回复
举报
回复
    相关推荐