// utils/PenSettings.ets
// 畫筆屬性管理器，采用單例模式，全局共享同一份配置
import { Pen } from '@ohos.graphics.drawing';
class PenSettings {
  private static instance: PenSettings = new PenSettings();
  // 當(dāng)前選中的顏色，十六進(jìn)制格式，默認(rèn)黑色
  public currentColor: string = '#FF000000';
  // 當(dāng)前畫筆粗細(xì)，單位px，默認(rèn)3
  public currentWidth: number = 3;
  // 當(dāng)前透明度，范圍0-255，默認(rèn)255（完全不透明）
  public currentAlpha: number = 255;
  private constructor() { }
  static getInstance(): PenSettings {
    return PenSettings.instance;
  }
  // 應(yīng)用當(dāng)前設(shè)置到傳入的Pen對(duì)象
  applyToPen(pen: Pen): void {
    // 解析顏色字符串為整數(shù)，例如'#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);
  }
  // 更新顏色，并觸發(fā)畫布重繪（通過回調(diào)）
  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?.();
  }
  // 設(shè)置變更回調(diào)，用于通知畫布重新繪制
  onSettingsChanged: (() => void) | null = null;
}
export default PenSettings;

// components/ColorPicker.ets
// 顏色選擇器組件，展示預(yù)設(shè)色板供用戶點(diǎn)擊選擇
import PenSettings from '../utils/PenSettings';
@Component
export struct ColorPicker {
  @State private selectedColor: string = '#FF000000';
  // 預(yù)設(shè)顏色數(shù)組，涵蓋常見繪畫色彩
  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() {
      // 標(biāo)題
      Text('顏色選擇')
        .fontSize(14)
        .fontWeight(FontWeight.Bold)
        .width('100%')
        .textAlign(TextAlign.Start)
        .margin({ bottom: 6 });
      // 顏色網(wǎng)格，每行5個(gè)
      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);
                });
              // 如果是當(dāng)前選中顏色，顯示選中標(biāo)記
              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)
  }
}

// components/BrushSlider.ets
// 畫筆粗細(xì)和透明度滑塊組件，支持滑動(dòng)調(diào)節(jié)
import PenSettings from '../utils/PenSettings';
@Component
export struct BrushSlider {
  // 當(dāng)前畫筆粗細(xì)
  @State private brushWidth: number = 3;
  // 當(dāng)前透明度
  @State private brushAlpha: number = 255;
  build() {
    Column({ space: 16 }) {
      // 粗細(xì)調(diào)節(jié)
      Column() {
        Row() {
          Text('粗細(xì)')
            .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);
          });
      }
      // 透明度調(diào)節(jié)
      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)
  }
}

// pages/PaintPage.ets
// 畫圖APP主頁(yè)面，集成顏色選擇器、滑塊和畫布區(qū)域
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'
  // 當(dāng)前正在使用的Pen對(duì)象
  private drawingPen: drawing.Pen = new drawing.Pen();
  aboutToAppear(): void {
    // 注冊(cè)設(shè)置變更回調(diào)：每次顏色/粗細(xì)/透明度變化時(shí)，更新當(dāng)前Pen
    this.settings.onSettingsChanged = () => {
      this.settings.applyToPen(this.drawingPen);
    };
    // 初始化時(shí)應(yīng)用默認(rèn)設(shè)置
    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)
      // 中間畫布區(qū)域
      Canvas(this.canvasContext)
        .width('100%')
        .layoutWeight(1)
        .backgroundColor('#FFFFFFFF')
      // 底部設(shè)置區(qū)：顏色選擇 + 粗細(xì)/透明度
      Column({ space: 12 }) {
        ColorPicker()
        BrushSlider()
      }
      .padding(8)
      .width('100%')
      .backgroundColor('#FFF0F0F0')
    }
    .width('100%')
    .height('100%')
  }
}