Perfect-Freehand 项目中如何自定义笔画颜色

在绘图应用中，自定义笔画颜色是最基础也最重要的功能之一。本文将详细介绍如何在 Perfect-Freehand 项目中实现笔画颜色的自定义设置。

核心方法

Perfect-Freehand 基于 Canvas 2D 渲染上下文（CanvasRenderingContext2D）进行绘制，要修改笔画颜色，只需设置上下文的 fill 属性：

ctx.fill = 'yourColor'

这里的 yourColor 可以是任何有效的 CSS 颜色值，包括：

• 颜色名称（如 'red', 'blue'）
• 十六进制值（如 '#FF0000'）
• RGB/RGBA 值（如 'rgb(255,0,0)' 或 'rgba(255,0,0,0.5)'）
• HSL/HSLA 值（如 'hsl(0,100%,50%)'）

实际应用示例

假设我们要绘制一条红色的手写笔画：

import { getStroke } from 'perfect-freehand'

// 获取笔画路径点
const points = [...] // 你的坐标点数组
const stroke = getStroke(points)

// 在Canvas中绘制
const ctx = canvas.getContext('2d')
ctx.fillStyle = 'red' // 设置填充颜色

// 绘制路径
ctx.beginPath()
// ... 绘制逻辑
ctx.fill()

高级用法

1. 动态颜色切换：可以通过变量动态控制颜色

   let currentColor = '#000000'
   // 用户选择颜色后
   currentColor = userSelectedColor
   ctx.fillStyle = currentColor
   

2. 渐变效果：利用 Canvas 的渐变功能

   const gradient = ctx.createLinearGradient(0,0,100,100)
   gradient.addColorStop(0, 'red')
   gradient.addColorStop(1, 'blue')
   ctx.fillStyle = gradient
   

3. 透明度控制：使用 RGBA 格式

   ctx.fillStyle = 'rgba(255,0,0,0.7)' // 70%不透明的红色
   

注意事项

1. 确保在调用 fill() 方法前设置好 fillStyle
2. 如果需要同时设置描边颜色，使用 strokeStyle 属性
3. 颜色设置是上下文状态的一部分，会被后续的绘制操作继承

通过以上方法，你可以轻松地在 Perfect-Freehand 项目中实现各种颜色效果，满足不同的绘图需求。