Android中如何将Canvas的点路径同步绘制到另一个Canvas？

你现在的需求是让第一个Canvas绘制时，第二个Canvas通过**点（而非Bitmap）**实时同步显示操作过程，但目前第二个Canvas只能显示线条，无法完整复现第一个Canvas的绘制效果。咱们一步步拆解代码里的问题，然后给出修复方案：

问题根源分析 #

先看两段代码的核心问题：

1. 第二个Canvas的点处理逻辑错误：CanvasView_New的onDraw里循环mPoints时，不仅笔误把Y坐标写成了X，还反复用同一个mDrawPath叠加路径，导致画面混乱
2. 没有实时同步绘制过程：第一个Canvas收集了mPoints，但第二个Canvas没有监听这个集合的变化，而是在onDraw里重复处理，导致无法实时响应
3. 路径引用错误：直接把同一个Path对象添加到历史集合，后续修改会影响已保存的历史路径
4. 背景图适配问题：第二个Canvas绘制背景图时固定了bitmap尺寸，没有适配View的实际大小

分步修复方案 #

步骤1：给第一个Canvas添加同步通知逻辑 #

在CanvasView里添加对第二个Canvas的引用，并且在绘制的每个阶段（开始、移动、结束）通知第二个Canvas：

// 在CanvasView类中添加
private CanvasView_New mCanvasNew;

// 提供方法设置第二个Canvas实例
public void setCanvasNew(CanvasView_New canvasNew) {
    this.mCanvasNew = canvasNew;
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    float touchX = event.getX();
    float touchY = event.getY();
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            mDrawPath.moveTo(touchX, touchY);
            mX = touchX;
            mY = touchY;
            // 通知第二个Canvas开始新路径
            if (mCanvasNew != null) {
                mCanvasNew.startNewPath(touchX, touchY);
            }
            break;
        case MotionEvent.ACTION_MOVE:
            float dx = Math.abs(touchX - mX);
            float dy = Math.abs(touchY - mY);
            if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
                mDrawPath.quadTo(mX, mY, (touchX + mX) / 2, (touchY + mY) / 2);
                mX = touchX;
                mY = touchY;
                Point point = new Point((int)touchX, (int)touchY);
                mPoints.add(point);
                // 实时传递当前点给第二个Canvas
                if (mCanvasNew != null) {
                    mCanvasNew.addNewPoint(point);
                }
            }
            break;
        case MotionEvent.ACTION_UP:
            mDrawPath.lineTo(mX, mY);
            // 复制路径和画笔，避免后续修改影响历史
            mPaths.add(new Path(mDrawPath));
            mPaints.add(new Paint(mDrawPaint));
            mXPaths.add(String.valueOf(touchX));
            mYPaths.add(String.valueOf(touchY));
            // 传递完成的路径给第二个Canvas
            if (mCanvasNew != null) {
                mCanvasNew.addCompletedPath(mDrawPath, mDrawPaint);
            }
            mDrawPath = new Path();
            initPaint();
            break;
        default:
            return false;
    }
    invalidate();
    return true;
}

步骤2：修改第二个Canvas的接收与绘制逻辑 #

在CanvasView_New里添加实时点接收、路径构建的方法，修正onDraw的错误逻辑：

// 在CanvasView_New类中添加
private List<Point> mReceivedPoints = new ArrayList<>();

// 接收新路径的起点
public void startNewPath(float x, float y) {
    mReceivedPoints.clear();
    mReceivedPoints.add(new Point((int)x, (int)y));
    invalidate();
}

// 接收实时绘制的点
public void addNewPoint(Point point) {
    mReceivedPoints.add(point);
    invalidate();
}

// 接收完成的路径，保存到历史
public void addCompletedPath(Path path, Paint paint) {
    Path newPath = new Path(path);
    Paint newPaint = new Paint(paint);
    mPathsNew.add(newPath);
    mPaintsNew.add(newPaint);
    mReceivedPoints.clear();
    invalidate();
}

@Override
protected void onDraw(Canvas canvas) {
    // 绘制适配View大小的背景图
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.img1);
    Rect source = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
    Rect bitmapRect = new Rect(0, 0, getWidth(), getHeight());
    canvas.drawBitmap(bitmap, source, bitmapRect, new Paint());

    // 绘制已完成的历史路径
    drawPaths(canvas);

    // 绘制实时的正在进行的路径
    if (mReceivedPoints.size() > 1) {
        Path livePath = new Path();
        livePath.moveTo(mReceivedPoints.get(0).x, mReceivedPoints.get(0).y);
        for (int i = 1; i < mReceivedPoints.size(); i++) {
            Point prev = mReceivedPoints.get(i-1);
            Point curr = mReceivedPoints.get(i);
            // 和第一个Canvas保持一致的平滑曲线逻辑
            livePath.quadTo(prev.x, prev.y, (prev.x + curr.x)/2f, (prev.y + curr.y)/2f);
        }
        canvas.drawPath(livePath, mDrawPaint);
    }
}

步骤3：修正其他细节问题 #

• 移除CanvasView_New原onDraw里循环添加路径的错误代码
• 确保两个Canvas的画笔样式（颜色、粗细、圆角）完全一致，避免同步效果差异
• 在Activity中初始化两个Canvas时，调用canvasView.setCanvasNew(canvasViewNew)建立关联

效果说明 #

修改完成后，第二个Canvas会：

1. 实时跟随第一个Canvas的绘制动作，用平滑路径呈现点序列
2. 保存所有已完成的历史路径，和第一个Canvas的画面完全同步
3. 适配View大小显示背景图，不会出现缩放错误

内容的提问来源于stack exchange，提问作者Chitra Sathwara