HarmonyOS APP实战指南:画图APP之画笔属性调节

更新时间：2026年07月13日 10:08:51 作者：不羁的木木

本篇教你用颜色选择器、粗细滑块和透明度滑块,实时调节画笔效果,告别单调黑线,从预设色板轻松选色,滑动控制笔触粗细与透明度,跟着步骤集成PenSettings属性管理器,让每笔绘画都自定义,实现灵活涂鸦体验

1. 开篇

上一篇我们实现了触摸手绘功能，核心产出了 PenManager 模块和 PaintComponent 页面。PenManager 通过 touchEvent 回调收集触摸点，构建 Path 对象，再利用 CanvasRenderingContext2D.drawPath() 将其绘制到画布上。读者跟随步骤，已经可以让手指在屏幕上自由涂鸦了。

然而手绘功能还有一个关键短板：绘制出的线条颜色固定为黑色、粗细固定为3px、透明度固定为100%。这样的笔触过于单调，无法满足实际绘画需求。本篇将聚焦于画笔属性调节，通过颜色选择器、粗细滑块和透明度滑块三个UI组件，让用户能够实时调整画笔效果。我们将把这些属性绑定到 Pen 对象上，确保每次绘制都使用最新的参数。

2. 核心实现

实现画笔属性调节需要三个步骤：首先，创建一个画笔属性配置管理器 PenSettings，用于存储和更新颜色、粗细、透明度；其次，设计颜色选择器 ColorPicker 组件，让用户可以从预设色板中选色；最后，实现粗细和透明度的滑块组件 Slider。所有修改都会立即反应在下一笔绘制中。

2.1 基础配置：导入模块与状态管理

在画图APP中，我们需要导入 @ohos.graphics.drawing 模块中的 Pen 类，以及状态管理接口用于跨组件通信。

// utils/PenSettings.ets
// 画笔属性管理器，采用单例模式，全局共享同一份配置
import { Pen } from '@ohos.graphics.drawing';
class PenSettings {
  private static instance: PenSettings = new PenSettings();
  // 当前选中的颜色，十六进制格式，默认黑色
  public currentColor: string = '#FF000000';
  // 当前画笔粗细，单位px，默认3
  public currentWidth: number = 3;
  // 当前透明度，范围0-255，默认255（完全不透明）
  public currentAlpha: number = 255;
  private constructor() { }
  static getInstance(): PenSettings {
    return PenSettings.instance;
  }
  // 应用当前设置到传入的Pen对象
  applyToPen(pen: Pen): void {
    // 解析颜色字符串为整数，例如'#FF0000' -> 0xFF0000
    const colorInt = parseInt(this.currentColor.substring(1), 16);
    // 透明度与颜色合并，完成ARGB组合
    const argbColor = (this.currentAlpha << 24) | (colorInt & 0x00FFFFFF);
    pen.setColor(argbColor);
    pen.setStrokeWidth(this.currentWidth);
    pen.setAlpha(this.currentAlpha);
  }
  // 更新颜色，并触发画布重绘（通过回调）
  setColor(color: string): void {
    this.currentColor = color;
    this.onSettingsChanged?.();
  }
  setWidth(width: number): void {
    this.currentWidth = width;
    this.onSettingsChanged?.();
  }
  setAlpha(alpha: number): void {
    this.currentAlpha = alpha;
    this.onSettingsChanged?.();
  }
  // 设置变更回调，用于通知画布重新绘制
  onSettingsChanged: (() => void) | null = null;
}
export default PenSettings;

关键点说明：

使用单例模式确保整个APP共享同一份画笔配置，避免重复创建。
applyToPen 方法接收一个 Pen 实例，将当前颜色、粗细、透明度一次性应用到该笔上。颜色处理时需要注意透明度要与颜色值合并为ARGB格式。
setColor 等方法通过回调机制通知外部（如画布组件）重新绘制，这样才能在调整滑块后立即看到预览效果。
API参考自 @ohos.graphics.drawing.Pen，其中 setColor / setStrokeWidth / setAlpha 是官方提供的标准方法。

