鸿蒙下如何构建自定义手势绘图系统？

你是不是也在想——“鸿蒙这么火，我能不能学会？”
答案是：当然可以！
这个专栏专为零基础小白设计，不需要编程基础，也不需要懂原理、背术语。我们会用最通俗易懂的语言、最贴近生活的案例，手把手带你从安装开发工具开始，一步步学会开发自己的鸿蒙应用。
不管你是学生、上班族、打算转行，还是单纯对技术感兴趣，只要你愿意花一点时间，就能在这里搞懂鸿蒙开发，并做出属于自己的App！
📌 关注本专栏《零基础学鸿蒙开发》，一起变强！
每一节内容我都会持续更新，配图+代码+解释全都有，欢迎点个关注，不走丢，我是小白酷爱学习，我们一起上路 🚀

前言

在现代应用中，手势绘图系统被广泛应用于绘画、签名、手势识别等场景。鸿蒙操作系统提供了强大的图形绘制能力，可以通过Canvas和自定义手势识别功能实现一个完整的手势绘图系统。通过这个系统，开发者可以实现触摸轨迹捕捉、自定义笔刷样式、动态粗细变化、撤销/重做等功能，为用户提供丰富的交互体验。

本文将详细介绍如何在鸿蒙平台上构建自定义手势绘图系统，包括绘制触摸轨迹、手势识别与撤销/重做逻辑、自定义笔刷样式、绘图组件的案例（如儿童涂鸦板或签名组件），以及性能优化与存图输出的技术实现。

使用Canvas捕捉并绘制触摸轨迹

在鸿蒙系统中，Canvas是一个强大的绘图工具，可以用于绘制图形和处理触摸事件。通过Canvas，开发者可以轻松实现手势轨迹的绘制和手势识别功能。

1. 捕捉触摸事件

通过TouchEvent，我们可以捕捉用户的触摸操作。onTouchEvent方法可以用于监听用户的触摸事件，并获取触摸的坐标。

@Override
public boolean onTouchEvent(TouchEvent event) {
    // 获取触摸的坐标
    float touchX = event.getX();
    float touchY = event.getY();

    // 根据触摸事件绘制轨迹
    if (event.getAction() == TouchEvent.ACTION_DOWN) {
        // 按下事件，开始绘制
        startDrawing(touchX, touchY);
    } else if (event.getAction() == TouchEvent.ACTION_MOVE) {
        // 移动事件，更新绘制轨迹
        updateDrawing(touchX, touchY);
    } else if (event.getAction() == TouchEvent.ACTION_UP) {
        // 放开事件，结束绘制
        stopDrawing();
    }

    return true;
}

2. 绘制触摸轨迹

通过Canvas的drawPath方法，可以根据触摸坐标绘制用户的绘画轨迹。

private Path path = new Path();
private Paint paint = new Paint();

// 初始化绘画工具
private void initPaint() {
    paint.setColor(Color.BLACK);
    paint.setStrokeWidth(5);
    paint.setStyle(Paint.Style.STROKE);
    paint.setAntiAlias(true);
}

// 开始绘制
private void startDrawing(float x, float y) {
    path.moveTo(x, y);
}

// 更新绘制轨迹
private void updateDrawing(float x, float y) {
    path.lineTo(x, y);
    invalidate();  // 重绘界面
}

// 停止绘制
private void stopDrawing() {
    path.reset();
}

// 在onDraw方法中绘制
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawPath(path, paint);
}

自定义笔刷样式与动态粗细变化

手势绘图的笔刷样式和粗细可以根据用户的需求动态调整。例如，可以根据触摸压力、绘制速度等因素来动态改变笔刷的粗细。

1. 动态笔刷粗细变化

可以根据触摸的速度或距离，动态改变笔刷的粗细。例如，用户触摸屏幕时绘制的轨迹越快，笔刷的粗细越大。

private float lastTouchX = 0;
private float lastTouchY = 0;
private float pressure = 5;  // 初始笔刷粗细

@Override
public boolean onTouchEvent(TouchEvent event) {
    float touchX = event.getX();
    float touchY = event.getY();

    if (event.getAction() == TouchEvent.ACTION_MOVE) {
        // 计算触摸速度
        float dx = touchX - lastTouchX;
        float dy = touchY - lastTouchY;
        float speed = (float) Math.sqrt(dx * dx + dy * dy);

        // 根据速度调整笔刷粗细
        pressure = Math.min(20, Math.max(5, speed / 2));
        paint.setStrokeWidth(pressure);
    }

    lastTouchX = touchX;
    lastTouchY = touchY;

    return super.onTouchEvent(event);
}

2. 自定义笔刷样式

除了粗细，还可以设置其他笔刷样式，如颜色、透明度等。例如，用户可以选择不同的颜色进行绘画。

// 设置颜色
paint.setColor(Color.RED);

// 设置透明度
paint.setAlpha(128);  // 50%透明度

手势识别与撤销/重做逻辑

