我要评论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 绘图内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论