2.2 色彩选择组件 ColorPicker

ColorPicker 组件提供一个预设颜色网格，用户点击某个色块后，更新 PenSettings 中的颜色值。

// components/ColorPicker.ets
// 颜色选择器组件，展示预设色板供用户点击选择
import PenSettings from '../utils/PenSettings';
@Component
export struct ColorPicker {
  @State private selectedColor: string = '#FF000000';
  // 预设颜色数组，涵盖常见绘画色彩
  private colors: string[] = [
    '#FF000000', '#FFFFFFFF', '#FFFF0000', '#FF00FF00',
    '#FF0000FF', '#FFFFFF00', '#FFFF00FF', '#FF00FFFF',
    '#FF808080', '#FFC0C0C0', '#FF800000', '#FF008000',
    '#FF000080', '#FF808000', '#FF800080', '#FF008080',
    '#FFE0B0FF', '#FFFFC0CB', '#FFA52A2A', '#FF000000'
  ];
  build() {
    Column() {
      // 标题
      Text('颜色选择')
        .fontSize(14)
        .fontWeight(FontWeight.Bold)
        .width('100%')
        .textAlign(TextAlign.Start)
        .margin({ bottom: 6 });
      // 颜色网格，每行5个
      Grid() {
        ForEach(this.colors, (color: string) => {
          GridItem() {
            Stack() {
              // 色块方块
              Rect()
                .width(36)
                .height(36)
                .borderRadius(6)
                .fill(color)
                .border({
                  width: this.selectedColor === color ? 3 : 1,
                  color: this.selectedColor === color ? '#FF007AFF' : '#FFCCCCCC'
                })
                .onClick(() => {
                  this.selectedColor = color;
                  PenSettings.getInstance().setColor(color);
                });
              // 如果是当前选中颜色，显示选中标记
              if (this.selectedColor === color) {
                Text('✓')
                  .fontSize(18)
                  .fontColor('#FF007AFF')
                  .fontWeight(FontWeight.Bold);
              }
            }
            .justifyContent(FlexAlign.Center)
            .alignItems(VerticalAlign.Center)
            .width(40)
            .height(40)
          }
        })
      }
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr')
      .width('100%')
      .maxHeight(200)
      .columnsGap(8)
      .rowsGap(8)
    }
    .padding(12)
    .backgroundColor('#FFF8F8F8')
    .borderRadius(12)
  }
}

关键点说明：

颜色值采用 '#AARRGGBB' 格式，其中 AA 部分在预设颜色中固定为 FF（不透明），实际透明度由 PenSettings 中的 currentAlpha 控制。
选中颜色的色块会有蓝色边框和勾选标记，提供清晰的视觉反馈。
点击色块时调用 PenSettings.getInstance().setColor(color)，该操作会触发回调，通知画布应用新颜色。
色板只是预设颜色，后续我们可以扩展为自定义色盘，例如使用色相环选择。

2.3 粗细与透明度调节滑块 Slider

使用原生 Slider 组件，分别控制画笔粗细（1-20px）和透明度（0-255）。