手势绘图系统中，手势识别功能可以帮助识别用户的绘图行为，像是绘制直线、圆形等。同时，撤销和重做是常见的绘图功能，能够让用户撤回误操作，提升体验。

1. 手势识别

手势识别可以通过分析用户的轨迹来识别用户的绘图动作。例如，识别用户绘制直线、圆形等形状。

private boolean isCircle(Path path) {
    // 简单检测圆形的算法
    // 根据路径的几何形状来判断是否为圆形
    // 此为示例代码，具体实现可以使用更多的几何学算法
    return path.isClosed();
}

2. 撤销/重做逻辑

撤销和重做功能通常通过记录绘制历史来实现。我们可以使用Stack来存储绘制的路径，并通过用户的操作进行撤销和重做。

private Stack<Path> pathHistory = new Stack<>();

// 绘制路径
private void addPathToHistory(Path path) {
    pathHistory.push(path);
}

// 撤销操作
private void undo() {
    if (!pathHistory.isEmpty()) {
        pathHistory.pop();
        invalidate();
    }
}

// 重做操作
private void redo() {
    // 实现重做逻辑
}

通过这段代码，用户可以按下撤销按钮时，删除上一个绘制的路径，并重新绘制更新后的内容。

示例：实现一个儿童涂鸦板或签名组件

在实际应用中，您可以根据上述方法创建一个简单的涂鸦板或签名组件，让用户可以自由绘制。

1. 创建绘图组件

public class DrawingView extends View {

    private Path path;
    private Paint paint;
    private Stack<Path> pathHistory;

    public DrawingView(Context context) {
        super(context);
        path = new Path();
        paint = new Paint();
        pathHistory = new Stack<>();
        initPaint();
    }

    private void initPaint() {
        paint.setColor(Color.BLACK);
        paint.setStrokeWidth(5);
        paint.setStyle(Paint.Style.STROKE);
        paint.setAntiAlias(true);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawPath(path, paint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float touchX = event.getX();
        float touchY = event.getY();

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                path.moveTo(touchX, touchY);
                break;
            case MotionEvent.ACTION_MOVE:
                path.lineTo(touchX, touchY);
                break;
            case MotionEvent.ACTION_UP:
                pathHistory.push(path);
                break;
        }
        invalidate();
        return true;
    }

    // 撤销
    public void undo() {
        if (!pathHistory.isEmpty()) {
            pathHistory.pop();
            invalidate();
        }
    }
}

2. 添加UI控件

在布局文件中，创建一个DrawingView组件，并为用户提供撤销和清除功能。

<com.example.drawingapp.DrawingView
    android:id="@+id/drawingView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<Button
    android:id="@+id/btnUndo"
    android:text="Undo"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<Button
    android:id="@+id/btnClear"
    android:text="Clear"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

3. 实现撤销和清除功能

在Activity或Fragment中添加撤销和清除按钮的功能。

DrawingView drawingView = findViewById(R.id.drawingView);
Button btnUndo = findViewById(R.id.btnUndo);
Button btnClear = findViewById(R.id.btnClear);

btnUndo.setOnClickListener(v -> drawingView.undo());
btnClear.setOnClickListener(v -> drawingView.clear());

性能优化与存图输出

手势绘图系统可能会受到性能的影响，特别是当绘制的路径数量较多时。为了提升性能，可以考虑以下几点优化：

1. 优化路径绘制

• 减少路径复杂度：通过简化路径点的数量来减少计算开销，可以使用PathMeasure来将复杂的路径简化为更少的点。
• 缓存绘图结果：对于已经绘制的部分，可以使用缓存来提升绘制性能，避免重复计算。

2. 存图输出

可以将绘制的内容保存为图像文件，方便用户导出。通过Bitmap类，可以将绘制的内容保存为PNG或JPEG格式。

public Bitmap saveDrawingToBitmap() {
    Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    draw(canvas);  // 将视图内容绘制到Bitmap上
    return bitmap;
}

3. 保存图片

保存图像文件至本地存储或云端，供用户后续查看或分享。

public void saveBitmapToFile(Bitmap bitmap) {
    try (FileOutputStream out = new FileOutputStream(filePath)) {
        bitmap.compress(Bitmap.CompressFormat.PNG, 100, out);  // 保存为PNG格式
    } catch (IOException e) {
        e.printStackTrace();
    }
}

结语

通过鸿蒙系统的Canvas和手势交互能力，开发者可以轻松实现自定义手势绘图系统。通过动态调整笔刷样式、支持撤销与重做、以及优化绘图性能，用户可以享受流畅的绘图体验。希望本文能够帮助你在鸿蒙平台上实现绘图功能，创建如儿童涂鸦板或签名组件等有趣的应用，同时掌握性能优化和文件存储的技巧。

❤️ 如果本文帮到了你…

• 请点个赞，让我知道你还在坚持阅读技术长文！
• 请收藏本文，因为你以后一定还会用上！
• 如果你在学习过程中遇到bug，请留言，我帮你踩坑！