android 撤销划线

原创

mob64ca12ef9b85 2024-12-22 06:43:16 ©著作权

文章标签 java 自定义 Android 文章分类 Android 移动开发

©著作权归作者所有：来自51CTO博客作者mob64ca12ef9b85的原创作品，请联系作者获取转载授权，否则将追究法律责任

Android 撤销划线实现教你通关

在开发一个 Android 应用时，用户可能会需要撤销之前的操作，例如撤销一条绘制的线。我们将通过简单的步骤来实现这一功能，下面是实现的流程概述：

步骤	描述
1	创建自定义 View，用于绘制线条
2	实现绘制线条的逻辑
3	添加撤销功能，并保存历史记录
4	测试撤销功能，确保功能正常

接下来，我们详细阐述每一个步骤。

第一步：创建自定义 View

创建一个继承自 View 的类，重载 onDraw 方法以执行绘制操作。

public class DrawView extends View {
    private Paint paint; // 创建画笔
    private Path path;   // 自定义路径
    private List<Path> pathList; // 存储历史路径

    public DrawView(Context context) {
        super(context);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setColor(Color.BLACK); // 设置画笔颜色
        paint.setStyle(Paint.Style.STROKE); // 设置画笔风格为描边
        paint.setStrokeWidth(5); // 设置描边宽度
        path = new Path();
        pathList = new ArrayList<>(); // 初始化历史路径列表
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (Path p : pathList) {
            canvas.drawPath(p, paint); // 绘制历史路径
        }
        canvas.drawPath(path, paint); // 绘制当前路径
    }
}

第二步：实现绘制线条的逻辑

重写 onTouchEvent 方法，使用户可以在屏幕上绘制线条。

@Override
public boolean onTouchEvent(MotionEvent event) {
    float x = event.getX();
    float y = event.getY();
    
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            path.moveTo(x, y); // 移动到触摸点
            break;
        case MotionEvent.ACTION_MOVE:
            path.lineTo(x, y); // 连接到该点
            break;
        case MotionEvent.ACTION_UP:
            pathList.add(new Path(path)); // 保存当前路径到历史轨迹
            path.reset(); // 重置当前路径
            break;
    }

    invalidate(); // 触发重绘
    return true;
}

第三步：添加撤销功能

在您的 Activity 中实现撤销功能。

public class MainActivity extends AppCompatActivity {
    private DrawView drawView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        drawView = new DrawView(this);
        setContentView(drawView);
        
        Button undoButton = new Button(this);
        undoButton.setText("撤销");
        undoButton.setOnClickListener(v -> drawView.undo()); // 按钮事件调用撤销方法
        addContentView(undoButton, new ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT, 
                ViewGroup.LayoutParams.WRAP_CONTENT));
    }
}

// 在 DrawView 类中添加撤销方法
public void undo() {
    if (!pathList.isEmpty()) {
        pathList.remove(pathList.size() - 1); // 移除最后一个路径
        invalidate(); // 触发重绘
    }
}

第四步：测试撤销功能

添加 DrawView 到活动中，并测试绘制和撤销功能。

// 在 MainActivity 中，设置 DrawView 的布局
setContentView(drawView);

关系图

使用mermaid语法绘制简化的ER图。

erDiagram
    DrawView {
        Paint paint
        Path path
        List pathList
    }
    pathList ||--o| Path : contains

序列图

使用mermaid语法绘制用户操作的序列图。

sequenceDiagram
    participant User
    participant DrawView
    User->>DrawView: 触摸屏幕
    DrawView->>DrawView: 绘制线条
    User->>DrawView: 点击撤销
    DrawView->>DrawView: 删除最后路径
    DrawView->>DrawView: 触发重绘