// components/BrushSlider.ets
// 画笔粗细和透明度滑块组件，支持滑动调节
import PenSettings from '../utils/PenSettings';
@Component
export struct BrushSlider {
  // 当前画笔粗细
  @State private brushWidth: number = 3;
  // 当前透明度
  @State private brushAlpha: number = 255;
  build() {
    Column({ space: 16 }) {
      // 粗细调节
      Column() {
        Row() {
          Text('粗细')
            .fontSize(14)
            .fontWeight(FontWeight.Medium);
          Text(`${this.brushWidth}px`)
            .fontSize(12)
            .fontColor('#FF666666')
            .margin({ left: 8 });
        }
        .width('100%')
        .justifyContent(FlexAlign.Start);
        Slider({
          value: this.brushWidth,
          min: 1,
          max: 20,
          step: 1,
          style: SliderStyle.OutSet
        })
          .width('100%')
          .showTips(true)
          .showSteps(false)
          .onChange((value: number) => {
            this.brushWidth = value;
            PenSettings.getInstance().setWidth(value);
          });
      }
      // 透明度调节
      Column() {
        Row() {
          Text('透明度')
            .fontSize(14)
            .fontWeight(FontWeight.Medium);
          Text(`${Math.round(this.brushAlpha / 255 * 100)}%`)
            .fontSize(12)
            .fontColor('#FF666666')
            .margin({ left: 8 });
        }
        .width('100%')
        .justifyContent(FlexAlign.Start);
        Slider({
          value: this.brushAlpha,
          min: 0,
          max: 255,
          step: 1,
          style: SliderStyle.OutSet
        })
          .width('100%')
          .showTips(true)
          .showSteps(false)
          .onChange((value: number) => {
            this.brushAlpha = value;
            PenSettings.getInstance().setAlpha(value);
          });
      }
    }
    .padding(12)
    .backgroundColor('#FFF8F8F8')
    .borderRadius(12)
  }
}

关键点说明：

粗细范围设置为1-20px，步长1px，可以满足从细线到粗笔的绘画需求。
透明度范围0-255，对应0%-100%不透明，右侧显示百分比以便用户理解。
Slider 的 showTips 属性设为 true，滑动时会显示当前数值的工具提示。
每次滑动都调用 PenSettings 的 setWidth / setAlpha 方法，同时传递给其绑定的回调。

2.4 将设置组件集成到主画布页面

最后，将上述组件组合到画图APP的主页面中，并确保每次绘制时使用 PenSettings 中的最新配置。

// pages/PaintPage.ets
// 画图APP主页面，集成颜色选择器、滑块和画布区域
import PenSettings from '../utils/PenSettings';
import { ColorPicker } from '../components/ColorPicker';
import { BrushSlider } from '../components/BrushSlider';
import drawing from '@ohos.graphics.drawing';
@Entry
@Component
struct PaintPage {
  private canvasContext: CanvasRenderingContext2D;
  private settings: PenSettings = PenSettings.getInstance();
  @State private currentTool: string = 'pen'; // 'pen' | 'rect' | 'circle'
  // 当前正在使用的Pen对象
  private drawingPen: drawing.Pen = new drawing.Pen();
  aboutToAppear(): void {
    // 注册设置变更回调：每次颜色/粗细/透明度变化时，更新当前Pen
    this.settings.onSettingsChanged = () => {
      this.settings.applyToPen(this.drawingPen);
    };
    // 初始化时应用默认设置
    this.settings.applyToPen(this.drawingPen);
  }
  build() {
    Column() {
      // 顶部工具栏
      Row() {
        Button('画笔')
          .onClick(() => { this.currentTool = 'pen'; })
        Button('矩形')
          .onClick(() => { this.currentTool = 'rect'; })
        Button('圆形')
          .onClick(() => { this.currentTool = 'circle'; })
      }
      .padding(8)
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
      // 中间画布区域
      Canvas(this.canvasContext)
        .width('100%')
        .layoutWeight(1)
        .backgroundColor('#FFFFFFFF')
      // 底部设置区：颜色选择 + 粗细/透明度
      Column({ space: 12 }) {
        ColorPicker()
        BrushSlider()
      }
      .padding(8)
      .width('100%')
      .backgroundColor('#FFF0F0F0')
    }
    .width('100%')
    .height('100%')
  }
}

关键点说明：

aboutToAppear 中注册了 PenSettings 的回调 onSettingsChanged，当颜色、粗细或透明度改变时，自动调用 applyToPen 更新 this.drawingPen。
在实际绘制场景中（如触摸移动的回调），需要确保使用的是 this.drawingPen，而不是临时创建的 Pen 对象，这样才能应用最新的设置。
底部布局同时包含 ColorPicker 和 BrushSlider，用户可以在绘画过程中随时调整参数。

