如何使用View的子级制作绘图动画，逐条绘制每条路径的线条？ [英] How can I make a drawing animation with a child of View, drawing each Path's line one by one?

问题描述

使用我在this StackOverflow answer中找到的代码，我可以成功地用手指在画布上绘制任何东西，并且我将在绘制它的同时看到我画的是什么。在此基础上，我想创建一个在按下按钮时触发的函数，该函数将做两件事：

1. 擦除画布上绘制的内容。
2. 通过以恒定的速度逐条重新绘制每条路径的线条，重播在清除画布之前在其上绘制的任何图片。

为此，我稍微修改了onTouchEvent代码，使其相应地存储每个绘制的点：

@Override
public boolean onTouchEvent(MotionEvent event) {
    StrokePoint point;

    switch (event.getAction()){
        case MotionEvent.ACTION_DOWN:
            mPath.moveTo(event.getX(), event.getY());

            // Retrieve strokes in memory
            stroke_buffer = new Stroke();
            stroke_buffer.points = new ArrayList<StrokePoint>();
            point = new StrokePoint();
            point.x = event.getX();
            point.y = event.getY();
            stroke_buffer.points.add( point );

            break;
        case MotionEvent.ACTION_MOVE:
            mPath.lineTo(event.getX(), event.getY());

            // Retrieve strokes in memory
            point = new StrokePoint();
            point.x = event.getX();
            point.y = event.getY();
            stroke_buffer.points.add( point );

            invalidate();
            break;
        case MotionEvent.ACTION_UP:
            // Retrieve strokes in memory
            strokes.add(stroke_buffer);
            break;
        default:
            break;
    }
    return true;
}

这样，我可以稍后在循环中加载X和Y点(至少这是这样的想法)。问题是我不确定如何在画布上为每一行触发重绘。我尝试按如下方式存储"；onDraw"；中的画布：

@Override
protected void onDraw(Canvas canvas) {
    canvas.drawPath(mPath, mPaint);

    // For trying to make the "redraw" later
    this.mCanvas = canvas;

    super.onDraw(canvas);
}

然后，我为要擦除并重播先前绘制的笔划的按钮创建此方法：

public void replayStrokes() {
    // I start a new path from scratch ad-hoc the "redraw" animation.
    mPath = new Path();
    Log.i("SANDBOX_INFO", "Button pressed");
    // Intention here is leaving the "whiteboard" clear again.
    mCanvas.drawRGB(255, 255, 255);
    invalidate();
    this.draw(mCanvas);
    SystemClock.sleep(1000);

    // Redraw "line by line" loop
    mPath.moveTo(strokes.get(0).points.get(0).x,
                 strokes.get(0).points.get(0).y);
    for (int i = 0; i < strokes.size(); i++) {
        for (int j = 0; j < strokes.get(i).points.size(); j++) {
            if (i == 0 && j == 0) continue;
            mPath.lineTo(strokes.get(i).points.get(j).x,
                         strokes.get(i).points.get(j).y);
            mCanvas.drawPath(mPath, mPaint);
            invalidate();
            this.draw(mCanvas);
            SystemClock.sleep(100);
        }
    }
}

当我按下按钮时，replayStrokes方法的行为不符合预期。这就像它仍然在思考和处理，当你最意想不到的时候，它会一下子刷新所有的变化；相反，我希望它是一个流畅的动画，你可以看到以前用手指绘制的整个路径，逐行、逐点地重播。我做错了什么？我应该更改哪些内容才能获得预期的行为？

推荐答案

多亏了@VitorHugoSchwaab的评论，我终于想出了一个解决方案。提醒一下：我在这个问题中发布的所有代码都应该在public class DrawCanvas extends View类中。也就是说：

因此，我将触发器方法&Quot；保留如下：

private int s, p;
private boolean replay_mode;

public void replayStrokes() {
    s = 0;
    p = 0;
    replay_mode = true;
    invalidate();
}

我像这样修改了onDraw方法(我将其转换为Megamoth，但我可以稍后修复：p)：

@Override
protected void onDraw(Canvas canvas) {
    if (replay_mode) {
        if (s == 0 && p == 0) {
            Log.i("SANDBOX_INFO", "Replay Mode START");
            canvas.drawRGB(255, 255, 255);
            p++;
            replayPath.reset();
            replayPath.moveTo(strokes.get(0).points.get(0).x,
                    strokes.get(0).points.get(0).y);
            invalidate();
        } else {
            Log.i("SANDBOX_INFO", "Replaying --> S:" + s + " P:" + p);
            if (p == 0) {
                replayPath.moveTo(strokes.get(s).points.get(p).x,
                        strokes.get(s).points.get(p).y);
            } else {
                replayPath.lineTo(strokes.get(s).points.get(p).x,
                        strokes.get(s).points.get(p).y);
                canvas.drawPath(replayPath, mPaint);
            }

            int points_size = strokes.get(s).points.size();
            if (s == strokes.size() - 1 && p == points_size - 1) {
                Log.i("SANDBOX_INFO", "Replay Mode END");
                replay_mode = false;
            }
            else if (p == points_size - 1) {
                s++;
                p = 0;
            } else {
                p++;
            }
        }
        invalidate();
    } else {
        canvas.drawPath(mPath, mPaint);
    }

    super.onDraw(canvas);
}

这是可行的。但是，在重播笔划时，会出现闪烁的毛刺效果。我认为这可能是因为它实际上是在每一帧上重新绘制整个重放路径。基于此猜测，当我有更多时间编写代码时，我将尝试解决此问题。

这篇关于如何使用View的子级制作绘图动画，逐条绘制每条路径的线条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！