3. 运行验证

完成上述代码后，运行APP，应观察到以下效果：

底部出现颜色选择器网格，默认选中第一个黑色色块。点击其他颜色（如红色 #FFFF0000），画布的下一笔线条会变为红色。
粗细滑块滑动时，数值显示从1px到20px，释放后下一笔线条会使用新粗细。
透明度滑块从0%到100%，滑动时工具提示显示百分比，笔画会呈现不同程度的半透明效果。
所有调节即时生效，不需要重启或重新初始化画布。

立即调出画笔的隐藏功能！本篇教你用颜色选择器、粗细滑块和透明度滑块,实时调节画笔效果,告别单调黑线,从预设色板轻松选色,滑动控制笔触粗细与透明度,跟着步骤集成PenSettings属性管理器,让每笔绘画都自定义,实现灵活涂鸦体验

4. 小结与预告

本篇产出了三个核心模块：PenSettings 画笔属性管理器、ColorPicker 颜色选择器、BrushSlider 粗细与透明度滑块。这些组件被集成到主画布页面中，实现了画笔参数的实时调节，让用户能画出不同颜色、粗细和透明度的线条。这个功能是画图APP用户体验的关键提升点，也是后续实现形状绘制、文字添加等功能的基础。

下一篇「切换绘制模式与交互反馈」将实现矩形、圆形和自由画笔三种绘制模式的切换，优化UI反馈，让用户清晰知道当前处于哪种绘制状态，为后续的图形绘制做铺垫。

到此这篇关于HarmonyOS APP实战指南:画图APP之画笔属性调节的文章就介绍到这了,更多相关HarmonyOS 绘图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

git基础之各版本控制系统介绍
这篇文章主要为大家介绍了git基础之各版本控制系统以及版本的演变，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-04-04
C++ Go语言实现将windows和linux文件删除至回收站
这篇文章主要为大家详细介绍了如何分别使用C++ Go语言实现将windows和linux文件删除至回收站,感兴趣的小伙伴可以跟随小编一起学习一下
2023-12-12
动态语言、动态类型语言、静态类型语言、强类型语言、弱类型语言介绍
这篇文章主要介绍了动态语言、动态类型语言、静态类型语言、强类型语言、弱类型语言介绍,需要的朋友可以参考下
2015-04-04
Gateway网关工作原理及使用方法
本文详细讲解了Gateway网关工作原理及使用方法，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-12-12
Windows10使用Anaconda安装Tensorflow-gpu的教程详解
Anaconda是一个方便的python包管理和环境管理软件，一般用来配置不同的项目环境。这篇文章主要介绍了Windows10使用Anaconda安装Tensorflow-gpu的教程，本文通过图文并茂的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2020-02-02
开发人员一定要加入收藏夹的网站推荐
开发人员一定要加入收藏夹的网站，比较不错。大家可以参考一下。
2009-11-11
centos搭建code-server配置HTTPS登录页自定义实现步骤
这篇文章主要为大家介绍了centos搭建code-server及配置HTTPS、登录页自定义实现步骤详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
OAuth 2.0授权协议详解
这篇文章主要介绍了OAuth 2.0授权协议详解,本文对OAuth协议做了详解讲解,对OAuth协议的各个方面做了分解,读完本文你就会知道到底啥是OAuth了,需要的朋友可以参考下
2014-09-09
Git的基本操作流程及工作区版本库暂存区的关系
这篇文章主要为大家介绍了Git的基本操作流程及工作区版本库暂存区的关系，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-04-04
基于ChatGPT使用AI实现自然对话的原理分析
ChatGPT是当前自然语言处理领域的重要进展之一，可以生成高质量的文本，可应用于多种场景，如智能客服、聊天机器人、语音助手等。本文将详细介绍ChatGPT的原理、实战演练和流程图，帮助读者更好地理解ChatGPT技术的应用和优势
2023-05-05